title: Multiple Google Charts
body: <p>I am attempting to create multiple Google Charts, but I can't get it to work. I've tried everything I could find on Stack Overflow. I most recently attempted <a href="https://stackoverflow.com/questions/9888920/how-to-add-two-google-charts-on-the-one-page">this</a> fix, but it didn't work. I think I may be missing something. Can anyone see anything wrong with the code as it stands now?</p>
  
  <p><strong>Expected Behavior:</strong></p>
  
  <p><em>Page displays bar graph. Then, a line graph is displayed underneath the bar graph.</em></p>
  
  <p><strong>Current Behavior:</strong></p>
  
  <p><em>Page displays bar graph. Line graph does not display.</em></p>
  
  <p>Here is <a href="https://jsfiddle.net/db9ekod9/2/" rel="nofollow noreferrer">JSFiddle</a>. On a side note, the JavaScript only seems to work inline on JSFiddle. If I moved it into the JavaScript section, it did not function properly. Maybe this has something to do with the external resource that was called?</p>
  
  <p>Regardless, I am currently doing this all inline for this experiment.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script src="https://www.google.com/jsapi" type="text/javascript"&gt;
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      // Load the Visualization API and the chart packages.
      google.load('visualization', '1.1', {
          packages: ['line', 'bar', '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 charts, passes in the data and
      // draws them.
      function drawChart() {
          // Create the data table.
          var BarData = new google.visualization.arrayToDataTable([
              ['', 'Customer', 'Segment Avg'],
              ['TTM Sales', 4, 2],
              ['TTM Orders', 5, 3],
              ['TTM Categories', 7, 4]
          ]);
          // Create the data table.
          var LineData = new google.visualization.arrayToDataTable([
              ['Year', 'Customer', 'Segment Avg'],
              ['2011', 4, 5],
              ['2012', 5, 3],
              ['2013', 4, 2]
          ]);
          // Set chart options
          var BarOptions = {
              chart: {
                  title: 'Performance',
              },
              width: 900,
              height: 500
          };
          // Set chart options
          var LineOptions = {
              chart: {
                  title: 'Sales History'
              },
              width: 900,
              height: 500
          };
          // Instantiate and draw our chart, passing in some options.
          var BarChart = new google.charts.Bar(document.getElementById(
              'bar_chart'));
          BarChart.draw(BarData, BarOptions);
          var LineChart = new google.charts.Line(document.getElementById(
              'line_chart'));
          LineChart.draw(LineData, LineOptions);
      };
      &lt;/script&gt;
      &lt;title&gt;Test Chart Page&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!--Divs that will hold the charts--&gt;
      &lt;div id="bar_chart"&gt;&lt;/div&gt;
      &lt;div id="line_chart"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>