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/-/tre3WuRBcl8J. 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.
