Running into a problem with GOOG spreadsheet integration

Craig Pearce

unread,

Aug 30, 2014, 12:02:33 AM8/30/14

to google-visua...@googlegroups.com

I'm just learning all this JS and google visualization stuff. I have the following code, I just want it to display a table of the data I have in my google spreadsheet. As you can see, I have used the code from the Google Viz articles. I am trying to display a table first, then build up to better visualizations.

I can't get any data to display. Thanks for any help you can provide.

<html>

<head>

google.load("visualization", '1.0', {packages:['table']});

google.setOnLoadCallback(initialize);

function initialize() {

var opts = {sendMethod: 'auto'};

// Replace the data source URL on next line with your data source URL.

var query = new google.visualization.Query('my google doc spreadsheet url');

// Send the query with a callback function.

query.send(handleQueryResponse);

}

function handleQueryResponse(response) {

if (response.isError()) {

alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());

return;

}}

//My JS console in Chrome returns an error here if I remove the } directly above. Error is "Uncaught TypeError: undefined is not a function" If I put the } in, no error, but still no data/table.

var data = response.getDataTable();

var table = new google.visualization.table(document.getElementById('table_div'));

table.draw (data, {showRowNumber: true});

}

</script>

</head>

<body>

</body>

</html>

Jon Orwant

unread,

Aug 30, 2014, 12:08:06 AM8/30/14

to google-visua...@googlegroups.com

JavaScript is case sensitive: you want to say "google.visualization.Table" to create a Table Chart.

Remove that extra curly brace: that was just hiding the real error ("undefined is not a function") that you wanted to see.

Jon

--
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 http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

Craig Pearce

unread,

Aug 30, 2014, 12:09:43 AM8/30/14

to google-visua...@googlegroups.com

Thanks Jon! That definitely worked! Very much appreciated.

Craig

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/Qd-G0UexLXc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

Dana Lemnaru

unread,

Dec 4, 2014, 9:37:49 AM12/4/14

to google-visua...@googlegroups.com

Hi Guys!

I seem to have the same problem creating my table. The column chart works perfect with the same query source, but i'm not getting anything when I try to create a table. I've followed the above instructions but no luck.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8'/>
<title>Google Visualization API Sample</title>

<script type="text/javascript"
    src='https://www.google.com/jsapi?autoload={
      "modules":[{
        "name":"visualization",
        "version":"1"
      }]
    }'></script>

<script type="text/javascript">
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
    // Define the chart using setters:
    var wrap = new google.visualization.ChartWrapper();
    wrap.setChartType('ColumnChart');
    wrap.setDataSourceUrl('https://docs.google.com/spreadsheets/d/1chYHl7BjSfYlNzL9W1KkCSk5OfL-Ver1UGHOWG3roS0/edit?range=A:L#gid=0');
    wrap.setContainerId('visualization');
    wrap.setQuery('SELECT A,avg(D),avg(C) GROUP BY A order BY avg(D) DESC limit 10');
    wrap.setOptions({'title':'Population Density (people/km^2)', 'legend':'true'});
    wrap.draw();
}
</script>

var opts = {sendMethod: 'auto'};

      var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1chYHl7BjSfYlNzL9W1KkCSk5OfL-Ver1UGHOWG3roS0/edit?range=A:L#gid=0');
      query.send(draw);
}
function draw (response) {
   if (response.isError()){
       alert('Error in Query');
       }
      var data = response.getDataTable();
      var table = new google.visualization.Table(document.getElementById('table_id'));
      table.draw(data,{showRowNumber: true});
}
</script>
</head>
<body>
    <div id='visualization' style='height: 600px; width: 1000px;'></div>
    <div id='table_id' style='height: 400px; width: 400px;'></div>
</body>
</html>

Thanks for helping,

Dana

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

Sergey Grabkovsky

unread,

Dec 4, 2014, 9:49:30 AM12/4/14

to google-visua...@googlegroups.com

Hi Dana,

The reason the ColumnChart works is that the ChartWrapper is always loaded by default, and the ChartWrapper knows how to load other packages, like the corechart package. However, you're trying to use the Table directly, rather than via a ChartWrapper. So you should either use the Table via a ChartWrapper, or load the table package, as in:

"version":"1",

"packages":["table"]
}]
}'></script>

And by the way, we strongly recommend against multiline src URLs, since not all browsers can handle them correctly.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

Reply all

Reply to author

Forward