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 view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/7VpLaxXWrYkJ. 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.
