How To: Adding a CSS Class to the Table: Customized Table Example Documentation ?

718 views
Skip to first unread message

Ron Royston

unread,
Jan 3, 2017, 3:17:51 PM1/3/17
to Google Visualization API
The Customized Table Example talks about passing in a cssClassNames object to the .draw() method.  However, the documented cssClassNames 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?

Daniel LaLiberte

unread,
Jan 3, 2017, 3:32:21 PM1/3/17
to Google Visualization API
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 <r...@rack.pub> wrote:
The Customized Table Example talks about passing in a cssClassNames object to the .draw() method.  However, the documented cssClassNames 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 google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
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.
For more options, visit https://groups.google.com/d/optout.



--

Ron Royston

unread,
Jan 3, 2017, 4:54:24 PM1/3/17
to Google Visualization API
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 <r...@rack.pub> wrote:
The Customized Table Example talks about passing in a cssClassNames object to the .draw() method.  However, the documented cssClassNames 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 google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.



--
Reply all
Reply to author
Forward
0 new messages