Please find my sample code here<http://stackoverflow.com/questions/16237606/google-visualization-data-grouping>. I think it will solve your problem.
On Thursday, March 8, 2012 9:22:28 PM UTC+5:30, Andrew wrote: > > Hi All, > > I,m very new to the visualization API and can't figure out how to not > display the data table without getting an error message. I have about > 50,000 records which is way too many to display. I can comment out the div > tag for the table but then I get the error that one of the participants > failed to draw. The code I am using is below. Thanks for any and all help. > > <html xmlns="http://www.w3.org/1999/xhtml";> > <head> > <meta http-equiv="content-type" content="text/html; charset=utf-8"/> > <title> > Google Visualization API Sample > </title> > <script type="text/javascript" src="http://www.google.com/jsapi > "></script> > <script type="text/javascript"> > google.load('visualization', '1.1', {packages: ['controls']}); > google.load('visualization', '1', {packages:['table']}); > </script> > <script type="text/javascript"> > function drawVisualization() { > var data = google.visualization.arrayToDataTable([ > ['Date','Gender','Avg/Score','Age','Rounds/Year','Comp Ball','Comp Swing > Speed'], > ['2008','male','85-93','-34','12','S-AD333', 65], > ['2008','female','85-93','-34','12','S-AD333', 86], > ['2008','male','85-93','-34','12','S-AD333', 98], > ['2008','male','85-93','51-65','12','S-AD333', 101], > ['2008','male','85-93','51-65','12','S-AD333', 115], > ['2008','female','106-','51-65','48','S-AD333', 97] > > ]); > > var $pieChart = new google.visualization.ChartWrapper({ > 'chartType': 'BarChart', > 'containerId': 'chart1', > 'options': { > 'width': 500, > 'height': 300, > }, > //group the data for the pie chart > 'dataTable' : google.visualization.data.group(data, [1], > [{'column': 1, 'aggregation': google.visualization.data.count, 'type': > 'number'}]) > }); > $pieChart.draw(); > > $tableWrapper = new google.visualization.ChartWrapper({ > 'chartType': 'Table', > 'containerId': 'chart2' > }); > > var $genderPicker = new google.visualization.ControlWrapper({ > 'controlType': 'CategoryFilter', > 'containerId': 'gender_filter', > 'options': { > 'filterColumnIndex': '1', > 'useFormattedValue' : true, > 'ui': { > 'allowTyping': false, > 'allowMultiple': false, > 'labelStacking': 'vertical' > } > } > }); > > var $compBallPicker = new google.visualization.ControlWrapper({ > 'controlType': 'CategoryFilter', > 'containerId': 'compBall_filter', > 'options': { > 'filterColumnIndex': '5', > 'useFormattedValue' : true, > 'ui': { > 'allowTyping': false, > 'allowMultiple': true, > 'labelStacking': 'vertical' > } > } > }); > > var $avgScorePicker = new google.visualization.ControlWrapper({ > 'controlType': 'CategoryFilter', > 'containerId': 'avgScore_filter', > 'options': { > 'filterColumnIndex': '2', > 'useFormattedValue' : true, > 'ui': { > 'allowTyping': false, > 'allowMultiple': true, > 'labelStacking': 'vertical' > } > } > }); > > new google.visualization.Dashboard(document.getElementById('dashboard')). > bind([$genderPicker,$compBallPicker,$avgScorePicker], [ $tableWrapper]). > draw(data); > > > google.visualization.events.addListener($genderPicker, 'statechange', > > function(event) { > // group the data of the filtered table and set the result in the pie > chart. > $pieChart.setDataTable( google.visualization.data.group( > // get the filtered results > $tableWrapper.getDataTable(), > [1], > [{'column': 1, 'aggregation': google.visualization.data.count, 'type': > 'number'}] > )); > // redraw the pie chart to reflect changes > $pieChart.draw(); > }); > > google.visualization.events.addListener($compBallPicker, 'statechange', > > function(event) { > // group the data of the filtered table and set the result in the pie > chart. > $pieChart.setDataTable( google.visualization.data.group( > // get the filtered results > $tableWrapper.getDataTable(), > [1], > [{'column': 1, 'aggregation': google.visualization.data.count, 'type': > 'number'}] > )); > // redraw the pie chart to reflect changes > $pieChart.draw(); > }); > > google.visualization.events.addListener($avgScorePicker, 'statechange', > > > function(event) { > // group the data of the filtered table and set the result in the pie > chart. > $pieChart.setDataTable( google.visualization.data.group( > // get the filtered results > $tableWrapper.getDataTable(), > [1], > [{'column': 1, 'aggregation': google.visualization.data.count, 'type': > 'number'}] > )); > // redraw the pie chart to reflect changes > $pieChart.draw(); > }); > > > } > > > google.setOnLoadCallback(drawVisualization); > </script> > > </head> > <body style="font-family: Arial;border: 0 none;"> > <div id="dashboard"> > <table> > <tr style='vertical-align: top'> > <td style='width: 200px; font-size: 0.9em;'> > <div id="gender_filter"></div> > <div id="compBall_filter"></div> > <div id="avgScore_filter"></div> > </td> > <td style='width: 900px'> > <div style="float: left;" id="chart1"></div> > <!--<div style="float: left;" id="chart2"></div>--> > <div style="float: left;" id="chart3"></div> > </td> > </tr> > </table> > </div> > </body> > </head> > </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?hl=en. For more options, visit https://groups.google.com/groups/opt_out.
