Hi! I am new to Google's API's and I am having trouble with getting multiple charts to work in the full dashboard API. My piechart does function correctly, but my geochart fails to show up and when checked in the browser I get the following message "one or more of the participants failed to draw." I would like the geochart to display the data in my "Military spending per capita" column as well as the data in the "GDP per capita" column. The code is as follows below and thanks so much in advance for any advice offered!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <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']}); </script> <script type="text/javascript"> function drawVisualization() { // Prepare the data var data = google.visualization.arrayToDataTable([ ['Country', 'Year', 'Military Spending', 'Military Spending per capita','GDP % spent on military', 'GDP per capita'], ['United States', '2011', 711.0, 2282, 4.7, 48442], ['United States', '2010', 698.3, 2257, 4.8, 46702], ['United States', '2009', 668.6, 2179, 4.8, 45192], ['United States', '2008', 621.1, 2042, 4.3, 46760], ['United States', '2007', 577, 1849, 4.0, 46349], ['China', '2011', 143, 143, 2.0, 5430], ['China', '2010', 121, 90, 2.1, 4433], ['China', '2009', 116.7, 88, 2.2, 3749], ['China', '2008', 96.7, 73, 2, 3414], ['China', '2007', 87.7, 67, 2.1, 2651], ['Russia', '2011', 71.9, 507, 3.9, 13089], ['Russia', '2010', 58.6, 413, 3.9, 10481], ['Russia', '2009', 59.6, 420, 4.3, 8616], ['Russia', '2008', 56.9, 401, 3.5, 11700], ['Russia', '2007', 51.3, 361, 3.5, 9146], ['United Kingdom', '2011', 62.7, 1001, 2.6, 38818], ['United Kingdom', '2010', 58, 932, 2.6, 36186], ['United Kingdom', '2009', 59.4, 961, 2.7, 35129], ['United Kingdom', '2008', 58.2, 948, 2.5, 42935], ['United Kingdom', '2007', 55.7, 913, 2.3, 46123], ['France', '2011', 62.5, 955, 2.3, 42377], ['France', '2010', 59, 907, 2.3, 39170], ['France', '2009', 64.7, 1000, 2.5, 40477], ['France', '2008', 60.7, 943, 2.3, 43992], ['France', '2007', 61.3, 958, 2.3, 40342], ['Japan', '2011', 59.3, 464, 1.0, 45903], ['Japan', '2010', 54.6, 428, 1, 43063], ['Japan', '2009', 54.3, 426, 1, 39473], ['Japan', '2008', 60.7, 943, 2.3, 43992], ['Japan', '2007', 53.9, 422, 0.9, 34095], ['Saudi Arabia', '2011', 48.5, 1720, 8.7, 20540], ['Saudi Arabia', '2010', 45.2, 1647, 10.1, 16423], ['Saudi Arabia', '2009', 43.5, 1623, 11, 14051], ['Saudi Arabia', '2008', 42.3, 1617, 8, 18203], ['Saudi Arabia', '2007', 43.1, 1690, 9.2, 15091], ['India', '2011', 46.8, 38, 2.5, 1489], ['India', '2010', 46, 38, 2.7, 1375], ['India', '2009', 45.9, 38, 2.9, 1127], ['India', '2008', 39, 33, 2.6, 1028], ['India', '2007', 34.4, 29, 2.3, 1055], ['Germany', '2011', 46.7, 571, 1.3, 43689], ['Germany', '2010', 45.1, 552, 1.4, 39852], ['Germany', '2009', 45.8, 559, 1.4, 40275], ['Germany', '2008', 44.1, 537, 1.3, 44132], ['Germany', '2007', 42.9, 521, 1.3, 40403], ['Brazil', '2011', 35.4, 180, 1.5, 12594], ['Brazil', '2010', 34.4, 176, 1.6, 10993], ['Brazil', '2009', 31.2, 161, 1.6, 8392], ['Brazil', '2008', 29.1, 152, 1.5, 8629], ['Brazil', '2007', 27.1, 143, 1.5, 7197], ]); // Define category pickers for 'Country' var CountryPicker = new google.visualization.ControlWrapper({ 'controlType': 'CategoryFilter', 'containerId': 'control1', 'options': { 'filterColumnLabel': 'Country', 'ui': { 'labelStacking': 'vertical', 'allowTyping': false, 'allowMultiple': true } } }); var YearPicker = new google.visualization.ControlWrapper({ 'controlType': 'CategoryFilter', 'containerId': 'control2', 'options': { 'filterColumnLabel': 'Year', 'ui': { 'labelStacking': 'vertical', 'allowTyping': false, 'allowMultiple': false } }, // Define an initial state, i.e. a set of metrics to be initially selected. 'state': {'selectedValues': ['2007']} }); // Define a chart to show 'Military' data var MilChart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'chart1', 'options': { 'title': 'Top Ten Military Spenders', vAxis: {title: 'Amount Spent (Billions)'}, hAxis: {title: 'Countries'}, 'width': 700, 'height': 600, 'chartArea': {top: 50, right: 0, bottom: 0}, 'is3D':'true' }, // Configure the barchart to use columns 0 (Country) and 2 (Military Spending) 'view': {'columns': [0, 2]} }); //Define a chart to compare Military spending per capita with GDP per capita var MyChart= new google.visualization.ChartWrapper({ 'chartType': 'GeoChart', 'containerID': 'chart2', 'options': { 'title': 'Military Spending per Capita vs. GDP per capita', 'view': {'columns': [0, 3, 5]} }, }); // Create the dashboard. var chart = new google.visualization.Dashboard(document.getElementById('dashboard')). bind([CountryPicker], [MilChart]). bind([CountryPicker], [MyChart]). bind([YearPicker], [MilChart]). bind([YearPicker], [MyChart]). // Draw the dashboard draw(data); } google.setOnLoadCallback(drawVisualization); </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="dashboard"> <table> <tr> <td style='width: 300px; font-size: 0.9em;'> <div id="control1"></div> <div id="control2"></div> </td> <td style='width: 1400px'> <div style="float: left;" id="chart1"></div> <div style="float: right;" id="chart2"></div> </td> </tr> </table> </div> </body> </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/-/D3kF12hdXBoJ. 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.
