JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
var chart;
var data;
var options;
var batchTempsData;
function drawChart() {
dataTable = 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]
]);
options = {
title: 'Temperature measurements',
hAxis: {title: 'Date/Time', titleTextStyle: {color: 'red'}}
};
chart = new google.visualization.AreaChart(document.getElementById('dayChart_div'));
chart.draw(dataTable, options);
}
// function to update the chart with new data.
function updateChart() {
dataTable = new google.visualization.DataTable();
var newData = [['Time', 'Temp C°'],
['2017-05-31 14:24:54', 19.5],
['2017-05-31 14:34:54', 18.7],
['2017-05-31 14:44:54', 18.3],
['2017-05-31 14:54:54', 17.9],
['2017-05-31 15:04:54', 18.9]];
// determine the number of rows and columns.
var numRows = newData.length;
var numCols = newData[0].length;
// in this case the first column is of type 'string'.
dataTable.addColumn('string', newData[0][0]);
// all other columns are of type 'number'.
for (var i = 1; i < numCols; i++)
dataTable.addColumn('number', newData[0][i]);
// now add the rows.
for (var i = 1; i < numRows; i++)
dataTable.addRow(newData[i]);
// redraw the chart.
...