Re: Multiple charts using full dashboard issue

319 views
Skip to first unread message

asgallant

unread,
Sep 9, 2012, 10:28:22 PM9/9/12
to google-visua...@googlegroups.com
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">
  <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>​

asgallant

unread,
Sep 9, 2012, 10:36:41 PM9/9/12
to google-visua...@googlegroups.com
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.

alexis85

unread,
Sep 10, 2012, 7:09:08 PM9/10/12
to google-visua...@googlegroups.com


Thank you so much! I really appreciate your help!

asgallant

unread,
Sep 10, 2012, 7:16:54 PM9/10/12
to google-visua...@googlegroups.com
You're welcome.
Reply all
Reply to author
Forward
0 new messages