Thanks for the help Ray. Solved my issues indeed.
On Saturday, May 14, 2022 at 10:49:46 PM UTC+2 Ray Thomas wrote:
> Hello Yves,
>
> You have a couple of problems with this. The first is that the corechart
> package does not include the code to produce tables. You need to change
>
> google.charts.load('current', {'packages':['corechart']});
>
> to
>
> google.charts.load('current', {'packages':['table']});
>
> See
> https://developers.google.com/chart/interactive/docs/gallery/table#loading
> for why.
>
> The other problem is because you are running this locally and you are
> encountering something called CORS. This is a very common mistake and see
> my answer at
> https://groups.google.com/u/2/g/google-visualization-api/c/Edh8HN3e-C0 as
> to what is happening and how to work around it while testing.
>
> I use the GID version of the code you used rather than SHEETS, I just find
> it easier, and the code below works...
>
> <script src="https://www.gstatic.com/charts/loader.js";></script>
>
> <script>
> google.charts.load('current', {'packages':['table']});
> google.charts.setOnLoadCallback(drawGID);
>
> function drawGID() {
> var queryString = encodeURIComponent('SELECT A, B,C, D, E');
>
> var query = new google.visualization.Query(
> '
> https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/gviz/tq?gid=0&headers=1&tq='
>
> + 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.Table(document.getElementById('chart_div'));
> chart.draw(data);
> }
> </script>
>
> <div id="chart_div"></div>
>
> And this is what it produces...
>
> [image: yves.jpg]
>
> On Friday, May 13, 2022 at 8:34:42 AM UTC-4 [email protected] wrote:
>
>> Hi all, I'm pretty new to the integration of Chart and have been
>> struggling to get my chart use an existing, publicly available Google
>> sheet, as datasource. I've followed the instruction on
>> https://developers.google.com/chart/interactive/docs/spreadsheets and my
>> code looks like this
>> // 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(drawGID);
>> function drawGID() {
>> var query = new google.visualization.Query(
>> '
>> https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/gviz/tq?sheet=Sheet1&headers=1&tq=SELECT%20A'
>> );
>> query.send(handleQueryResponse);
>> }
>>
>> function handleQueryResponse(response) {
>> if (response.isError()) {
>> alert('Error in query: ' + response.getMessage() + ' ' +
>> response.getDetailedMessage());
>> return;
>> }
>>
>> var data = response.getDataTable();
>> ...
>> running this, embedded in an html, in the browser gives me a 'timeout'
>> message after 30 seconds, without further details. When I copy the URL
>> directy in the browser address bar I get the desired JSON response. Any
>> help or clarification would be highly appreciated. Regards.
>> Yves
>>
>
--
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 view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/156e4148-0ec0-4730-b069-885ff9d3c27an%40googlegroups.com.
