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?

Answer 1

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>