Thanks for the reply. Vanilla CSS with !important don't work. I figured
it out with a little drive and fresh air. I added a ready handler that
looks for my div, then selects the first table child, then sets the CSS
margin via JS. Seems like this could be documented. However, being forced
to use my brain from time to time is probably a good thing. Thanks Daniel.
...and thanks Google for the free charts.
google.charts.load('current', {
'packages': ['gauge']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
['Network', 68]
]);
var guageOptions = {
width: 400,
height: 120,
redFrom: 90,
redTo: 100,
yellowFrom: 75,
yellowTo: 90,
minorTicks: 5
};
var guage = new google.visualization.Gauge(document.
getElementById('my-div'));
google.visualization.events.addListener(guage, 'ready',
resetTableStyle);
guage.draw(data, guageOptions);
setInterval(function() {
resetTableStyle();
}, 5000);
function resetTableStyle(){
var myDiv = document.getElementById('my-div');
var myTable = myDiv.getElementsByTagName('table')[0];
myTable.style.margin = 'auto';
}
On Tuesday, January 3, 2017 at 2:32:21 PM UTC-6, Daniel LaLiberte wrote:
>
> A Table chart is a particular way of using HTML tables to render a
> datatable, though they might be implemented another way some day. But this
> is irrelevant to the table used to contain a set of Gauges.
>
> If you want to modify the css for the table that contains a Gauge chart,
> that should be doable with the appropriate CSS, but I'd have to see the
> particulars of what you are doing to tell what is going on.
>
> Generally, css selectors need to be more specific than selectors that are
> already being used in order to override other settings. A table is wrapped
> around a set of gauges, and that table is written into the container you
> provide. This table has a margin of 0px, so to override that, maybe your
> css could be #chart_div table { margin: auto; }. But unfortunately, the
> margin: 0px is set on the element itself, which overrides other css
> settings, unless you add !important to it. So try #chart_div table {
> margin: auto !important; }
>
> On the other hand, it would probably be better to do the centering style
> change on your container element and avoid future complications with
> possible changes in the internals of the Gauge chart.
>
> On Tue, Jan 3, 2017 at 3:17 PM, Ron Royston <[email protected] <javascript:>>
> wrote:
>
>> The Customized Table Example
>> <https://developers.google.com/chart/interactive/docs/examples#custom_table_example>
>>
>> talks about passing in a cssClassNames object to the .draw() method.
>> However, the documented cssClassNames
>> <https://developers.google.com/chart/interactive/docs/gallery/table#configuration-options>
>>
>> object won't accept a value for the table itself. My issue is that I
>> simply want to set a CSS property, namely,margin:auto, so that my guages
>> will be centered on my webpage (in my div). Note, I tried setting a global
>> CSS table{margin:auto} but it don't work...
>>
>> Why is this so hard? It would be easy if I could attach an id or class
>> to the table itself, wouldn't it? All I would have to do is tell JS,
>> style.margin = 'auto'; How do I do this?
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "Google Visualization API" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to [email protected]
>> <javascript:>.
>> To post to this group, send email to [email protected]
>> <javascript:>.
>> Visit this group at
>> https://groups.google.com/group/google-visualization-api.
>> To view this discussion on the web visit
>> https://groups.google.com/d/msgid/google-visualization-api/22061457-2357-4069-b65a-112ab9c65b10%40googlegroups.com
>>
>> <https://groups.google.com/d/msgid/google-visualization-api/22061457-2357-4069-b65a-112ab9c65b10%40googlegroups.com?utm_medium=email&utm_source=footer>
>> .
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>
>
> --
> Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2>
> [email protected] <javascript:> 5CC, Cambridge MA
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/7d7d7937-2242-407d-9185-4e4df8b2e24e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
