JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?.js"></script>
<div id="table_div"></div>
JavaScript
function drawTable () {
// use jQuery to make an AJAX request for data
$.ajax({
url: 'http://finance.yahoo.com/webservice/v1/symbols/allcurrencies/quote?format=json',
dataType: 'jsonp',
success: function (json) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Symbol');
data.addColumn('number', 'Price');
data.addColumn('date', 'UTC Time');
// parse the JSON into the DataTable
for (var i = 0; i < json.list.resources.length; i++) {
var name = json.list.resources[i].resource.fields.name;
var symbol = json.list.resources[i].resource.fields.symbol;
var price = parseFloat(json.list.resources[i].resource.fields.price);
var dateTimeArr = json.list.resources[i].resource.fields.utctime.split('T');
var dateArr = dateTimeArr[0].split('-');
var year = dateArr[0];
var month = dateArr[1] - 1; // subtract 1 to make compatible with javascript dates
var day = dateArr[2];
var timeArr = dateTimeArr[1].split(/[:\+]/);
var hour = timeArr[0];
var minute = timeArr[1];
var second = timeArr[2];
data.addRow([name, symbol, price, new Date(year, month, day, hour, minute, second)]);
}
var table = new google.visualization.Table(document.querySelector('#table_div'));
table.draw(data);
}
});
}
google.load('visualization', '1', {packages:['table'], callback: drawTable});