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>
<!-- One script tag loads all the required libraries! Do not specify any
chart types in
the autoload statement.
-->
<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>
<script type="text/javascript">
google.setOnLoadCallback(initialize);
function initialize() {
// Define the chart using setters:
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
On Saturday, August 30, 2014 7:08:06 AM UTC+3, [email protected] wrote:
> 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
>
>
> On Sat, Aug 30, 2014 at 12:02 AM, Craig Pearce <[email protected]
> <javascript:>> wrote:
>
>> 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>
>> <script type="text/javascript" src="https://www.google.com/jsapi
>> "></script>
>> <script type="text/javascript">
>> 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>
>> <!--Div that will hold the pie chart-->
>> <div id="table_div"></div>
>> </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 [email protected]
>> <javascript:>.
>> To post to this group, send email to [email protected]
>> <javascript:>.
>> Visit this group at
>> http://groups.google.com/group/google-visualization-api.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>
--
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
