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', 'y1');
data.addColumn('number', 'y2');
// add 50 rows of pseudo-random-walk data
var y1 = 40, y2 = 60;
for (var i = 0; i < 50; i++) {
y1 += ~~(Math.random() * 5) * Math.pow(-1, ~~(Math.random() * 2));
if (y1 > 100) {
y1 -= 5;
}
else if (y1 < 0) {
y1 += 5;
}
y2 += ~~(Math.random() * 5) * Math.pow(-1, ~~(Math.random() * 2));
if (y2 > 100) {
y2 -= 5;
}
else if (y2 < 0) {
y2 += 5;
}
data.addRow([i, y1, y2]);
}
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(data, {
height: 400,
width: 600,
series: {
0: {
// options for the first data series
color: 'red'
},
1: {
// options for the second data series
color: 'purple',
lineWidth: 0,
pointSize: 5
}
}
});
};
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});