title: Multiple types of Google Charts on single page
body: <p>I am trying to get multiple types of Google Charts on one page. Pie graph and Calender chart. When I try to do this, I get the following error in place of the Pie Chart:</p>
  
  <pre><code>You called the draw() method with the wrong type of data rather than a DataTable or DataView
  </code></pre>
  
  <p>The error goes away if I only do one chart at a time. And it is always the cart on the top that shows the same error. The best I can tell its because teh data is of a different type.. So I figured it had something to do with interfering variables. I added a uniqe identifier to each chart's data and I still get the issue...</p>
  
  <p>Here is the HTML output of my PHP:</p>
  
  <pre><code>&lt;script type='text/javascript' src='https://www.google.com/jsapi'&gt;&lt;/script&gt;
  &lt;script type='text/javascript'&gt;
      google.load('visualization', '1', {
          packages : [ 'corechart' ]
      });
      google.setOnLoadCallback(drawChart_testGraph);
      function drawChart_testGraph() {
  
          var data_testGraph = google.visualization.arrayToDataTable([
                  [ 'Department', 'Count' ], [ 'Accounting', 1 ], [ 'Lobby', 1 ],
                  [ 'Customer Apps', 1 ], [ 'PC Support', 0 ],
                  [ 'Collections', 0 ], [ 'Inventory', 1 ], [ 'Billing', 0 ],
                  [ 'Executive', 4 ], [ 'Customer Service', 0 ],
                  [ 'Sales and Marketing', 0 ], [ 'Product and Development', 1 ],
                  [ 'Materials Management', 0 ], [ 'Remittance', 0 ],
                  [ 'Support Services', 0 ], [ 'Indirect Distribution', 1 ],
                  [ 'Provisioning Support', 1 ], ]);
  
          var options_testGraph = {
              title : 'Usage by department',
              backgroundColor : 'transparent',
              is3D : 'false',
          };
  
          var chart_testGraph = new google.visualization.PieChart(document
                  .getElementById('testGraph'));
  
          chart_testGraph.draw(data_testGraph, options_testGraph);
          console.log(data_testGraph);
      }
  &lt;/script&gt;
  &lt;div id='testGraph' style='width: 900px; height: 500px;'&gt;&lt;/div&gt;
  &lt;script type='text/javascript' src='https://www.google.com/jsapi'&gt;&lt;/script&gt;
  &lt;script type='text/javascript'&gt;
      google.load('visualization', '1.1', {
          packages : [ 'calendar' ]
      });
      google.setOnLoadCallback(drawChart_testGraph2);
      function drawChart_testGraph2() {
  
          var dataTable_testGraph2 = new google.visualization.DataTable();
          dataTable_testGraph2.addColumn({
              type : 'date',
              id : 'Department'
          });
          dataTable_testGraph2.addColumn({
              type : 'number',
              id : 'Count'
          });
          dataTable_testGraph2.addRows([ [ new Date('2014, 09, 18'), 1 ],
                  [ new Date('2014, 09, 17'), 1 ],
                  [ new Date('2014, 09, 15'), 6 ],
                  [ new Date('2014, 09, 13'), 1 ],
                  [ new Date('2014, 09, 12'), 2 ], ]);
  
          var options_testGraph2 = {
              title : 'Usage by department',
              backgroundColor : 'white',
              is3D : 'false',
          };
  
          var chart_testGraph2 = new google.visualization.Calendar(document
                  .getElementById('testGraph2'));
  
          chart_testGraph2.draw(dataTable_testGraph2, options_testGraph2);
  
      }
  &lt;/script&gt;
  &lt;div id='testGraph2' style='width: 900px; height: 500px;'&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any ideas?</p>