JSFiddle - React, Tailwind, and code Playground

by Daniel Buttery

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['timeline']}]}"></script>

<div id="JobTimeline"></div>

JavaScript

google.setOnLoadCallback(drawChart);
function drawChart() {

var container = document.getElementById('JobTimeline');
var chart = new google.visualization.Timeline(container);


var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Position' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
  
[ 'Ordina', 'Ordina_Backup_Full', new Date(2015, 4, 31, 18, 30, 0), new Date(2015, 5, 01, 04, 14, 27) ],
[ 'Ordina', 'Ordina_Backup_Full', new Date(2015, 4, 30, 18, 30, 0), new Date(2015, 4, 31, 4, 56, 46) ],
[ 'Ordina', 'Ordina_Backup_Full', new Date(2015, 5, 2, 18, 30, 0), new Date(2015, 5, 3, 2, 13, 9) ],
[ 'DWH Productie', 'Productie_DWH_Export wekelijks en eerste dag van de maand', new Date(2015, 5, 1, 6, 0, 0), new Date(2015, 5, 1, 7, 2, 40) ],
[ 'DWH Productie', 'Productie_DWH_Export wekelijks en eerste dag van de maand', new Date(2015, 5, 2, 6, 0, 0), new Date(2015, 5, 2, 7, 23, 20) ],
[ 'DWH Productie', 'Productie_DWH_ProcessFullCubes', new Date(2015, 5, 3, 7, 27, 17), new Date(2015, 5, 3, 8, 40, 42) ],
[ 'DWH Productie', 'Productie_DWH_ProcessFullCubes', new Date(2015, 5, 1, 3, 56, 47), new Date(2015, 5, 1, 5, 9, 17) ],
[ 'DWH Productie', 'Productie_DWH_ProcessFullCubes', new Date(2015, 4, 31, 3, 48, 48), new Date(2015, 4, 31, 4, 59, 28) ],
[ 'DWH Productie', 'Productie_DWH_ProcessFullCubes', new Date(2015, 5, 2, 8, 58, 54), new Date(2015, 5, 2, 10, 14, 37) ],
[ 'DWH Productie', 'productie_DWH_Email', new Date(2015, 5, 2, 6, 15, 0), new Date(2015, 5, 2, 6, 45, 3) ],
[ 'DWH Productie', 'productie_DWH_Email', new Date(2015, 5, 3, 6, 15, 0), new Date(2015, 5, 3, 6, 45, 16) ],
]);


chart.draw(dataTable);
}