Its a nasty way of doing it. Wish theyd make a google gantt chart
google.load('visualization', '1', {
packages: ['corechart']
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('timeofday', 'spacer');
data.addColumn('timeofday', 'Runtime');
data.addColumn('timeofday', 'Runtime');
data.addColumn('timeofday', 'Runtime');
data.addColumn('timeofday', 'Runtime');
data.addRow(['PIPE', [3, 0, 0],
[4, 30, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0]
]);
data.addRow(['CNI', [1, 0, 0],
[0, 0, 0],
[7, 30, 0],
[0, 0, 0],
[0, 0, 0]
]);
data.addRow(['PEVC', [7, 0, 0],
[0, 0, 0],
[0, 0, 0],
[1, 0, 0],
[0, 0, 0]
]);
data.addRow(['MA', [7, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[1, 0, 0]
]);
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, {
isStacked: true,
width: 900,
height: data.getNumberOfRows() * 60,
title: 'Host Runtimes',
vAxis: {
title: 'Content',
titleTextStyle: {
color: 'black'
}
},
series: {
0: {
visibleInLegend: false,
color: 'transparent'
},
1: {
visibleInLegend: false,
color: 'red'
},
2: {
visibleInLegend: false,
color: 'green'
},
3: {
visibleInLegend: false,
color: 'blue'
},
4: {
visibleInLegend: false,
color: 'yellow'
},
5: {
visibleInLegend: false,
color: 'cyan'
},
6: {
visibleInLegend: false,
color: 'pink'
},
7: {
visibleInLegend: false,
color: 'silver'
}
}
});
}
See it in action here-: http://jsfiddle.net/bootkick/hp2yr/9/