JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?ext.js"></script>
<div class="spacer"></div>
<div id="chart"></div>
<div class="spacer"></div>
CSS
.spacer {
width: 400px;
height: 3000px;
}
#chart {
width: 400px;
height: 400px;
}
JavaScript
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(5);
data.setValue(0, 0, 'Work');
data.setValue(0, 1, Math.round(Math.random()*100));
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, Math.round(Math.random()*100));
data.setValue(2, 0, 'Commute');
data.setValue(2, 1, Math.round(Math.random()*100));
data.setValue(3, 0, 'Watch TV');
data.setValue(3, 1, Math.round(Math.random()*100));
data.setValue(4, 0, 'Sleep');
data.setValue(4, 1, Math.round(Math.random()*100));
// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('chart')).
draw(data, {title:"So, how was your day?"});
window.setTimeout(function() {
xhr = new XMLHttpRequest();
xhr.open('GET', '/echo/json', /* async */ true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
drawVisualization();
}
}
xhr.send(null);
}, 5000);
}
google.load('visualization', '1.0', {packages: ['corechart']});
google.setOnLoadCallback(drawVisualization);