The API is still inserting a 50000 row table into HTML, even if you can't see it. Maybe you would have luck setting the 'page' option to 'enable' for the table; that should knock it down to a 10 row table, which takes essentially no time to add.
On Friday, March 9, 2012 11:11:06 AM UTC-5, Andrew wrote: > > 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/-/Gzj4A6obnBgJ. 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.
