Cannot make the connection to Google Sheet

61 views
Skip to first unread message

Arne Hulstein

unread,
Nov 23, 2018, 9:57:30 AM11/23/18
to Google Visualization API
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


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


Daniel LaLiberte

unread,
Nov 23, 2018, 11:50:15 AM11/23/18
to google-visua...@googlegroups.com
You need a unique container element, and you need to wait for the charts code to load.  Here is you code in a jsfiddle, fixed so it generates the two charts:  https://jsfiddle.net/dlaliberte/f9c4s7q6/4/

--
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-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@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.


--

Arne Hulstein

unread,
Nov 24, 2018, 4:20:33 AM11/24/18
to Google Visualization API
Thanks Daniel. That is a great help. I'll go over this and see how this works!


Arne Hulstein

unread,
Nov 25, 2018, 1:51:07 PM11/25/18
to Google Visualization API
Hi Daniel,

I have been playing with this, but the two graphs seem to be so integrated that I cannot show the one without the other. I wanted the top one to be a show piece to show what I wanted the result to look like. However, in the final HTML I do not want it to show. But even when I just remove the:


    <div id="chart_div"></div>

It removes both charts, not just the top one. Could you help me out to clean up the code so it only shows the bottom graph? 

Daniel LaLiberte

unread,
Nov 25, 2018, 3:53:41 PM11/25/18
to google-visua...@googlegroups.com
Just removing the div would mean the script to draw the first chart would fail, so that would interfere with drawing your second chart.

I modified the jsfiddle to just not draw the first chart:  https://jsfiddle.net/dlaliberte/f9c4s7q6/7/

--
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-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@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/4c67535c-a8f4-44b8-888a-0ce206fe3577%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Arne Hulstein

unread,
Nov 25, 2018, 6:13:01 PM11/25/18
to Google Visualization API
Thanks Daniel. That works great.

However, can you explain to me how the two interfere? Just so I understand the changes that you've made. I'm trying to learn here as much as trying to get it to just work. ;)

Daniel LaLiberte

unread,
Nov 25, 2018, 6:21:19 PM11/25/18
to google-visua...@googlegroups.com
If the JavaScript in a page fails, that kills JavaScript for the remainder of the document (or at least the remainder of the thread, if you are running in a setTimeout, for example).  So the interference between your two charts is that the second one could not get started because the first one failed, and the first one failed because you merely removed its HTML element.  I'm assuming that when you said you just removed the div for the first chart, that is all you did.

--
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-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@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/b2495c58-b621-45b5-aacf-ce6ba4c5797f%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Arne Hulstein

unread,
Nov 25, 2018, 6:24:01 PM11/25/18
to Google Visualization API
You are correct. I tried eliminating the whole drawing process for the first graph, but that broke it. Then I decided to try and remove just the div and that broke it as well.
At least now it does what I want it to do. ;)
Reply all
Reply to author
Forward
0 new messages