Google Charts connection with Google Sheets

[Delsuc Evangelista]

Hi,

I created a spreadsheet in Google Sheets and shared it with everyone, however, I can't connect to it through Google Charts! Below the link: https://docs.google.com/spreadsheets/d/1td3qHfDgqf8E0pxu2QvmGdLBvCdBDkcU2BL5N4_IV1U/edit?usp=sharing I would appreciate some sample code with this link. Thanks

[Delsuc Evangelista]

Error:   Request timed out

[Ray Thomas]

Apart from the loader.js and a div to hold the chart, this will work:

<script type="text/javascript">
  google.charts.load('current');
  function drawVisualization() {
    google.visualization.drawChart({
      "containerId": "chart_div",
      "dataSourceUrl": "https://docs.google.com/spreadsheets/d/1td3qHfDgqf8E0pxu2QvmGdLBvCdBDkcU2BL5N4_IV1U/gviz/tq?gid=0&headers=1",
      "query":"SELECT A,B",
      "chartType": "ColumnChart",
   });
 }
google.charts.setOnLoadCallback(drawVisualization);
</script>

Are you testing the code from a local file on your computer? That will give you a "Request timed out" timed out message and that's due to your browser's CORS (Cross-Origin Resource Sharing) policy. For most browsers you can see what is going on by going onto developer mode by pressing F12 or Ctrl + Shift + i or Ctrl + shift + j.

In Chrome you will see a message similar to this 

Access to XMLHttpRequest at 'https://docs.google.com/spreadsheets/d/1td3qHfDgqf8E0pxu2QvmGdLBvCdBDkcU2BL5N4_IV1U/gviz/tq?gid=0&headers=1&tq=SELECT%20A%2CB&tqx=reqId%3A0' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Your HTML file will need to be uploaded to a web server to work.

I use Dreamweaver and the preview in that shows this, so everything else looks fine.

THE API has some help for using Google Sheets as a data source at https://developers.google.com/chart/interactive/docs/spreadsheets and more help on the query language at https://developers.google.com/chart/interactive/docs/querylanguage