Hi All, I have a visualization with one control, a line chart and table. The control is bound to both the line chart and the table.
When the page loads, I get an error message that One or more participants failed to draw(), but everything appears as it should. When I make a selection on the control, again the charts load correctly but I get the same error message. Can you please explain what I'm doing wrong? Many thanks in advance! My code is below. <script type="text/javascript" src="http://www.google.com/jsapi";></script><script type="text/javascript"> google.load('visualization', '1.0', {'packages':['table']}); google.load('visualization', '1', {packages: ['corechart']}); google.load('visualization', '1.1', {packages: ['controls']}); google.setOnLoadCallback(initialize); </script><script type="text/javascript"> function drawVisualization() { // Prepare the data var data = google.visualization.arrayToDataTable([ ["Program Number","Year","Attorneys","Paralegals","Other Staff","Total Staff"], ["107000","2006",9,9,9,27], ["107000","2007",9,10,12,31], ["107000","2008",11,9,11,31], ["107000","2009",10,9,12,31], ["107000","2010",9,9,12,30], ["107000","2011",9,8,13,30], ["120000","2006",28,11,16,55], ["120000","2007",27,21,7,55], ["120000","2008",31,21,6,58], ["120000","2009",31,20,6,57], ["120000","2010",32,21,6,59], ["120000","2011",30,17,6,53], ["122007","2006",7,2,5,14], ["122007","2007",9,3,6,18], ["122007","2008",7,2,4,13], ["122007","2009",7,2,4,13], ["122007","2010",11,2,6,19], ["122007","2011",10,3,4,17], ["122087","2006",5,6,3,14], ["122087","2007",4,4,3,11], ["122087","2008",4,4,3,11], ["122087","2009",4,5,3,12], ["122087","2010",5,5,5,15], ["122087","2011",16,5,10,31], ["122090","2006",10,3,4,17], ["122090","2007",11,3,4,18], ["122090","2008",10,2,4,16], ["122090","2009",10,2,4,16], ["122090","2010",10,1,4,15], ["122090","2011",8,1,3,12], ["122107","2006",10,9,5,24], ["122107","2007",9,9,5,23], ["122107","2008",9,8,5,22], ["122107","2009",8,8,5,21], ["122107","2010",8,8,5,21], ["122107","2011",8,8,7,23], ["130010","2006",6,2,2,10], ["130010","2007",6,2,2,10], ["130010","2008",3,3,2,8], ["130010","2009",2,3,3,8], ["130010","2010",3,3,3,9], ["130010","2011",3,2,5,10], ["140000","2006",26,9,11,46], ["140000","2007",26,11,9,46], ["140000","2008",26,12,11,49], ["140000","2009",28,13,5,46], ["140000","2010",27,13,4,44], ["140000","2011",28,13,5,46], ["146010","2006",5,1,2,8], ["146010","2007",5,1,2,8], ["146010","2008",4,1,2,7], ["146010","2009",5,1,2,8], ["146010","2010",5,1,2,8], ["146010","2011",5,1,2,8], ["233010","2006",27,9,15,51], ["233010","2007",30,10,17,57], ["233010","2008",33,10,16,59], ["233010","2009",39,10,14,63], ["233010","2010",35,9,14,58], ["233010","2011",35,11,17,63], ["233047","2006",23,21,14,58], ["233047","2007",24,22,13,59], ["233047","2008",26,22,13,61], ["233047","2009",25,20,13,58], ["233047","2010",24,24,15,63], ["233047","2011",26,25,17,68], ["233070","2006",43,13,18,74], ["233070","2007",48,12,16,76], ["233070","2008",47,14,19,80], ["233070","2009",54,13,19,86], ["233070","2010",48,12,18,78], ["233070","2011",43,11,15,69], ["233100","2006",151,50,92,293], ["233100","2007",164,62,116,342], ["233100","2008",187,64,110,361], ["233100","2009",194,83,98,375], ["233100","2010",202,65,111,378], ["233100","2011",189,59,98,346] ]); // Define a category picker control for the Program Number column var chooseProgram = new google.visualization.ControlWrapper({ 'controlType': 'CategoryFilter', 'containerId': 'chooseprogram', 'options': { 'filterColumnLabel': 'Program Number', 'ui': { 'labelStacking': 'vertical', 'allowTyping': true, 'allowMultiple': false } } }); //////// // Define a full table var staffingTable = new google.visualization.ChartWrapper({ 'chartType': 'Table', 'containerId': 'staffingtable', 'options': {'width': '30em'} }); //////////////////////////// // Define a line chart var staffingLine = new google.visualization.ChartWrapper({ 'chartType': 'LineChart', 'containerId': 'staffingline', 'options': { 'width':500, 'height': 300, 'chartArea': {'left': 40, 'top': 15, 'right':7, 'bottom': 7} }, 'dataTable' : google.visualization.data.group(data, [1], [{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'},{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'},{'column': 4, 'aggregation': google.visualization.data.sum, 'type': 'number'},{'column': 5, 'aggregation': google.visualization.data.sum, 'type': 'number'}]) }); $tableWrapper2 = new google.visualization.ChartWrapper({ 'chartType': 'Table' }); // Create a dashboard new google.visualization.Dashboard(document.getElementById('dashboard')). // Establish bindings. The chooseProgram category picker will drive both charts. bind([chooseProgram], [$tableWrapper2, staffingTable]). // Draw the entire dashboard. draw(data); ////////////// google.visualization.events.addListener(chooseProgram, 'statechange', function(event) { staffingLine.setDataTable(google.visualization.data.group( $tableWrapper2.getDataTable(), [1], [{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'},{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'},{'column': 4, 'aggregation': google.visualization.data.sum, 'type': 'number'},{'column': 5, 'aggregation': google.visualization.data.sum, 'type': 'number'}] )); staffingLine.draw(); }); } google.setOnLoadCallback(drawVisualization); //javascript ends </script><p> </p> <div id="dashboard"> <span style="font-size:14px;"><span style="color: rgb(204, 0, 0); "><span style="font-family: arial, helvetica, sans-serif; "><strong>Select a Program</strong></span></span></span> <div id="chooseprogram"> </div> <p> <span style="font-size:14px;"><span style="color: rgb(204, 0, 0); "><span style="font-family: arial, helvetica, sans-serif; "><strong>Staffing Trend</strong></span></span></span></p> <table><tbody><tr><td style="width: 700 px"> <div id="staffingline" style="float: left;"> </div> </td></tr></tbody></table> <p><span style="font-size:14px;"><span style="color: rgb(204, 0, 0); "><span style="font-family: arial, helvetica, sans-serif; "><strong>Staffing Data</strong></span></span></span></p> <div id="staffingtable" style="float: left;"> </div> </div> -- 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. For more options, visit https://groups.google.com/groups/opt_out.
