Manav Nagla Manav Nagla - 1 month ago 21
JSON Question

External API data ---> HTML service output as charts / tables

update: Thanks Whithat, it worked half the way for me, but what I need is to represent a graph.

I'm getting the data out of array statically by this code in Index.html:



<? var data = getData(); ?>
<table>
<? for (var i = 0; i < data.length; i++) { ?>
<tr>
<? for (var j = 0; j < data[i].length; j++) { ?>
<td><?= data[i][j] ?></td>
<? } ?>
</tr>
<? } ?>
</table>





and here is the HTML output:

enter image description here

And what I need is a graph: (the values are in array I need a way to take values from array and display a dynamic visual):

enter image description here

I was successfully able to fetch and manipulate the data from API (JSON) to "code.gs". Now I'm looking to push/ pull the "code.gs" array data received from API (JSON) to HTML service charts and make a beautiful dashboards. (Everything is Web App)

Can someone help me out in getting the Dynamic array data from code.gs to HTML service charts.

Many forms I have been through talk about static data, where they declared a datatable with .addcolumn and.addrow.

Thanks in advance !

Answer

instead of writing to a <table>, you'll need to write data to javascript

something like this...

<script>
  google.charts.load('current', {
    callback: function () {
      var dataTable = new google.visualization.DataTable();
      dataTable.addColumn('string', 'Date');
      dataTable.addColumn('number', 'Count');

      <? var data = getData(); ?>
      <? for (var i = 0; i < data.length; i++) { ?>
        dataTable.addRow([
          "<?= data[i][0] ?>", <?= data[i][1] ?>
        ]);
      <? } ?>

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(dataTable);
    },
    packages: ['corechart']
  });
</script>

following is a full working example, to show what else is needed in html to display chart
basically, need google script

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

and a place holder for the chart

<div id="chart_div"></div>

(uses hard-coded data)

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('string', 'Date');
    dataTable.addColumn('number', 'Count');

    dataTable.addRow([
      "Thu Oct 13 2016 09:02:23 GMT-0500 (CDT)", 1
    ]);

    dataTable.addRow([
      "Fri Oct 14 2016 10:37:50 GMT-0500 (CDT)", 16
    ]);

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(dataTable);
  },
  packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Comments