The problem is that $tableWrapper2 does not have the containerId property specified, so it can't draw. Is the purpose of this table just to provide the chart with an aggregated filtered DataTable to draw from? If so, you don't need it, as you already have another visualization (staffingTable) that is being filtered by the control: http://jsfiddle.net/asgallant/8CCj5/
On Tuesday, February 11, 2014 12:52:14 PM UTC-5, Christina Sanabria wrote: > > 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.
