JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?.js"></script>
<div id="schedule"></div>
JavaScript
function drawChart() {
// Set Data Source
var query = new google.visualization.Query('https://docs.google.com/a/redvespa.com/spreadsheet/tq?key=0Aq4kEViSS7iEdGk1QjdIYmFxSlBDbzg4aHFJM0pzM3c&usp=drive_web#gid=0');
// Set Query for Data Source
query.setQuery('SELECT B,C,D,E WHERE D is not null AND E is not null and D != "" AND E != ""');
// Send the query with callback function
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
// Handle Query errors
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
// Draw Chart
var data = response.getDataTable();
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
type: 'date',
label: data.getColumnLabel(2),
calc: function (dt, row) {
var date = dt.getValue(row, 2);
if (date == '' || date == null) {
return null;
}
else {
var dateArr = date.split('/');
var day = dateArr[0];
var month = dateArr[1] - 1; // convert to javascript's 0-indexed months
var year = dateArr[2];
return new Date(year, month, day);
}
}
}, {
type: 'date',
label: data.getColumnLabel(3),
calc: function (dt, row) {
var date = dt.getValue(row, 3);
if (date == '' || date == null) {
return null;
}
else {
var dateArr = date.split('/');
var day = dateArr[0];
var month = dateArr[1] - 1; // convert to javascript's 0-indexed months
var year = dateArr[2];
return new Date(year, month, day);
}
}
}]);
var container = document.getElementById('schedule');
var chart = new...