How to center the Guages in middle of webpage

Glad, We could make it work for you. Can you please do us a favour by leaving a review on JED. It would be highly appreciable. Here is the link:

extensions.joomla.org/extensions/extensi...ion-a-culture/vchart

Last thing. Another key to show the guages on one line was to move the guage module to a template position (gantry template in my case) that had One single section (all 12 positions) for the module position. This creates enough space for the guages to be spread across the module position on a single line.

UPDATE - it works now. I did not make any new changes (so the two css files are in the style.css in the module and style.css in the compoent).

Additional settings for the three guages to be centered across the page (each takes up 1/3rd of the page all on one line).

Width 380px Height 160px
set to Chart Div

I also centered the template module (depends upon which template you are using) which displays the guages.

Looks very cool.

Thanks

.vchart-preview table tr td div div:nth-of-type(1), .vchar_info table tr td div div:nth-of-type(1) {
margin: 0 auto !important;
}
.vchart-preview table, .vchar_info table {
width: 100% !important;
}


I was not sure which of the css files these two lines needed to be input. So I added the two css as the bottom lines for these two files:

components/com_vchart/css/style.css

and

modules/mod_vchart/css/style.css


Those were the only two css files I could find. The guages are still aligned to the left of the page. Did I include the two lines in the correct file?

(I also logged in and logged out, and cleaned the cache out before refreshing. But guages still not centered).


Thanks.

Hi NBurton

Please use this css to put the gauge chart in middle of table

.vchart-preview table tr td div div:nth-of-type(1), .vchar_info table tr td div div:nth-of-type(1) {
margin: 0 auto !important;
}
.vchart-preview table, .vchar_info table {
width: 100% !important;
}


We hope this response has sufficiently answered of your question. If not, please reply and we will answer your question / query as soon as possible.

Thanks
Zaheer

Can you explain how to center the guage that comes with the program. Is it always shown to the left? How was it fixed? Was CSS changed? Was php layout filed edited? I can then fix myself. Thanks. (Note, I am not able to give backend access. I am testing on localhost only.)

Hi NBurton

Thanks to contact us.Please send your backhand detail via Contact Us form, so that we can check it.


thanks
zaheer

Is there a way to center the guages in a Div? My guage settings are at 100% width so they can remain responsive.

My results are always placed in left margin. there are three guages that take up three "small div boxes" from left to right. There are three more "empty" div boxes to the right of the three guages. This doesn't make sense becaue there are only supposed to be three guages (so why not three div boxes centered across the page?)

per inspect element, the three guages are in the firs three <td>'s as follows: <tr><td>guage1</td><td>guage2</td><td>guage3</td> (I added the word "guage". The three empty guages are <td>empty</td><td>empty</td><td>empty</td> (I added the word empty). So there are six <td>s across the page.

I have tried everything with my template settings to center the three guages. I have tried to center the guages in a plugin article centered in a div in an article. I have tried to center the guages in a module.

I also looked for a css file to "add" a center css entry. The only CSS file I found was components/com_vchart/style.css

The style.css contains only dashboard settings:

.vchart_deshboard .filter_div, .vchart_deshboard .cat_picker {
float:left;
clear:both;
margin:25px 0 0;
width:100%;
text-align:center;
}
.vchart_deshboard .cat_picker .google-visualization-controls-label,
.vchart_deshboard .cat_picker .google-visualization-controls-categoryfilter div {
display:inline-block;
vertical-align:middle;
}
.vchart_deshboard .pie_div, .vchart_deshboard .chart_div {
display:inline-block;
margin:0;
vertical-align:middle;
}
.chart_div img {
max-width:inherit;
}
.vchart_deshboard .main_chartarea {
display:inline-block;
width:100%;
text-align:center;
padding:25px 0;
}
.vchart_deshboard .google-visualization-controls-stringfilter .google-visualization-controls-label {
padding-top:0;
}

But the inspect element shows that the CSS file for the guage div-boxes is chart_div share_option

I could problably fix if I can find the CSS file for chart_div share_option, or if I could delete the last three <td>'s to the right of the three guages in the first three <td>'s.

Are there more CSS files in library, template or somewhere else? (I looked but could not find)

thanks