Javascript 谷歌可视化多重查询（Spreedsheet）_Javascript_Charts_Google Visualization

Javascript 谷歌可视化多重查询（Spreedsheet）

javascript charts google-visualization

Javascript 谷歌可视化多重查询（Spreedsheet）,javascript,charts,google-visualization,Javascript,Charts,Google Visualization,我必须在一个HTML页面上显示多个图表，但我不能进行多个查询（直接在google Speedsheet上）事实上，我只有第一个查询谁是display 我的代码： <html> <head> <meta charset="utf-8"> <title>Page de pilotage</title> <link rel=stylesheet type="text/css" href="style.css"> <scri

我必须在一个HTML页面上显示多个图表，但我不能进行多个查询（直接在google Speedsheet上）

事实上，我只有第一个查询谁是display

我的代码：

<html>
<head>
<meta charset="utf-8">
<title>Page de pilotage</title>
<link rel=stylesheet type="text/css" href="style.css">
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", '1', {packages:['corechart']});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/xxx/gviz/tq?sheet=visites');
    var query2 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/xxx/gviz/tq?sheet=transactions');
    query.send(handleQueryResponse);
    query2.send(handleQueryResponse);
  }

  function handleQueryResponse(response) {

  var options = {
  pointSize: 4,
  title: '',
  }

  var data = response.getDataTable();
  var chart = new google.visualization.LineChart(document.getElementById('visites'));
  var chart2 = new google.visualization.LineChart(document.getElementById('transactions'));
  chart.draw(data, options);
  chart2.draw(data, options);
  }
</script>
</head>

<body>
<h1>Page de pilotage - KPI/PROGRESSION</h1>
<p>Cette page WEB rassemble des informations générales pour aider au pilotage du site</p>

<h2>PROGRESSION</h2>

<div style="width:1200px;">

  <div style="width:599px; float:left;">
  <h3>NOMBRE DE VISITES</h3>
  <div id="visites" style="height: 280px; z-index: 1; margin-top: -25px; border-right:1px solid #ccc;"></div>
</div>

  <div style="width:599px; float:right;">
  <h3>NOMBRE DE TRANSACTIONS</h3>
  <div id="transactions" style="height: 280px; z-index: 1; margin-top: -25px;"></div>
  </div>

</div>

</body>
</html>

query.send(handleQueryResponse);
query2.send(handleQueryResponse);

  function drawChart() {
    var visites = new google.visualization.Query('https://docs.google.com/spreadsheets/d/xxx/gviz/tq?sheet=visites');
    var transactions = new google.visualization.Query('https://docs.google.com/spreadsheets/d/xxx/gviz/tq?sheet=transactions');
    visites.send(handleQueryResponse);
    transactions.send(handleQueryResponse2);
    conversion.send(handleQueryResponse3);
    rebond.send(handleQueryResponse4);
  }

  function handleQueryResponse(response) {

          var options = {
                  pointSize: 4,
                  title: '',
          }

          var data = response.getDataTable();
          var chart = new google.visualization.LineChart(document.getElementById('visites'));
          chart.draw(data, options);
  }

  function handleQueryResponse2(response) {

          var options = {
                  pointSize: 4,
                  title: '',
          }

          var data = response.getDataTable();
          var chart2 = new google.visualization.LineChart(document.getElementById('transactions'));
          chart2.draw(data, options);
  }