Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
rect{ stroke:black; stroke-width:1; }
<script type="text/javascript" src=""></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
function drawChart() {
var container = document.getElementById('example3.1');
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' });
['localWorker', 'dc.o', new Date(2532), new Date(3281)],
['localWorker', 'ba.o', new Date(689), new Date(1340)],
['localWorker', 'ef.o', new Date(4335), new Date(5800)],
['localWorker', 'ec.o', new Date(3807), new Date(4628)],
['localWorker', 'ae.o', new Date(496), new Date(1660)],
['localWorker', 'eb.o', new Date(3521), new Date(5608)],
['localWorker', 'ea.o', new Date(3424), new Date(3807)],
['localWorker', 'cb.o', new Date(1405), new Date(3521)],
['localWorker', 'fe.o', new Date(5195), new Date(5963)],
['localWorker', 'bb.o', new Date(898), new Date(2532)],
['localWorker', 'ad.o', new Date(0), new Date(550)],
['localWorker', 'df.o', new Date(3281), new Date(5195)],
['localWorker', 'aa.o', new Date(0), new Date(689)],
['localWorker', 'af.o', new Date(550), new Date(1405)],
['localWorker', 'cd.o', new Date(1862), new Date(2889)],
['localWorker', 'de.o', new Date(2889), new Date(4335)],
['localWorker', 'fb.o', new Date(4628), new Date(5347)],
['localWorker', 'ac.o', new Date(2), new Date(898)],
['localWorker', 'ff.o', new Date(5347), new Date(6083)],
['localWorker', 'cc.o', new Date(1660), new Date(3424)],
['localWorker', 'ca.o', new Date(1340), new Date(1862)],
['localWorker', 'ab.o', new Date(1), new Date(496)],
['', 'fc.o', new Date(4629), new Date(5669)],
['', 'bd.o', new Date(1291), new Date(2219)],
['', 'fa.o', new Date(4434), new Date(6683)],
['', 'da.o', new Date(2240), new Date(4434)],
['', 'be.o', new Date(1291), new Date(1980)],
['', 'fd.o', new Date(5168), new Date(5841)],
['', 'db.o', new Date(2496), new Date(4111)],
['', 'bf.o', new Date(1289), new Date(2240)],
['', 'ee.o', new Date(4278), new Date(5167)],
['', 'ed.o', new Date(4111), new Date(5494)],
['', 'a.out', new Date(6684), new Date(7877)],
['', 'cf.o', new Date(2219), new Date(4278)],
['', 'dd.o', new Date(2594), new Date(4629)],
['', 'ce.o', new Date(1980), new Date(2594)],
['', 'bc.o', new Date(1290), new Date(2496)]
var options = {
timeline: {
avoidOverlappingGridLines: false,
colors: ['#cbb69d', '#603913', '#c69c6e'],
showBarLabels: true,
//colorByRowLabel: true,
groupByRowLabel: true
chart.draw(dataTable, options);
<div id="example3.1" style="height: 2200px;"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.