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>
>
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/OJia4-LL4ZIJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
