How to get two different google charts on one page from two separate spreadsheet data sources

Question

I'm trying to get multiple chats on the same page, each one using a different spreadsheet url for its data source.

The code below works ok, but I really want to have multiple urls for different data ranges and show a different chart each time.

When I tried this originally, it only ever showed the last chart I tried to draw.

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:

How to add two Google charts on the one page?

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.

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.

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    (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 & 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......&transpose=0&headers=1&range=L1%3AN500&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
</script>

<!--Divs that will hold the charts - Only chart_div1 is in effect at the moment -->
<div id="chart_div1"></div>
<div id="chart_div2"></div>

Answer 1

You need two response handlers and two queries if you are querying two different data sources:

function drawChart() {
    var query1 = new google.visualization.Query(url1);
    query1.send(handleQueryResponse1);
    var query2 = new google.visualization.Query(url2);
    query2.send(handleQueryResponse2);
}