Hi, I am new to Google API's and I am having an issue inserting multiple google charts using the full dashboard. A piechart I inserted does work, however the geochart repeatedly fails to draw when opened in the browser. The message received in the browser is "one or more of the participants failed to draw." I am trying to have the geochart display the countries in my data array with the data in the "Military Spending per capita" column as well as the data in the "GDP per capita" column. The code is as follows below, and many thanks 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/-/Tz6P4NkOK6cJ. 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.
