One other thing - you need to get rid of the trailing comma at the end of the dataTable (at the end of the Brazil, 2007 row). This comma will cause the page to bomb in IE.
On Sunday, September 9, 2012 10:28:22 PM UTC-4, asgallant wrote: > > There are a few things you need to fix: > > 1) the chart parameters are case-sensitive, so you need to change > "containerID" to "containerId" in MyChart > 2) the view parameter for MyChart is in the wrong place > 3) to see two data columns in a GeoChart, you need to use "markers" mode > > Here's a working version: http://jsfiddle.net/asgallant/gh4S6/1/ > > I also consolidated the dashboard bindings at the bottom for you; the way > you had it would work fine, this is just a bit cleaner. > > On Sunday, September 9, 2012 11:45:19 AM UTC-4, alexis85 wrote: >> >> 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/-/xo_zr0YGxhgJ. 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.
