Google App Script code to create a pie chart from spreadsheet data not showing up-CodePudding

It is just a simple script project that is supposed to create a pie chart from the data in a spreadsheet. I had it working when I built the DataTable within the HTML file, but I tried to adjust it with a query in order to pull the data from a spreadsheet and make the dashboard dynamic with changes to the spreadsheet.

Whenever I deploy it however, it just shows up as a blank screen. Any help/thoughts is appreciated! I will get it eventually...

HTML File Code:

<html>
  <head>
    <!--Load the AJAX API-->
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
      google.charts.load('current', {packages: ['corechart']});
      google.charts.setOnLoadCallback(drawChart);

    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('https://docs.google.com/spreadsheets/d/1BiNoiV10xrAU8PwdJfgldneLwFuCnY5GhQRDEIzftd8/edit#gid=0', opts);
    }

      // Send the query with a callback function.
    function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: '   response.getMessage()   ' '   response.getDetailedMessage());
        return;
      }
      var data = response.getDataTable();
      
      // Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',
        'width':400,
        'height':300};
      
      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        google.visualization.events.addListener(chart, 'select', selectHandler);
        chart.draw(data, options);
    }

      //enter alert on user screen when clicking on section of chart
      function selectHandler() {
        var selectedItem = chart.getSelection()[0];
        var value = data.getValue(selectedItem.row, 0);
        alert('The user selected '   value);
      }

    </script>
  </head>
  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

JS File Code:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('webappchartv2');
}

CodePudding user response：

Missing query.send(handleQueryResponse);
setOnLoadCallback is not set properly

      google.charts.load('current', {packages: ['corechart']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var opts = {sendMethod: 'auto'};
      // Replace the data source URL on next line with your data source URL.
      var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1BiNoiV10xrAU8PwdJfgldneLwFuCnY5GhQRDEIzftd8/edit#gid=0', opts);
      query.send(handleQueryResponse);
    }
...