Modifying CSS and finding ID of a google charts ta

Question

I have two questions. I am trying to create a google charts table.

A) I need the ID of the actual table element being created so I can make some modifications. So, how can I set/get the table ID?

B) How can I add custom CSS class to the table tag? I basically want to add css from material-design-lite to these tables.

Thank You so much!

Answer 1

First, you can assign cssClassNames to specific areas of the chart, using the Configuration Options.

Such as...

headerRow - Assigns a class name to the table header row ( element).

tableRow - Assigns a class name to the non-header rows ( elements).

...

If that doesn't help, you can modify the dom as needed, once the chart is ready.

You have to specify a container id to draw the chart originally, usually a div.

So you don't need the id of the google table to modify it. Just browse the contents of the container you defined using JavaScript to find what you need.

For instance, there is a known problem with locking the first column heading row when scrolling in certain browsers. Following is the function I use to fix that, I'm cheating a little, using MicrosoftAjax.js to getBounds.

_googleChartFixScroll: function(sender, args) {
    var googleBounds;
    var googleDivs;
    var googleRows;

    googleDivs = this._containerChart.getElementsByTagName('DIV');

    if (googleDivs.length === 3) {
        googleRows = this._containerChart.getElementsByTagName('TR');
        if (googleRows.length > 0) {
            googleBounds = Sys.UI.DomElement.getBounds(googleRows[0]);
            googleDivs[2].style.height = googleBounds.height + 'px';
        }
    }
},

The point is, within the div you define for the chart, you can manipulte the google chart, if you just know how to explore the dom. Once you find the element you need, you can apply what ever style you want...

In my example, whenever the table has too many rows and the column header needs to be locked, there are three div's instead of two. As such, I find the first table row and lock it.

Hope this helps...