CODEWITHSUNDEEP
javascriptgoogle-visualizationgoogle-query-language
Jonas
Jonas

Reputation: 1573

JavaScript Google Visualisation API Multiple Charts Data Displayed in Wrong Graph

So I'm building a rudimentary dashboard in HTML and using Google's visualisation API to do so. I need to create many graphs and the code below works well for that. Except for one problem: The data itself is seemingly randomly attributed to the graphs. Every time I reload the page the graphs have switched which data they display.

I have tried to solve this by creating a dataArray along with the other arrays, but that didn't solve the problem - there must be some way to attribute data directly to a chart in the query directly. Thanks!

<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">

  // Load the Visualization API and the piechart package.
  google.charts.load('current', {packages: ['corechart']});

  // Set a callback to run when the Google Visualization API is loaded
  google.charts.setOnLoadCallback(function() {
    drawChart('chart1', 0, 'SELECT A, B, C, D, E, G OFFSET 1', 'Sheet1',
      { title: 'Chart 1'}
    )

    drawChart('chart2', 1, 'SELECT A, I OFFSET 1', 'Sheet1',
      { title: 'Chart 2' }
    )
  });

  var chartsArray = [];
  var optionsArray = [];
  var nextID = 0;

  function drawChart(tag, id, sqlCommand, sheetName='Sheet1',  options= {}, numHeaders=1) {

    chartsArray[id] = new google.visualization.LineChart(document.getElementById(tag));

    optionsArray[id] = options;

    var queryString = encodeURIComponent(sqlCommand);

    var query = new google.visualization.Query(
       'https://docs.google.com/spreadsheets/d/1L8jhM7FHOg86hZMIJB2L_032-JbGKzX4ht6r3mxvP0gA/gviz/tq?sheet=' + sheetName + '&headers=' + numHeaders.toString() + '&tq=' + queryString);
      query.send(handleDataQueryResponse);
  }

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

    data = response.getDataTable();
    chartsArray[nextID].draw(data, optionsArray[nextID]);
    nextID += 1;
  }

<div id="chart1" class="chart"></div>
<div id="chart2" class="chart"></div>

UPDATE: I've solved the problem (for now, horrible solution) by calling setTimeout() and thereby forcing the calls to the visualization API to be executed in the order I want them to.

Upvotes: 1

Views: 96

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

the callback function, handleDataQueryResponse is called asynchronously, so you cannot guarantee one will finish before the other...

recommend something like this... 

function drawChart(tag, id, sqlCommand, sheetName='Sheet1',  options= {}, numHeaders=1) {

  chartsArray[id] = new google.visualization.LineChart(document.getElementById(tag));

  optionsArray[id] = options;

  var queryString = encodeURIComponent(sqlCommand);

  var query = new google.visualization.Query(
     'https://docs.google.com/spreadsheets/d/1L8jhM7FHOg86hZMIJB2L_032-JbGKzX4ht6r3mxvP0gA/gviz/tq?sheet=' + sheetName + '&headers=' + numHeaders.toString() + '&tq=' + queryString);
  query.send(function (response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }

    data = response.getDataTable();
    chartsArray[id].draw(data, optionsArray[id]);
  });
}

Upvotes: 1

Related Questions