Issue drawing multiple charts ingested data from google sheets

82 views
Skip to first unread message

Mikkel_r

unread,
Nov 21, 2017, 11:20:56 AM11/21/17
to Google Visualization API
Hi,

I am having trouble drawing two charts on same page from two different sheets (both published). 

Only one is drawn and after a while i get the following message: "Error in query: Request timed out"

Here is my code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
  
    <link rel="stylesheet" href="css/style.css">
    
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    
    <!--eNPS-->
    <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(drawEnpsChart);

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawCnpsChart);
        
        
      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws eNPS
    function drawEnpsChart() {
      var queryString_enps = encodeURIComponent('select A,B');

      var query_enps = new google.visualization.Query( 'https://docs.google.com/spreadsheets/d/1Zga-AlllXXR4Q1W27GWliTS2QjtqDK-LibMNC5-ypnw/gviz/tq?sheet=Sheet1&headers=1&tq=' + queryString_enps);
      query_enps.send(handleSampleDataQueryResponse);
    
        //From share option in google sheet

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

      var data = response.getDataTable();
      var chart = new google.visualization.LineChart(document.getElementById('chart_div_enps'));
      chart.draw(data, { 
          height: 400,
          title: 'eNPS',
        animation:{
            startup: true,
            duration: 1000,
            easing: 'out',
        },
      });
    }
    }
        
      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws cNPS
    function drawCnpsChart() {
      var queryString_cnps = encodeURIComponent('select A,B');

      var query_cnps = new google.visualization.Query( 'https://docs.google.com/spreadsheets/d/1_e6188Wr3VOH261hFcbREh6uosXF6i35lfLxYvLR0vk/gviz/tq?sheet=Sheet1&headers=1&tq=' + queryString_cnps);
      query_cnps.send(handleSampleDataQueryResponse);
    
        //From share option in google sheet

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

      var data = response.getDataTable();
      var chart = new google.visualization.LineChart(document.getElementById('chart_div_cnps'));
      chart.draw(data, { 
          height: 400,
          title: 'cNPS',
        animation:{
            startup: true,
            duration: 1000,
            easing: 'out',
        },
      });
    }    
}
    </script>
    
    
</head>
  
    
<body>
    

      
      
<div>
    <!--Div with cNPS chart-->
    <div id="chart_div_enps"></div>
</div>

<div>
    <!--Div with cNPS chart-->
    <div id="chart_div_cnps"></div>
</div>

    
    
    </body>

Any suggestions to how i can draw both charts on the page?

/Mikkel

Ray Thomas

unread,
Nov 23, 2017, 12:51:53 PM11/23/17
to Google Visualization API
It is possible to draw multiple graphs on one page. After changing the eNPS graph to read from Sheet2, that displays properly, but like you I got the timeout error reading the second sheet. I can not access the spreadsheet for the cNPS data. Are the permissions for that sheet set properly?

Here's my code from what you supplied - http://brisray.com/test/mikkel.htm

Here's an example of drawing multiple charts on the same page (programmatically, using loops) - https://jsfiddle.net/brisray/z49jw264/781/

The printable graph image links seem to have stopped working, so that's something I need to look at for myself.

Ray
Reply all
Reply to author
Forward
0 new messages