CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
WEARETOKYO
WEARETOKYO

Reputation: 11

Google Visualization Multiple Query (Spreedsheet)

I have to show multiple chart on a HTML page, but i can't make multiple query (directly on a google spreedsheet).

Actually, I have just the first query who is display.

My code :

<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>

I think the problem was on these lines :

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

Upvotes: 0

Views: 783

Answers (1)

WEARETOKYO
WEARETOKYO

Reputation: 11

  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);
  }

Upvotes: 1

Related Questions