Google sheets 向同一个Google工作表进行2次查询以提供Google图表_Google Sheets_Google Visualization

Google sheets 向同一个Google工作表进行2次查询以提供Google图表

google-sheets google-visualization

Google sheets 向同一个Google工作表进行2次查询以提供Google图表,google-sheets,google-visualization,Google Sheets,Google Visualization,我想有2个不同的查询，以获得不同的数据，饲料到谷歌图表2个不同的图表我尝试了以下方法，但它适用于Columnchart_div，但不适用于Columnchart_div1，这是第二个图表，我想用从G到J列的数据提供它多谢各位 <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text

我想有2个不同的查询，以获得不同的数据，饲料到谷歌图表2个不同的图表

我尝试了以下方法，但它适用于Columnchart_div，但不适用于Columnchart_div1，这是第二个图表，我想用从G到J列的数据提供它

多谢各位

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawSheetName);

function drawSheetName() {
var queryString = encodeURIComponent('SELECT A, B, C, D');
var magicIncantation = '/gviz/tq?gid=0&headers=1&tq=';

var query = new google.visualization.Query('http://docs.google.com/spreadsheets/d/1xfb9trifQA5KDPc9Nh5hBL4MJ290Mxcc1Uod2VTPzYI' +
    magicIncantation + queryString);
query.send(handleSampleDataQueryResponse);


var queryString1 = encodeURIComponent('SELECT G, H, I, J');
var magicIncantation = '/gviz/tq?gid=0&headers=1&tq=';

var query1 = new  google.visualization.Query('http://docs.google.com/spreadsheets/d/1xfb9trifQA5KDPc9Nh5hBL4MJ290Mxcc1Uod2VTPzYI' +
    magicIncantation + queryString1);
query1.send(handleSampleDataQueryResponse1);

}



function handleSampleDataQueryResponse1(response) {
if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
}


   var optionsColumnChart1 = {
      height: 400,
      title: 'This is the title On Column Chart',
    };

var data1 = response.getDataTable();

var chart1 = new google.visualization.ColumnChart(document.getElementById('Columnchart1_div'));
chart1.draw(data1, optionsColumnChart1);

}

function handleSampleDataQueryResponse(response) {
if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
}


   var optionsColumnChart = {
      height: 400,
      title: 'This is the title On Column Chart',
    };

var data = response.getDataTable();


var chart = new google.visualization.ColumnChart(document.getElementById('Columnchart_div'));
chart.draw(data, optionsColumnChart);

}
</script>

</head>
<body>

    <div id="Columnchart_div1" style="width: 100%;"></div>
    <div id="Columnchart_div" style="width: 100%;"></div>


</div> 
</body> 
</html>

你必须调用你的数据两次。试试这个

 <html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawSheetName);

function drawSheetName() {
var queryString = encodeURIComponent('SELECT A, B, C, D');
var magicIncantation = '/gviz/tq?gid=0&headers=1&tq=';

var query = new google.visualization.Query('http://docs.google.com/spreadsheets/d/1xfb9trifQA5KDPc9Nh5hBL4MJ290Mxcc1Uod2VTPzYI' +
    magicIncantation + queryString);
query.send(handleSampleDataQueryResponse);


}


function handleSampleDataQueryResponse(response) {
if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
}


var data = response.getDataTable();


   var optionsColumnChart = {
   width: 1200,
      height: 400,
      title: 'OVERALL RATES AND VOLUMES',
       legend: { position: 'top'},
        bar: { groupWidth: '75%' },
        is3D: true,
        'hAxis': {


            gridlines: {
                count: 31
            }
        },
        isStacked: true
    };
var chart = new google.visualization.ColumnChart(document.getElementById('Columnchart_div'));
chart.draw(data, optionsColumnChart);

}

google.setOnLoadCallback(drawSheetName1);

function drawSheetName1() {
var queryString1 = encodeURIComponent('SELECT A, B, C, D');
var magicIncantation1 = '/gviz/tq?gid=0&headers=1&tq=';

var query1 = new google.visualization.Query('http://docs.google.com/spreadsheets/d/1xfb9trifQA5KDPc9Nh5hBL4MJ290Mxcc1Uod2VTPzYI' +
    magicIncantation1 + queryString1);
query1.send(handleSampleDataQueryResponse1);


}


function handleSampleDataQueryResponse1(response1) {
if (response1.isError()) {
    alert('Error in query: ' + response1.getMessage() + ' ' + response1.getDetailedMessage());
    return;
}


var data1 = response1.getDataTable();


   var optionsColumnChart1 = {
   width: 1200,
      height: 400,
      title: 'OVERALL RATES AND VOLUMES',
       legend: { position: 'top'},
        bar: { groupWidth: '75%' },
        is3D: true,
        'hAxis': {


            gridlines: {
                count: 31
            }
        },
        isStacked: true
    };
var chart1 = new google.visualization.ColumnChart(document.getElementById('Columnchart1_div'));
chart1.draw(data1, optionsColumnChart1);

}

</script>

</head>
<body>

    <div id="Columnchart_div" style=""width: 50%;"></div>
<div id="Columnchart1_div" style=""width: 50%;"></div>
</div> 
</body> 
</html>