Timeline Example

An example of a Google Timeline.

by Luca De Nardi

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline" style="height: 580px;"></div>

JavaScript

google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
	var container = document.getElementById('timeline');
	var chart = new google.visualization.Timeline(container);
	var dataTable = new google.visualization.DataTable();

	dataTable.addColumn({ type: 'string', id: 'giorno' });
	dataTable.addColumn({ type: 'string', id: 'turno' });
	dataTable.addColumn({ type: 'date', id: 'inizio' });
	dataTable.addColumn({ type: 'date', id: 'fine' });
	dataTable.addRows([
		[ 'Lunedì', 'Pomeriggio', 		new Date("2019-12-12 13:30:00"), new Date("2019-12-12 18:00:00") ],
		[ 'Martedì', 'Mattina', 		new Date("2019-12-12 09:30:00"), new Date("2019-12-12 11:30:00") ],
		[ 'Martedì', 'Pomeriggio', 		new Date("2019-12-12 14:30:00"), new Date("2019-12-12 17:00:00") ],
		[ 'Mercoledì', 'Mattina', 		new Date("2019-12-12 11:00:00"), new Date("2019-12-12 12:30:00") ],
		[ 'Mercoledì', 'Pomeriggio', 	new Date("2019-12-12 14:00:00"), new Date("2019-12-12 19:00:00") ],
		[ 'Giovedì', 'Pomeriggio', 		new Date("2019-12-12 13:30:00"), new Date("2019-12-12 17:30:00") ],
		[ 'Venerdì', 'Mattina', 		new Date("2019-12-12 08:30:00"), new Date("2019-12-12 12:30:00") ]
	]);

	chart.draw(dataTable);
}