3

The provided solution worked half the way for me, but what I need is to represent the data in 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)

How can I get the Dynamic array data from code.gs to HTML service charts?

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

Mogsdad
  • 44,709
  • 21
  • 151
  • 275
Manav Nagla
  • 33
  • 5
  • check [this answer](http://stackoverflow.com/a/29849783/5090771)... – WhiteHat Oct 14 '16 at 12:53
  • Thanks, it worked 50% where I was able to print the data in HTML File. But I need to process the data in Visualization to display them as charts. Can you please help me here. – Manav Nagla Oct 14 '16 at 13:44
  • probably, if you could edit post, would need to see what the data looks like, once it gets to html... – WhiteHat Oct 14 '16 at 13:46
  • I have updated the post, can you please look at screenshots – Manav Nagla Oct 14 '16 at 13:57
  • I get "undefined" when I try to load in – Manav Nagla Oct 14 '16 at 15:13
  • ex: function gtab() { var gdata = google.script.run.withSuccessHandler().getData(); var outp = document.getElementById('output'); outp.innerHTML = gdata; //google.charts.setOnLoadCallback(drawTable); //drawTable(); } – Manav Nagla Oct 14 '16 at 15:13
  • The same I get the output when I call in HTML using ... ?> tags var data = getData(); ?> for (var i = 0; i < data.length; i++) { ?> for (var j = 0; j < data[i].length; j++) { ?> } ?> } ?>
    = data[i][j] ?>
     – Manav Nagla Oct 14 '16 at 15:14

1 Answers1

0

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>
WhiteHat
  • 59,912
  • 7
  • 51
  • 133
  • getting closer, full disclosure -- never used apps script (`code.gs`) -- but maybe [this question](http://stackoverflow.com/q/34094150/5090771) shows a better way to get data to javascript... – WhiteHat Oct 14 '16 at 14:42
  • if you could format the data as json, in the [format google accepts](https://developers.google.com/chart/interactive/docs/reference#dataparam), then no data manipulation would be required in javascript... – WhiteHat Oct 14 '16 at 14:44