google not defined in google script - Error

Question

I get the error "google is not defined", from my google script that creates a table using google.visualization.

How do you add a reference to a google script, and if I get it to run in scripts will I also have to add it to my google site? I'll put my script below.

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

  function doGet() {

    drawTable()

  }
function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time');
  data.addRows(1);
  data.setCell(0, 0, 'John');
  data.setCell(0, 1, 10000, '$10,000');
  data.setCell(0, 2, true);

  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(data, {showRowNumber: true});

  google.visualization.events.addListener(table, 'select', function() {
    var row = table.getSelection()[0].row;
    alert('You selected ' + data.getValue(row, 0));
  });
}

Alan Wells · Accepted Answer · 2019-02-04T19:47:21.730

Apps Script uses JavaScript as it's server side code. Originally, JavaScript was designed as a language to run in the browser (on the users computer). JavaScript in an HTML file, won't run the JavaScript on Google's servers.

In the script editor, you can create two types of files:

Script
HTML

doGet() can only be used in a .gs script file. You can't use it in HTML JavaScript.

Your Code.gs file should have some code that looks like this:

Code.gs

function doGet() {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .setSandboxMode(HtmlService.SandboxMode.NATIVE);
};

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
};

Then you need an HTML file.

index.html

<div id="EntireSite">

  <div>
      body
    <?!= include('Chart'); ?>
    <br><br><br><br><br><br><br><br><br><br><br>
  </div>

  <div>
    My Footer
  </div>

  <div style="background: brown">
    <br>
    <br>
    <br>
    <br>
  </div>

</div>

In this example, you need a second HTML file for the chart:

Chart.html

<script type="text/javascript">
    google.load("visualization", '1', {packages:['corechart']});
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = google.visualization.arrayToDataTable([
        ['Element', 'Density', { role: 'style' }],
        ['Copper', 8.94, '#b87333', ],
        ['Silver', 10.49, 'silver'],
        ['Gold', 19.30, 'gold'],
        ['Platinum', 21.45, 'color: #e5e4e2' ]
      ]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        bar: {groupWidth: '95%'},
        legend: 'none',
      };

      var chart_div = document.getElementById('chart_div');
      var chart = new google.visualization.ColumnChart(chart_div);

      chart.draw(data, options);
  }
</script>

<div id='chart_div'></div>

This answer explains the user errors better than the other one. — Zig Mandel, Apr 04 '15 at 14:16
@Sandy Good - Thank you again Sandy, this is perfect. The part I was missing is that in the google script project itself you can have html files. I hope I don't have to post much more as once I get going there is lots of documentation. — Luk6e, Apr 04 '15 at 19:44

score 1 · Answer 2 · answered Apr 04 '15 at 02:18

Firstly, it seems that you are missing <script> tags around the JavaScript functions that follow the reference to the google.com/jsapi.

Also you need to call the following function to load the appropriate "package".

google.load('visualization', '1.0', {'packages':['table']});

And this function to call drawTable()

google.setOnLoadCallback(drawTable);

Assuming that you are embedding the script within a HTML page, the complete page would look something like:

<html>
<head>        
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">                
        // Load the Visualization API and the table package.
        google.load('visualization', '1.0', {'packages':['table']});

        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawTable);

        function drawTable() {
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Name');
          data.addColumn('number', 'Salary');
          data.addColumn('boolean', 'Full Time');
          data.addRows(1);
          data.setCell(0, 0, 'John');
          data.setCell(0, 1, 10000, '$10,000');
          data.setCell(0, 2, true);

          var table = new google.visualization.Table(document.getElementById('table_div'));
          table.draw(data, {showRowNumber: true});

          google.visualization.events.addListener(table, 'select', function() {
            var row = table.getSelection()[0].row;
            alert('You selected ' + data.getValue(row, 0));
          });
        }
    </script>
</head>

<body>        
        <div id="table_div"></div>           
</body>
</html>

My answer is based on documentation found here: https://developers.google.com/chart/interactive/docs/gallery/table

Thanks for the response. Although the Sandy's answer worked for me, its important to point out the loading of the package that your using, as you stated in your example. Thanks for the help — Luk6e, Apr 04 '15 at 19:47

google not defined in google script - Error

2 Answers2

Code.gs

index.html

Chart.html