acess and select data from G Spreadsheet

32 views
Skip to first unread message

mlarrieu

unread,
Sep 14, 2016, 1:12:48 PM9/14/16
to Google Visualization API
Hello,
I try to reproduce an example from the documentation of Google visu API which deal about getting the data from Spreadsheets, but I don't manage, can you help me finding the errors ?
the source of errors I can see are :
- the integration of the query part between the **function drawGID() {** to **chart.draw**
- the selection of a part from the spreadsheet with the query language (cf. **var queryString** )

the code is online : https://jsbin.com/xelitevuja/edit?html,output, or below
thx.



<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

    // Load the Visualization API and the corechart package. & set a callback to run when G API is loaded
    google.charts.load('current', {packages: ['corechart', 'bar']});
    google.charts.setOnLoadCallback(drawBasic);

    //call one vizu
    function drawBasic() {
     
      //get the data from a spreadsheet
      function drawGID() {
        var queryString = encodeURIComponent('SELECT A, D LIMIT 9 OFFSET 8'); // select range

        var query = new google.visualization.Query(
          'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?gid=0&headers=1&tq=' + queryString);
          query.send(handleQueryResponse);
      }

      //verify if error occurs
      function handleQueryResponse(response) {
        if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
        }

        var data = response.getDataTable(); // glue data

        var options = { // define vizu option
          chartArea: {width: '80%'},
          hAxis: {
            title: 'wheat flour (enriched)',
          },
          vAxis:{
            title: 'Constraint Name',
          }
        }
     
        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    }      
     
    </script>
 

  </head>
<body>
  <h1 style="text-align:center;margin-bottom:50px">from G spreasheet to G chart API test    </h1>
    <div id="chart_div"></div>
</body>
</html>






Reply all
Reply to author
Forward
0 new messages