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));
  });
}

Answer 1

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>