title: How to add two Google charts on the one page?
body: <h1>What I've done</h1>
  
  <p>I've added Google chart to the head of my page. This returns an image of a chart.</p>
  
  <h1>What I need to do</h1>
  
  <p>I simply need to add a second chart to the same page.</p>
  
  <h1>The problem</h1>
  
  <p>The code for the second chart is ignored. I largely suspect this is due to me incorrectly combining the code for each chart.</p>
  
  <h1>The code</h1>
  
  <p><strong>First chart (line):</strong></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() {
  
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Month');
      data.addColumn('number', 'Apples');
      data.addColumn('number', 'Oranges');
      data.addRows([
        ['Oct 11', 20, 0],
        ['Nov 11', 0, 0],
        ['Dec 12',  0, 20],
        ['Jan 12', 0, 10],
        ['Feb 12', 0, 10],
        ['March 12', 10, 10]
      ]);
  
      // Set chart options
      var options = {'width':960,
                     'height':300};
  
      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
      chart.draw(data, options);
    }
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Second chart (pie):</strong></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 = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]
      ]);
  
      // Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',
                     'width':400,
                     'height':300};
  
      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>Each of the charts are called in the body using a container div with a unique id:</p>
  
  <pre><code>&lt;div id="chart_div"&gt;&lt;/div&gt;
  </code></pre>
  
  <h1>My question</h1>
  
  <p>How do I stitch these two blocks of code together? I've tried copying drawChart() and specifying unique function names and variables but to no avail.</p>