JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?.js"></script>
<div id="chart_div"></div>
JavaScript
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
// add 100 rows of pseudo-random-walk data
var val = 50;
for (var i = 0; i < 100; i++) {
val += ~~(Math.random() * 5) * Math.pow(-1, ~~(Math.random() * 2));
if (val < 0) {
val += 5;
}
if (val > 100) {
val -= 5;
}
data.addRow([i, val]);
}
var view = new google.visualization.DataView(data);
var rows = [0];
view.setRows(rows);
var options = {
height: 400,
width: 600,
vAxis: {
minValue: 0,
maxValue: 100
}
}
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(view, options);
var intervalId = setInterval(function () {
if (rows.length == data.getNumberOfRows()) {
clearInterval(intervalId);
}
else {
rows.push(rows.length);
view.setRows(rows);
chart.draw(view, options);
}
}, 1000);
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});