Angular/JS - Dynamic content in a Google Area Chart

Question

I'm using Google Charts Area Chart for displaying temperatures and dates in a chart. The content I need to display is dynamic, and should be filled in on load. I'm using Angular with Sails.js, each temperature is stored in an object batchTemps, and the objects are stored in an object batchTempList which has an array; contents.

I need use the batchTempList.contents to populate the Area Chart, but can't figure out a working way.

Here is an example for static data to generate the chart:

data = google.visualization.arrayToDataTable([
      ['Time', 'Temp C°'],
      ['2017-05-31 13:44:54',  20.5],
      ['2017-05-31 13:54:54',  21.7],
      ['2017-05-31 14:04:54',  22.0],
      ['2017-05-31 14:14:54',  21.3]
    ]);

I want to retrieve the data from the list, and enter it like the static example above. The batchTemps objects have an ID, temperature, and createdAt (date of recording).

An example I tried, but without success:

data = google.visualization.arrayToDataTable([
      ['Time', 'Temp C°'],
      for (batchTemp in batchTempList.contents) {
                    ['batchTemp.createdAt', batchTemp.temperature],
                }
]);

JSFiddle with static solution: http://jsfiddle.net/qphnyash/

PS: In a previous version of my application, I used Sails.js with EJS, and used the following code for it to work:

var data = google.visualization.arrayToDataTable([
    ['Time', 'Temp C°'],
    <% _.each(brewery.temperatures, function(breweryTemp) { %>
    ['<%= breweryTemp.createdAt %>', <%= breweryTemp.temperature %>],
    <% }); %>
  ]);

but since I switched over to Angular, and currently use templates instead of the .ejs files, I can't use it.

Thanks in advance, any help will be greatly appreciated.

Angular/JS - Dynamic content in a Google Area Chart

1 Answers