Re: Google table charts not showing tooltip

asgallant

unread,

Nov 29, 2012, 10:53:19 AM11/29/12

to google-visua...@googlegroups.com

There's no tooltip support built in to the Table visualization. You can code your own, though, using whatever tooltip library you like. Add some metadata to the Table contents so you can identify the row and column of the data being hovered over, and you can pull that information from the DataTable. The metadata code might look like this:

for (var i = 0; i < data.getNumberOfRows(); i++) {
  for (var j = 0; j < data.getNumberOfColumns(); j++) {
  var formattedValue = data.getFormattedValue(i, j);
  data.setFormattedValue(i, j, '<span row="' + i + '" column="' + j + '">' + formattedValue + '</span>');
  }
}

You could then pull the row and column metadata from the span element on hover, and use that info to populate your tooltip.

On Thursday, November 29, 2012 5:35:21 AM UTC-5, jacob wrote:

Hi,
I am working on google charts.Below code is showing tooltip in case of core graph.
I am trying to show tooltip in case of Table chart.
need sugestions..

corechart code:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {

data = new google.visualization.DataTable()
data.addColumn('string', 'Date');
data.addColumn('number');
data.addColumn({type:'string',role:'tooltip'});
data.addRow();
base = 10;
data.setValue(0, 0, 'Datapoint1');
data.setValue(0, 1, base++);
data.setValue(0, 2, " hello ");

data.addRow();
data.setValue(1, 0, 'Datapoint2');
data.setValue(1, 1, base++);
data.setValue(1, 2, "sourav here");

// Draw the chart.
var chart = new google.visualization.BarChart(document.getElementById('visualization'));
chart.draw(data, {legend:'none', width:600, height:400});
}

</script>
</head>
<body>
<div id="visualization" style="width: 900px; height: 500px;"></div>
</body>
</html>

Table code:

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["Table"]});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
data = new google.visualization.DataTable()
data.addColumn('string', 'Date');
data.addColumn('number');
data.addColumn({type:'string',role:'tooltip'});
data.addRow();
base = 10;
data.setValue(0, 0, 'Datapoint1');
data.setValue(0, 1, base++);
data.setValue(0, 2, " hello ");

data.addRow();
data.setValue(1, 0, 'Datapoint2');
data.setValue(1, 1, base++);
data.setValue(1, 2, "sourav here");

// Draw the chart.
var chart = new google.visualization.Table(document.getElementById('visualization'));
chart.draw(data, {legend:'none', width:600, height:400});
}

</script>
</head>
<body>
<div id="visualization" style="width: 900px; height: 500px;"></div>
</body>
</html>

jacob

unread,

Nov 30, 2012, 2:50:05 AM11/30/12

to google-visua...@googlegroups.com

Hi,

Thanks for replying..

I added your code but i am getting full span element (<span row="0" column="0">Mike</span>) as in attached image also.

For a complete row i am trying to add a tooltip on mousehover.

Need suggestions.

<html>

<head>

google.load('visualization', '1', {packages:['table']});

google.setOnLoadCallback(drawTable);

function drawTable() {

var data = new google.visualization.DataTable();

data.addColumn('string', 'Name');

data.addColumn('number', 'Salary');

data.addColumn('boolean', 'Full Time Employee');

// data.addColumn({type: 'string', role: 'tooltip'});

data.addRows([

['Mike', {v: 10000, f: '$10,000'}, true],

['Jim', {v:8000, f: '$8,000'}, false],

['Alice', {v: 12500, f: '$12,500'}, true],

['Bob', {v: 7000, f: '$7,000'}, true],

['Sourav', {v: 7000, f: '$9,000'}, true],

['Sunil', {v: 7000, f: '$16,000'}, true],

['Vinod', {v: 7000, f: '$19,000'}, true]

]);

var table = new google.visualization.Table(document.getElementById('table_div'));

for (var i = 0; i < data.getNumberOfRows(); i++) {

for (var j = 0; j < data.getNumberOfColumns(); j++) {

var formattedValue = data.getFormattedValue(i, j);

data.setFormattedValue(i, j, '<span row="' + i + '" column="' + j + '">' + formattedValue + '</span>');

}

table.draw(data, {showRowNumber: true});

}

</script>

</head>

<body>

</body>

</html>

table_chart.png

asgallant

unread,

Nov 30, 2012, 11:13:55 AM11/30/12

to google-visua...@googlegroups.com

You have to set the "allowHtml" option to true.

If you did this to one column in each row, you could set up mouseover and mouseout events on the table's row's, drilldown into the appropriate cell in the row, pull the metadata from the cell, and then use that metadata to fetch the data you need for the tooltip from the chart.

jacob

unread,

Dec 3, 2012, 9:35:01 AM12/3/12

to google-visua...@googlegroups.com

Thanks..

one more question..

How to limit number of rows in table chart.

Suppose i want to show only first 5 rows

or i want to add pagination in table or something like pagination in google charts.

Need your suggestions

asgallant

unread,

Dec 3, 2012, 1:28:38 PM12/3/12

to google-visua...@googlegroups.com

The Table's support pagination. Set the "page" option to "enable" and the "pageSize" option to the number of rows per page.

masterduck

unread,

May 27, 2014, 3:42:11 PM5/27/14

to google-visua...@googlegroups.com

Hi,

I'm trying to do the same, but I'm stuck in this step. I've set the 'allowHtml' option to true, but don't know how to pull the metadata for the tooltip.

Could you please explain it to me or share your code.

Thanks in advance!

Andrew Gallant

unread,

May 27, 2014, 4:09:05 PM5/27/14

to google-visua...@googlegroups.com

Given the row and column indices, you can pull data from your DataTable, like this:

data.getValue(row, column);

As written, that code sample I included above will identify the row and column of the cell the user is hovering over, not the location of the tooltip data. You have to translate that row and column information yourself to look up the tooltip data.

To access the row and column information, properly those properties should be "data-row" and "data-column":

data.setFormattedValue(i, j, '<span data-row="' + i + '" data-column="' + j + '">' + formattedValue + '</span>');

You can then access the attributes like this:

// span is the <span> element
span.getAttribute('data-row');
span.getAttribute('data-column');

or, if you can ignore IE 10 and older:

span.dataset.row;
span.dataset.column;

Reply all

Reply to author

Forward