GANTT Chart
GANTT chart is a modification of a bar chart, showing several segments, not necessarily attached to each other. It can be used to mark spans of time, date or values.
The most obvious and wide use for GANTT chart is to show person’s or team’s tasks span over time as well as relationships between those tasks.
This particular demo uses hours as segment duration parameter. The units used in it are defined by period parameter.
For a GANTT chart which uses absolute dates for segment start and end, check out this demo.
Demo source
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/gantt.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<!-- Chart code -->
<script>
var chart = AmCharts.makeChart( "chartdiv", {
"type": "gantt",
"theme": "none",
"marginRight": 70,
"period": "hh",
"dataDateFormat":"YYYY-MM-DD",
"balloonDateFormat": "JJ:NN",
"columnWidth": 0.5,
"valueAxis": {
"type": "date"
},
"brightnessStep": 10,
"graph": {
"fillAlphas": 1,
"balloonText": "<b>[[task]]</b>: [[open]] [[value]]"
},
"rotate": true,
"categoryField": "category",
"segmentsField": "segments",
"colorField": "color",
"startDate": "2015-01-01",
"startField": "start",
"endField": "end",
"durationField": "duration",
"dataProvider": [ {
"category": "John",
"segments": [ {
"start": 7,
"duration": 2,
"color": "#46615e",
"task": "Task #1"
}, {
"duration": 2,
"color": "#727d6f",
"task": "Task #2"
}, {
"duration": 2,
"color": "#8dc49f",
"task": "Task #3"
} ]
}, {
"category": "Smith",
"segments": [ {
"start": 10,
"duration": 2,
"color": "#727d6f",
"task": "Task #2"
}, {
"duration": 1,
"color": "#8dc49f",
"task": "Task #3"
}, {
"duration": 4,
"color": "#46615e",
"task": "Task #1"
} ]
}, {
"category": "Ben",
"segments": [ {
"start": 12,
"duration": 2,
"color": "#727d6f",
"task": "Task #2"
}, {
"start": 16,
"duration": 2,
"color": "#FFE4C4",
"task": "Task #4"
} ]
}, {
"category": "Mike",
"segments": [ {
"start": 9,
"duration": 6,
"color": "#46615e",
"task": "Task #1"
}, {
"duration": 4,
"color": "#727d6f",
"task": "Task #2"
} ]
}, {
"category": "Lenny",
"segments": [ {
"start": 8,
"duration": 1,
"color": "#8dc49f",
"task": "Task #3"
}, {
"duration": 4,
"color": "#46615e",
"task": "Task #1"
} ]
}, {
"category": "Scott",
"segments": [ {
"start": 15,
"duration": 3,
"color": "#727d6f",
"task": "Task #2"
} ]
}, {
"category": "Julia",
"segments": [ {
"start": 9,
"duration": 2,
"color": "#46615e",
"task": "Task #1"
}, {
"duration": 1,
"color": "#727d6f",
"task": "Task #2"
}, {
"duration": 8,
"color": "#8dc49f",
"task": "Task #3"
} ]
}, {
"category": "Bob",
"segments": [ {
"start": 9,
"duration": 8,
"color": "#727d6f",
"task": "Task #2"
}, {
"duration": 7,
"color": "#8dc49f",
"task": "Task #3"
} ]
}, {
"category": "Kendra",
"segments": [ {
"start": 11,
"duration": 8,
"color": "#727d6f",
"task": "Task #2"
}, {
"start": 16,
"duration": 2,
"color": "#FFE4C4",
"task": "Task #4"
} ]
}, {
"category": "Tom",
"segments": [ {
"start": 9,
"duration": 4,
"color": "#46615e",
"task": "Task #1"
}, {
"duration": 3,
"color": "#727d6f",
"task": "Task #2"
}, {
"duration": 5,
"color": "#8dc49f",
"task": "Task #3"
} ]
}, {
"category": "Kyle",
"segments": [ {
"start": 6,
"duration": 3,
"color": "#727d6f",
"task": "Task #2"
} ]
}, {
"category": "Anita",
"segments": [ {
"start": 12,
"duration": 2,
"color": "#727d6f",
"task": "Task #2"
}, {
"start": 16,
"duration": 2,
"color": "#FFE4C4",
"task": "Task #4"
} ]
}, {
"category": "Jack",
"segments": [ {
"start": 8,
"duration": 10,
"color": "#46615e",
"task": "Task #1"
}, {
"duration": 2,
"color": "#727d6f",
"task": "Task #2"
} ]
}, {
"category": "Kim",
"segments": [ {
"start": 12,
"duration": 2,
"color": "#727d6f",
"task": "Task #2"
}, {
"duration": 3,
"color": "#8dc49f",
"task": "Task #3"
} ]
}, {
"category": "Aaron",
"segments": [ {
"start": 18,
"duration": 2,
"color": "#727d6f",
"task": "Task #2"
}, {
"duration": 2,
"color": "#FFE4C4",
"task": "Task #4"
} ]
}, {
"category": "Alan",
"segments": [ {
"start": 17,
"duration": 2,
"color": "#46615e",
"task": "Task #1"
}, {
"duration": 2,
"color": "#727d6f",
"task": "Task #2"
}, {
"duration": 2,
"color": "#8dc49f",
"task": "Task #3"
} ]
}, {
"category": "Ruth",
"segments": [ {
"start": 13,
"duration": 2,
"color": "#727d6f",
"task": "Task #2"
}, {
"duration": 1,
"color": "#8dc49f",
"task": "Task #3"
}, {
"duration": 4,
"color": "#46615e",
"task": "Task #1"
} ]
}, {
"category": "Simon",
"segments": [ {
"start": 10,
"duration": 3,
"color": "#727d6f",
"task": "Task #2"
}, {
"start": 17,
"duration": 4,
"color": "#FFE4C4",
"task": "Task #4"
} ]
} ],
"valueScrollbar": {
"autoGridCount":true
},
"chartCursor": {
"cursorColor":"#55bb76",
"valueBalloonsEnabled": false,
"cursorAlpha": 0,
"valueLineAlpha":0.5,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"zoomable":false,
"valueZoomable":true
},
"export": {
"enabled": true
}
} );
</script>
<!-- HTML -->
<div id="chartdiv"></div>