title: Google charts two bar charts on one page
body: <p>I need to create two bar charts on a single webpage. I've read through and tried the solutions in every related question on stackoverflow and I just can't work out why I can view one chart but not two with my current code. As far as I can see, my code is the same as some of the solutions. <strong>What do I need to change to create two bar charts on a single webpage?</strong></p>
  
  <p>This code, compiled from google and other online sources, creates one chart (file is saved as .html):</p>
  
  <pre><code>    &lt;!--Load the AJAX API--&gt;
  &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1.0', {'packages':['corechart']});
  
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);
  
    // Callback that creates and populates a data table,
    // instantiates the pie chart, passes in the data and
    // draws it.
    function drawChart() {
  
    // Create the data table.
       var data = google.visualization.arrayToDataTable([
      ['Item', 'Yes', { role: 'tooltip' } ,'No',  { role: 'tooltip' } ],
      ['Var A',   .5 , '', .5,  ''],
      ['Var B', .9, '', .1,  ''],
    ]);
  
    var options = {
      width: 250,
      height: 150,
      backgroundColor: '#FFFFF0',
      legend: { position: 'none'},
      hAxis:{ textPosition: 'none', gridlines: {color:'grey', count: 2}},
      bar: { groupWidth: '75%' },
      isStacked: true,
      colors: ['#FF6600', '#FFFFF0'],
    };
  
      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
      draw(chart);
      &lt;/script&gt;
    &lt;/head&gt;
  
  &lt;body&gt;
  &lt;!--Div that will hold the bar chart--&gt;
  &lt;div id="chart_div"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Based on my research, I believe the following code should create two charts, but a single chart appears. This is the code I need to change:</p>
  
  <pre><code>    &lt;!--Load the AJAX API--&gt;
  &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1.0', {'packages':['corechart']});
  
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);
  
    // Callback that creates and populates a data table,
    // instantiates the pie chart, passes in the data and
    // draws it.
    function drawChart() {
  
    // Create the data table.
       var data = google.visualization.arrayToDataTable([
          ['Item', 'Yes', { role: 'tooltip' } ,'No',  { role: 'tooltip' } ],
          ['Var A',   .5 , '', .5,  ''],
          ['Var B', .9, '', .1,  ''],
      ]);
       var data2 = google.visualization.arrayToDataTable([
          ['Item', 'Yes', { role: 'tooltip' } ,'No',  { role: 'tooltip' } ],
          ['Var A',   .2 , '', .8,  ''],
          ['Var B', .8, '', .2,  ''],
      ]);
  
       var options = {
         width: 250,
         height: 150,
         backgroundColor: '#FFFFF0',
         legend: { position: 'none'},
         hAxis:{ textPosition: 'none', gridlines: {color:'grey', count: 2}},
         bar: { groupWidth: '75%' },
         isStacked: true,
         colors: ['#FF6600', '#FFFFF0'],
       };
  
      // Instantiate and draw our chart, passing in some options.
       var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
       chart.draw(data, options);
       var chart2 = new google.visualization.BarChart(document.getElementById('chart_div2'));
       chart.draw(data2, options2);
    }
      draw(chart);
      draw(chart2);
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;!--Div that will hold the bar charts--&gt;
  &lt;div id="chart_div"&gt;&lt;/div&gt;
  &lt;div id="chart_div2"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>UPDATE:</strong> Here is the working code, debugged:</p>
  
  <pre><code>    &lt;!--Load the AJAX API--&gt;
  &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt; 
  
  // Load the Visualization API and the piechart package.
  google.load('visualization', '1.0', {'packages':['corechart']});
  
  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);
  
  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {
  
  // Create the data table.
  var data = google.visualization.arrayToDataTable([
      ['Item', 'Yes', { role: 'tooltip' } ,'No',  { role: 'tooltip' } ],
      ['Var A',   .5 , '', .5,  ''],
      ['Var B', .9, '', .1,  ''],
  ]);
  var data2 = google.visualization.arrayToDataTable([
      ['Item', 'Yes', { role: 'tooltip' } ,'No',  { role: 'tooltip' } ],
      ['Var A',   .2 , '', .8,  ''],
      ['Var B', .8, '', .2,  ''],
  ]);
  
  var options = {
      width: 250,
      height: 150,
      backgroundColor: '#FFFFF0',
      legend: { position: 'none'},
      hAxis:{ textPosition: 'none', gridlines: {color:'grey', count: 2}},
      bar: { groupWidth: '75%' },
      isStacked: true,
      colors: ['#FF6600', '#FFFFF0'],
   };
  
  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  chart.draw(data, options);
  var chart2 = new google.visualization.BarChart(document.getElementById('chart_div2'));
  chart.draw(data2, options2);
  }
  
  draw(chart);
  draw(chart2);
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;!--Div that will hold the bar charts--&gt;
  &lt;div id="chart_div"&gt;&lt;/div&gt;
  &lt;div id="chart_div2"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>