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.
On Friday, November 30, 2012 2:50:05 AM UTC-5, jacob wrote: > > 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> > <script type='text/javascript' src='https://www.google.com/jsapi > '></script> > <script type='text/javascript'> > 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> > <div id='table_div'></div> > </body> > </html> > > On Thursday, 29 November 2012 21:23:19 UTC+5:30, asgallant wrote: >> >> 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/-/5XC-foJEPtAJ. 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.
