Call javascript function from html file in google apps script

Question

I have a project in Apps script that is trying to create a google chart to pop up in a modal above Google Sheets.
I have ChartC.html:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  google.script.run.drawChart(); //<-----This is where I want to call the function in Code.gs
</script>

<div id="example3.1" style="height: 400px;">GraphC</div>

and Code.gs:

function showDialog() { //This pops up the modal
    var html = HtmlService.createHtmlOutputFromFile('GraphC')
    .setWidth(800)
    .setHeight(700);
    SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
    .showModalDialog(html, 'My custom dialog');
}
       

function drawChart() { //This draws the chart
    var container = document.getElementById('example3.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Position' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
      [ 'Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)],
      [ 'Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)],
      [ 'Vice President', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)],
      [ 'Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)],
    ]);

    chart.draw(dataTable);
  }

Note that the Chart draws perfectly well in jsfiddle by itself OR if I replace the commented line in the html file with the 'drawChart' function and run it (instead of having that function in the .gs file itself).
But I want to call it from the .gs file because it's a pain to alter the html file from javascript. Is this possible?

Try calling calling drawChart() after dom has loaded. window.onload=function() — Cooper

Rubén Rubén · Accepted Answer · 2020-09-06T21:28:45

The drawChart requires the Google Charts JavaScript library which is being loaded on the client side code and it use the DOM which is not available on the server-side code. Considering this, the easier solution is to put the drawChart function on the client-side.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="example3.1" style="height: 400px;">GraphC</div>

<script>
  function drawChart() { //This draws the chart
    var container = document.getElementById('example3.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({
      type: 'string',
      id: 'Position'
    });
    dataTable.addColumn({
      type: 'string',
      id: 'Name'
    });
    dataTable.addColumn({
      type: 'date',
      id: 'Start'
    });
    dataTable.addColumn({
      type: 'date',
      id: 'End'
    });
    dataTable.addRows([
      ['President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4)],
      ['President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4)],
      ['President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4)],
      ['Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)],
      ['Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)],
      ['Vice President', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)],
      ['Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)],
    ]);

    chart.draw(dataTable);
  }

  google.charts.load("current", {
    packages: ["timeline"]
  });
  google.charts.setOnLoadCallback(drawChart);
</script>

Call javascript function from html file in google apps script

1 Answers