Gantt in D3js

Check out http://bl.ocks.org/dk8996/5538271

CSS

html,body,#wrapper {
	width: 100%;
	height: 100%;
	margin: 0px;
}
 
.chart {
	font-family: Arial, sans-serif;
	font-size: 12px;
}
 
.axis path,.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}
 
.bar {
	fill: #33b5e5;
}
 
.bar-failed {
	fill: #CC0000;
}
 
.bar-running {
	fill: #669900;
}
 
.bar-succeeded {
	fill: #33b5e5;
}
 
.bar-killed {
	fill: #ffbb33;
}
 
#forkme_banner {
	display: block;
	position: absolute;
	top: 0;
	right: 10px;
	z-index: 10;
	padding: 10px 50px 10px 10px;
	color: #fff;
	background:
		url('http://dk8996.github.io/Gantt-Chart/images/blacktocat.png')
		#0090ff no-repeat 95% 50%;
	font-weight: 700;
	box-shadow: 0 0 10px rgba(0, 0, 0, .5);
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	text-decoration: none;
}

JavaScript

var shiftLabors= [
         {
            "shiftId":"00000000-0000-0000-0010-000000000003",
            "jobId":"00000000-0000-0000-0009-000000000042",
            "description":null,
            "laborFrom":"2018-09-09T16:00:00-04:00",
            "laborTo":"2018-09-09T22:45:00-04:00",
            "id":"0b4753e6-7022-4f9a-9983-00f63dbf4c2e",
            "transactionFrom":"2018-09-05T16:41:21.6895838-04:00",
            "transactionTo":"9999-12-31T18:59:59.9999999-05:00",
            "validFrom":"2018-09-05T16:41:21.6895838-04:00",
            "validTo":"9999-12-31T18:59:59.9999999-05:00"
         },
         {
            "shiftId":"00000000-0000-0000-0010-000000000002",
            "jobId":"00000000-0000-0000-0009-000000000032",
            "description":null,
            "laborFrom":"2018-09-10T11:00:00-04:00",
            "laborTo":"2018-09-10T16:00:00-04:00",
            "id":"c11409e2-a076-48bb-bcc8-012299f51768",
            "transactionFrom":"2018-09-05T16:41:21.9171096-04:00",
            "transactionTo":"9999-12-31T18:59:59.9999999-05:00",
            "validFrom":"2018-09-05T16:41:21.9171096-04:00",
            "validTo":"9999-12-31T18:59:59.9999999-05:00"
         },
         {
            "shiftId":"00000000-0000-0000-0010-000000000003",
            "jobId":"00000000-0000-0000-0009-000000000037",
            "description":null,
            "laborFrom":"2018-09-13T17:15:00-04:00",
            "laborTo":"2018-09-13T20:15:00-04:00",
            "id":"bef0e537-915b-42fa-918e-0293cbc1ff73",
            "transactionFrom":"2018-09-05T16:41:23.5851078-04:00",
            "transactionTo":"9999-12-31T18:59:59.9999999-05:00",
            "validFrom":"2018-09-05T16:41:23.5851078-04:00",
            "validTo":"9999-12-31T18:59:59.9999999-05:00"
         },
         {
            "shiftId":"00000000-0000-0000-0010-000000000003",
            "jobId":"00000000-0000-0000-0009-000000000048",
            "description":null,
           ...