JavaScript
google.load('visualization', '1.1', {
'packages': ['timeline']
});
google.setOnLoadCallback(init);
function init() {
var checkbox = document.getElementById('row-labels');
checkbox.onchange = function() {
drawCharts(checkbox.checked);
};
drawCharts(false);
}
function drawCharts(rowLabels) {
drawTimeline1(rowLabels);
drawTimeline2(rowLabels);
}
function drawTimeline1(rowLabels) {
rowLabels = rowLabels || false;
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Project' });
dataTable.addColumn({ type: 'date', id: 'Start Dt' });
dataTable.addColumn({ type: 'date', id: 'End Dt' });
dataTable.addRows([
[ 'proj1', new Date(2013, 10, 29), new Date(2014, 5, 3) ],
[ 'proj2', new Date(2014, 2, 3), new Date(2014, 6, 3) ],
[ 'proj3', new Date(2014, 1, 1), new Date(2014, 12, 31) ],
[ 'proj4', new Date(2013, 10, 1), new Date(2014, 4, 1) ],
[ 'Mt5', new Date(2013, 9, 3), new Date(2014, 5, 3) ]]);
var chart = new google.visualization.Timeline(document.getElementById('timeline1'));
var options = {
height: 300,
timeline: { showRowLabels: rowLabels }
};
chart.draw(dataTable, options);
}
function drawTimeline2(rowLabels) {
rowLabels = rowLabels || false;
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'no' });
dataTable.addColumn({ type: 'string', id: 'Project' });
dataTable.addColumn({ type: 'date', id: 'Start Dt' });
dataTable.addColumn({ type: 'date', id: 'End Dt' });
dataTable.addRows([
[ '0', 'proj1', new Date(2013, 10, 29), new Date(2014, 5, 3) ],
[ '1', 'proj2', new Date(2014, 2, 3), new Date(2014, 6, 3) ],
[ '2', 'proj3', new Date(2014, 1, 1), new Date(2014, 12, 31) ],
[ '3', 'proj4', new Date(2013, 10, 1), new Date(2014, 4,...