Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
c7_4.html
<html>
<head>
<style>
rect{ stroke:black; stroke-width:1; }
</style>
</head>
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
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' });
dataTable.addRows([
['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)],
['127.0.0.1', 'fc.o', new Date(4629), new Date(5669)],
['127.0.0.1', 'bd.o', new Date(1291), new Date(2219)],
['127.0.0.1', 'fa.o', new Date(4434), new Date(6683)],
['127.0.0.1', 'da.o', new Date(2240), new Date(4434)],
['127.0.0.1', 'be.o', new Date(1291), new Date(1980)],
['127.0.0.1', 'fd.o', new Date(5168), new Date(5841)],
['127.0.0.1', 'db.o', new Date(2496), new Date(4111)],
['127.0.0.1', 'bf.o', new Date(1289), new Date(2240)],
['127.0.0.1', 'ee.o', new Date(4278), new Date(5167)],
['127.0.0.1', 'ed.o', new Date(4111), new Date(5494)],
['127.0.0.1', 'a.out', new Date(6684), new Date(7877)],
['127.0.0.1', 'cf.o', new Date(2219), new Date(4278)],
['127.0.0.1', 'dd.o', new Date(2594), new Date(4629)],
['127.0.0.1', 'ce.o', new Date(1980), new Date(2594)],
['127.0.0.1', '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);
}
</script>
<div id="example3.1" style="height: 2200px;"></div>
<body>
</html>
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.