将数组从 javascript（Google Apps 脚本）添加到 html 文件

Question

I have an html file and a javascript file (Google Apps Script), and the html file renders a chart.
I want to add an array into that chart from the javascript file but it won't work (so trying this alternative idea).

Here is the html file:

<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);
  function drawChart() {

    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(

      //HERES WHERE I WANT TO ADD IN THE ARRAY THAT FUNCTIONS PROPERLY

    );
    chart.draw(dataTable);
  }
</script>

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

Here is my Code.gs:

function showDialog() {//This shows the modal which renders the chart

//Firstly replace the placeholder in the html with the below array somehow. Then...
    var html = HtmlService.createHtmlOutputFromFile('GraphD')
    .setWidth(800)
    .setHeight(700);
    SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
    .showModalDialog(html, 'My custom dialog');
}

This is the array I want to insert into the html file before rendering:

var MyArray = [[ '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', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)]];

So I want the above array inserted into the commented placeholder in the HTML before then rendering Any help would be great.

Answer 1

You are looking to pass an Array from Google Apps Script as the argument of DataTable method of Google Charts API on the client-side.

One way is to use google.script.run to exectute a server-side function to read/generate the data to be visualized on the chart and pass it to the client-side code, but this API cannot pass JavaScript Date objects, so instead of passing these type of objects we should pass some represention of them.

What if instead of passing a JavaScript Array containing Date objects we pass a JSON? The DataTable method could supports an Array but also a JSON.

Passing an JSON, allows us to instead of passing new Date(1789,3,30) to pass "Date(1789,3,30)" (drop new and enclose the remaining between quotes characters).

Example:

function showDialog() {
  SpreadsheetApp.getUi().showModalDialog(
    HtmlService.createHtmlOutputFromFile("index"), 
    "My dialog")
}

function doSomething(){
  var data = {
    cols:[
      { type: 'string', id: 'Position' },
      { type: 'string', id: 'Name' },
      { type: 'date', id: 'Start' },
      { type: 'date', id: 'End' }
    ],
    rows:[
      {c:[ {v:"President"}, {v:"George Washington"}, {v:"Date(1789, 3, 30)"}, {v:"Date(1797, 2, 4)"}]},
      {c:[ {v:"President"}, {v:"John Adams"}, {v:"Date(1797, 2, 4)"}, {v:"Date(1801, 2, 4)" }]},
      {c:[ {v:"President"}, {v:"Thomas Jefferson"}, {v:"Date(1801, 2, 4)"}, {v:"Date(1809, 2, 4)" }]},
      {c:[ {v:"Vice President"}, {v:"John Adams"}, {v:"Date(1789, 3, 21)"}, {v:"Date(1797, 2, 4)"}]},
      {c:[ {v:"Vice President"}, {v:"Thomas Jefferson"}, {v:"Date(1797, 2, 4)"}, {v:"Date(1801, 2, 4)"}]},
      {c:[ {v:"Vice President"}, {v:"George Clinton"}, {v:"Date(1805, 2, 4)"}, {v:"Date(1812, 3, 20)"}]}
    ]
  }
    return data;
}

index.html

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

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

<script>
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    google.script.run.withSuccessHandler(function(data){
      var container = document.getElementById('example3.1');
      var chart = new google.visualization.Timeline(container);
      var dataTable = new google.visualization.DataTable(data);
      chart.draw(dataTable);
   }).doSomething();
  }
</script>

Resources

• Date and times | Google Charts
• Format of the Constructor's JavaScript Literal data Parameter