title: How to get two different google charts on one page from two separate spreadsheet data sources
body: <p>I'm trying to get multiple chats on the same page, each one using a different spreadsheet url for its data source.</p>
  
  <p>The code below works ok, but I really want to have multiple urls for different data ranges and show a different chart each time. </p>
  
  <p>When I tried this originally, it only ever showed the last chart I tried to draw.</p>
  
  <p>I’ve reworked the script (which still works) to move closer to a situation where I’ve got multiple sets of data for the multiple charts and their locations. It’s not quite there though. This was based on the following post:</p>
  
  <p><a href="https://stackoverflow.com/questions/9888920/how-to-add-two-google-charts-on-the-one-page">How to add two Google charts on the one page?</a></p>
  
  <p>I think I need to pass the multiple sets of data as attributes of the handleQueryResponse function but I don’t know how to do that.</p>
  
  <p>I was trying to get it to work for just one set of data first, and if that works ok, add multiple sets of data into it.</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      (function() { // Begin scoping function
          // vars Global to my code, invisible outside the scoping function
          // Set chart options
          // I'll be using multiple options for different charts, options1, options2 etc.
          var options1 = {'title':'Light &amp; Temperature data - Last 24 Hours',
                        'width':750,
                        'height':400,
                        'curveType': 'function',
                        'backgroundColor':'ffe599',
                        "hAxes":[{"title":"Time"}],
                        "vAxes":[{"title":"Temp in °C -- Light Levels"}]};
  
          //I think I will need containerID1, containerID2 etc. one for each chart
          var containerID = 'chart_div1';
          //same for chartType1, chartType2
          var chartType = 'LINECHART';
  
      // Load the Visualization API and the core chart 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 chart, passes in the data and
      // draws it.
      function drawChart() {
  
          //I'm going to have multiple urls and each one will be the source for a seperate chart
          var query1 = new google.visualization.Query(
          'https://docs.google.com/spreadsheet/ccc?key=0ArGuv......&amp;transpose=0&amp;headers=1&amp;range=L1%3AN500&amp;gid=1');
          query1.send(handleQueryResponse);
      }
      // how do I get containerID1, containerID2, chartType1, ChartType2 Options1, Options2 etc. into this function?
      function handleQueryResponse(response) {
          if (response.isError()) {
  
              alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
              return;
          }
          var data = response.getDataTable();
          var containerDiv = document.getElementById(containerID);
          var chart = false;
  
          // Instantiate and draw the chart, based on some the chartType and passing in the options.
          if (chartType.toUpperCase() == 'BARCHART') {
              chart = new google.visualization.BarChart(containerDiv);
          }
          else if (chartType.toUpperCase() == 'COLUMNCHART') {
              chart = new google.visualization.ColumnChart(containerDiv);
          }
          else if (chartType.toUpperCase() == 'PIECHART') {
              chart = new google.visualization.PieChart(containerDiv);
          }
          else if (chartType.toUpperCase() == 'LINECHART'){
              chart = new google.visualization.LineChart(containerDiv);
          }
  
          if (chart == false) {
              return false;
          }
          chart.draw(data, options1);
      }
  })();         // End scoping function
  &lt;/script&gt;
  
  &lt;!--Divs that will hold the charts - Only chart_div1 is in effect at the moment --&gt;
  &lt;div id="chart_div1"&gt;&lt;/div&gt;
  &lt;div id="chart_div2"&gt;&lt;/div&gt;
  </code></pre>