Google visualization Table: Display full column label

0
votes

I have created a table with google charts ie using google.visualization.Table, and the column headers for the same are HR, BR and so on..

eg
{cols:[{id:'A',label:'',type:'string'}, {id:'B',label:'IMP',type:'number'}]}

since I have many columns in my actual code, I have abbreviated them, but I need to show the full column name when I hover over it.Any ideas how to go about it ?

2
chartsgoogle-visualization

2 Answers

0
votes

The Visualization API Table visualization doesn't allow you to associate any meta-data with the column headers, so you will have to find the header cells and use their contents look up the full names. You could use something like this to get you started:

google.visualization.events.addListener(myTable, 'ready', function () {
    var headerCells = document.querySelectorAll('#my_table_div .google-visualization-table-th');
    // loop over headerCells and use contents of cells to find the full name
    // note that the headerCells will contain a <span> element for the sort arrows, if sorting is enabled
});

Insert the event listener after you create the Table object but before you draw it.

1
votes

You can use html in the label field - for example:

<span title='Full label'>b</span>

"Full label" will then appear as a tooltip on mouse-over.