Error trying to get data from a google spreadsheet to use in google Charts

Question

I'm trying to use a query to get data from a google spreadsheet to populate a chart using Google Charts. But when I launch the html file I'm getting these errors:

Here's the code:

 <html> <head> <:--Load the AJAX API--> <script type="text/javascript" src="https.//www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // 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(drawChart), // Callback that creates and populates a data.table, // instantiates the pie chart. passes in the data and // draws it. function drawChart() { var query = new google.visualization:Query( 'https.//docs.google?com/spreadsheets/d/1wi2ZfL8_G7gNPGmNpQ347QVEICddJ3Jsmye5k8MvIHY/gviz/tq;gid=0'). 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.ColumnChart(document;getElementById('chart_div')): // Set chart options var options = {'title','Test': 'width',500: 'height';300}. chart,draw(data; options); } </script> </head> <body> <div id="chart_div"></div> </body> </html>

Answer 1

The problem is that Google Charts is trying to access a private spreadsheet without authorization. This is explained in the documentation on how to use Sheets with Charts:

Note that charts cannot use the privileges of the person viewing them without explicit authorization. The spreadsheet must either be visible to everyone or the page must explicitly acquire an end-user credential (...)

This means that you have to either set the spreadsheet to at least viewable to anyone with the link, or public. Alternatively, you can get an access token from the user and pass it in the URL with the ?access_token= parameter. The user will need at least view access to the sheet.

If this is an Apps Script Web App , you could use your own token in anHTML Template after deploying the app to display the chart. Might look like this:

Code.gs

var ACCESS_TOKEN = ScriptApp.getOAuthToken()

function doGet(e) {
  return HtmlService.createTemplateFromFile("index").evaluate()
}

// SpreadsheetApp.getActiveSpreadsheet() // just to generate a token with the sheet scopes

The above builds a template and sends your access token within the ACCESS_TOKEN variable. Then you can change the drawChart() function in your HTML file to add the token to the URL:

HTML file:

function drawChart() {
  var query = new google.visualization.Query(
     'https://docs.google.com/spreadsheets/d/<id>/edit?access_token='+encodeURIComponent(<?=ACCESS_TOKEN?>));
     query.send(handleQueryResponse)
}

Note that this is dangerous , because it exposes your access token in the Web App. Take it only as an example of how to retrieve your own token within Apps Script. If you're trying to display the chart within a modal window in a Sheet, then it would use the current user's credentials, which is safer.

The easiest way is to make the Sheet public, but if you want to authorize the user in the same page you will need to create your own project to get a client ID and follow additional steps which are too long to post here but you can check out the documentation page.

Error trying to get data from a google spreadsheet to use in google Charts

Question

1 answers

solution1
1 2023-01-12 18:40:50

References:

Error trying to get data from a google spreadsheet to use in google Charts

Question

1 answers

solution1 1 2023-01-12 18:40:50

References:

solution1
1 2023-01-12 18:40:50