Gantt chart library using D3.js.
javascript
var tasks = [
{
"startDate": new Date("Sun Dec 09 01:36:45 EST 2012"),
"endDate": new Date("Sun Dec 09 02:36:45 EST 2012"),
"taskName": "E Job",
"status": "FAILED"
},
{
"startDate": new Date("Sun Dec 09 04:56:32 EST 2012"),
"endDate": new Date("Sun Dec 09 06:35:47 EST 2012"),
"taskName": "A Job",
"status": "RUNNING"
}];
`
$3
Create a map between task status and css class, this is optional.
`javascript
var taskStatus = {
"SUCCEEDED": "bar",
"FAILED": "bar-failed",
"RUNNING": "bar-running",
"KILLED": "bar-killed"
};
`
`css
.bar {
fill: #33b5e5;
}
.bar-failed {
fill: #CC0000;
}
.bar-running {
fill: #669900;
}
.bar-succeeded {
fill: #33b5e5;
}
.bar-killed {
fill: #ffbb33;
}
`
$3
Create a array of task names, they will be display on they y-axis in the order given to the array.
`javascript
var taskNames = [ "D Job", "P Job", "E Job", "A Job", "N Job" ];
`
$3
Create a simple Gantt-Chart
`javascript
var gantt = d3.gantt().taskTypes(taskNames).taskStatus(taskStatus);
gantt(tasks);
``