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! El lunes, 3 de diciembre de 2012 15:35:01 UTC+1, jacob escribió: > > 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 > > On Friday, 30 November 2012 21:43:55 UTC+5:30, asgallant wrote: >> >> 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 unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
