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:
<script type="text/javascript"
src='https://www.google.com/jsapi?autoload={
"modules":[{
"name":"visualization",
"version":"1",
"packages":["table"]
}]
}'></script>
And by the way, we strongly recommend against multiline src URLs, since not
all browsers can handle them correctly.
On Thu Dec 04 2014 at 9:37:50 AM Dana Lemnaru <[email protected]> wrote:
> 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]>
>> 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].
>>>
>> 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.
>>>
>> --
> 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.
>
--
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.
