[visualization-api] Cannot make the connection to Google Sheet

Arne Hulstein Fri, 23 Nov 2018 06:58:00 -0800

Hi all,

I have been looking at the dev pages to create a Google Chart from a Google 
Sheet file. Unfortunately, I cannot get it to work from the example. Even 
if I copy and paste that, I don't get a graph to show.


I have currently got a page which has the stacked column chart on it based 
on the script found on the site. You can see it at: 
www.businessfabriek.com/score.html

However, I would love to fill that from the sheet at: 
https://docs.google.com/spreadsheets/d/1EaxP8381YZOl9iXYSsa9UlJNEXeckXJevJb_Syy6xfA/edit?usp=sharing
 

Below is the code, which first has the stacked graph that I created 
manually. Then in the second part, I just copied and pasted the code from 
the Google Charts example page, which I cannot get to work.

All suggestions to get this to work are greatly appreciated!

<html>
  <head>
    <!--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 corechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
          var data = google.visualization.arrayToDataTable([
        ['Genre', 'Bonus', 'Organisatie', 'Lean Canvas', 'Visuele 
presentatie', 'Marktpotentieel',
         'Persbericht', 'Landingspagina', 'Product specificatie', 'Pitch 
video', 'Pitch', { role: 'annotation' } ],
        ['Team 1', 0, 10, 24, 20, 32, 18, 5, 18, 5, 10, ''],
        ['Team 2', 0, 16, 22, 23, 30, 16, 16, 9, 9, 10, ''],
        ['Team 3', 0, 16, 22, 23, 30, 16, 9, 16, 9, 10, ''],
        ['Team 4', 10, 16, 16, 9, 22, 23, 30, 16, 9, 10, ''],
        ['Team 5', 20, 16, 22, 23, 16, 9, 30, 16, 9, 10, ''],
        ['Team 6', 0, 16, 22, 23, 30, 16, 9, 16, 9, 10, ''],
        ['Team 7', 0, 28, 19, 29, 16, 9, 30, 12, 13, 10, '']
      ]);



        // Set chart options
      var options = {
        width: 1024,
        height: 768,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true,
      };

        // Instantiate and draw our chart, passing in some options.
        var chart = new 
google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
      <center></center>
      <img src="https://www.dockwize.nl/templates/elloro/img/logo.svg"; 
width="500">
      
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
    
<p>Laatste keer ververst: <span id="datetime"></span></p>

<h4>Trying from Google Sheets</h4>

<script>
var dt = new Date();
document.getElementById("datetime").innerHTML = 
(("0"+(dt.getMonth()+1)).slice(-2)) +"/"+ (("0"+dt.getDate()).slice(-2)) 
+"/"+ (dt.getFullYear()) +" "+ (("0"+dt.getHours()+1).slice(-2)) +":"+ 
(("0"+dt.getMinutes()+1).slice(-2));
</script>

</center>
<script>
    function drawGID() {
      var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 
OFFSET 8');

      var query = new google.visualization.Query(
          
'https://docs.google.com/spreadsheets/d/1EaxP8381YZOl9iXYSsa9UlJNEXeckXJevJb_Syy6xfA/edit?usp=sharing'
 
+ queryString);
      query.send(handleQueryResponse);
    }

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

      var data = response.getDataTable();
      var chart = new 
google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, { height: 400 });
    }
    </script>

<h4>End</h4>

  </body>
</html>


-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/498d186e-e997-4905-ae47-687b275b65ff%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[visualization-api] Cannot make the connection to Google Sheet

Reply via email to