<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script src="http://www.amcharts.com/lib/3/amcharts.js"></script> <script src="http://www.amcharts.com/lib/3/serial.js"></script> <script src="http://www.amcharts.com/lib/3/gantt.js"></script> <script src="../responsive.min.js"></script> <style> body, html { height: 100%; padding: 0; margin: 0; overflow: hidden; } #chartdiv { width: 100%; height: 100%; } </style> <script> AmCharts.useUTC = true; var chart = AmCharts.makeChart( "chartdiv", { "type": "gantt", "period": "hh", "balloonDateFormat": "JJ:NN", "columnWidth": 0.5, "valueAxis": { "type": "date", "minimum": 7, "maximum": 31 }, "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": "#7B742C", "task": "Task #1" }, { "duration": 2, "color": "#7E585F", "task": "Task #2" }, { "duration": 2, "color": "#CF794A", "task": "Task #3" } ] }, { "category": "Smith", "segments": [ { "start": 10, "duration": 2, "color": "#7E585F", "task": "Task #2" }, { "duration": 1, "color": "#CF794A", "task": "Task #3" }, { "duration": 4, "color": "#7B742C", "task": "Task #1" } ] }, { "category": "Ben", "segments": [ { "start": 12, "duration": 2, "color": "#7E585F", "task": "Task #2" }, { "start": 16, "duration": 2, "color": "#FFE4C4", "task": "Task #4" } ] }, { "category": "Mike", "segments": [ { "start": 9, "duration": 6, "color": "#7B742C", "task": "Task #1" }, { "duration": 4, "color": "#7E585F", "task": "Task #2" } ] }, { "category": "Lenny", "segments": [ { "start": 8, "duration": 1, "color": "#CF794A", "task": "Task #3" }, { "duration": 4, "color": "#7B742C", "task": "Task #1" } ] }, { "category": "Scott", "segments": [ { "start": 15, "duration": 3, "color": "#7E585F", "task": "Task #2" } ] }, { "category": "Julia", "segments": [ { "start": 9, "duration": 2, "color": "#7B742C", "task": "Task #1" }, { "duration": 1, "color": "#7E585F", "task": "Task #2" }, { "duration": 8, "color": "#CF794A", "task": "Task #3" } ] }, { "category": "Bob", "segments": [ { "start": 9, "duration": 8, "color": "#7E585F", "task": "Task #2" }, { "duration": 7, "color": "#CF794A", "task": "Task #3" } ] }, { "category": "Kendra", "segments": [ { "start": 11, "duration": 8, "color": "#7E585F", "task": "Task #2" }, { "start": 16, "duration": 2, "color": "#FFE4C4", "task": "Task #4" } ] }, { "category": "Tom", "segments": [ { "start": 9, "duration": 4, "color": "#7B742C", "task": "Task #1" }, { "duration": 3, "color": "#7E585F", "task": "Task #2" }, { "duration": 5, "color": "#CF794A", "task": "Task #3" } ] }, { "category": "Kyle", "segments": [ { "start": 6, "duration": 3, "color": "#7E585F", "task": "Task #2" } ] }, { "category": "Anita", "segments": [ { "start": 12, "duration": 2, "color": "#7E585F", "task": "Task #2" }, { "start": 16, "duration": 2, "color": "#FFE4C4", "task": "Task #4" } ] }, { "category": "Jack", "segments": [ { "start": 8, "duration": 10, "color": "#7B742C", "task": "Task #1" }, { "duration": 2, "color": "#7E585F", "task": "Task #2" } ] }, { "category": "Kim", "segments": [ { "start": 12, "duration": 2, "color": "#7E585F", "task": "Task #2" }, { "duration": 3, "color": "#CF794A", "task": "Task #3" } ] }, { "category": "Aaron", "segments": [ { "start": 18, "duration": 2, "color": "#7E585F", "task": "Task #2" }, { "duration": 2, "color": "#FFE4C4", "task": "Task #4" } ] }, { "category": "Alan", "segments": [ { "start": 17, "duration": 2, "color": "#7B742C", "task": "Task #1" }, { "duration": 2, "color": "#7E585F", "task": "Task #2" }, { "duration": 2, "color": "#CF794A", "task": "Task #3" } ] }, { "category": "Ruth", "segments": [ { "start": 13, "duration": 2, "color": "#7E585F", "task": "Task #2" }, { "duration": 1, "color": "#CF794A", "task": "Task #3" }, { "duration": 4, "color": "#7B742C", "task": "Task #1" } ] }, { "category": "Simon", "segments": [ { "start": 10, "duration": 3, "color": "#7E585F", "task": "Task #2" }, { "start": 17, "duration": 4, "color": "#FFE4C4", "task": "Task #4" } ] } ], "chartScrollbar": {}, "chartCursor": { "valueBalloonsEnabled": false, "cursorAlpha": 0.1, "valueLineBalloonEnabled": true, "valueLineEnabled": true, "fullWidth": true }, "responsive": { "enabled": true } } ); </script> </head> <body> <div id="chartdiv"></div> </body> </html>