Max, thanks for the response. It appears that using display:none does work, but not very well. With about 50,000 records it takes about 25 seconds for the chart to appear. It also takes about 25 seconds when you choose something from one of the pickers. I'll keep searching for a solution.
Andrew On Friday, March 9, 2012 7:38:31 AM UTC-5, MadMax wrote: > > I haven't checked you code for other errors, but try using: > > <div style="display:none;" id="chart2"></div> > > instead of > > <!--<div style="float: left;" id="chart2"></div>--> > > in your html. I've used it to hide other elements successfully. > > Max > www.energymatters.com.au > > On Mar 9, 2:52 am, Andrew <[email protected]> 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 view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/FEqQqI0E6foJ. 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.
