The Table's support pagination. Set the "page" option to "enable" and the "pageSize" option to the number of rows per page.
On Monday, December 3, 2012 9:35:01 AM UTC-5, jacob wrote: > > 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/-/k8K8A8kzDG8J. 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.
