1<html>
2    <head>
3		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
5		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
7		<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
8		<script src="http://www.amcharts.com/lib/3/serial.js"></script>
9		<script src="http://www.amcharts.com/lib/3/gantt.js"></script>
10		<script src="../responsive.min.js"></script>
11
12		<style>
13		body, html {
14			height: 100%;
15			padding: 0;
16			margin: 0;
17			overflow: hidden;
18		}
19		#chartdiv {
20			width: 100%;
21			height: 100%;
22		}
23		</style>
24
25		<script>
26			AmCharts.useUTC = true;
27			var chart = AmCharts.makeChart( "chartdiv", {
28				"type": "gantt",
29				"period": "hh",
30				"balloonDateFormat": "JJ:NN",
31				"columnWidth": 0.5,
32				"valueAxis": {
33					"type": "date",
34					"minimum": 7,
35					"maximum": 31
36				},
37				"brightnessStep": 10,
38				"graph": {
39					"fillAlphas": 1,
40					"balloonText": "<b>[[task]]</b>: [[open]] [[value]]"
41				},
42				"rotate": true,
43				"categoryField": "category",
44				"segmentsField": "segments",
45				"colorField": "color",
46				"startDate": "2015-01-01",
47				"startField": "start",
48				"endField": "end",
49				"durationField": "duration",
50				"dataProvider": [ {
51					"category": "John",
52					"segments": [ {
53						"start": 7,
54						"duration": 2,
55						"color": "#7B742C",
56						"task": "Task #1"
57					}, {
58						"duration": 2,
59						"color": "#7E585F",
60						"task": "Task #2"
61					}, {
62						"duration": 2,
63						"color": "#CF794A",
64						"task": "Task #3"
65					} ]
66				}, {
67					"category": "Smith",
68					"segments": [ {
69						"start": 10,
70						"duration": 2,
71						"color": "#7E585F",
72						"task": "Task #2"
73					}, {
74						"duration": 1,
75						"color": "#CF794A",
76						"task": "Task #3"
77					}, {
78						"duration": 4,
79						"color": "#7B742C",
80						"task": "Task #1"
81					} ]
82				}, {
83					"category": "Ben",
84					"segments": [ {
85						"start": 12,
86						"duration": 2,
87						"color": "#7E585F",
88						"task": "Task #2"
89					}, {
90						"start": 16,
91						"duration": 2,
92						"color": "#FFE4C4",
93						"task": "Task #4"
94					} ]
95				}, {
96					"category": "Mike",
97					"segments": [ {
98						"start": 9,
99						"duration": 6,
100						"color": "#7B742C",
101						"task": "Task #1"
102					}, {
103						"duration": 4,
104						"color": "#7E585F",
105						"task": "Task #2"
106					} ]
107				}, {
108					"category": "Lenny",
109					"segments": [ {
110						"start": 8,
111						"duration": 1,
112						"color": "#CF794A",
113						"task": "Task #3"
114					}, {
115						"duration": 4,
116						"color": "#7B742C",
117						"task": "Task #1"
118					} ]
119				}, {
120					"category": "Scott",
121					"segments": [ {
122						"start": 15,
123						"duration": 3,
124						"color": "#7E585F",
125						"task": "Task #2"
126					} ]
127				}, {
128					"category": "Julia",
129					"segments": [ {
130						"start": 9,
131						"duration": 2,
132						"color": "#7B742C",
133						"task": "Task #1"
134					}, {
135						"duration": 1,
136						"color": "#7E585F",
137						"task": "Task #2"
138					}, {
139						"duration": 8,
140						"color": "#CF794A",
141						"task": "Task #3"
142					} ]
143				}, {
144					"category": "Bob",
145					"segments": [ {
146						"start": 9,
147						"duration": 8,
148						"color": "#7E585F",
149						"task": "Task #2"
150					}, {
151						"duration": 7,
152						"color": "#CF794A",
153						"task": "Task #3"
154					} ]
155				}, {
156					"category": "Kendra",
157					"segments": [ {
158						"start": 11,
159						"duration": 8,
160						"color": "#7E585F",
161						"task": "Task #2"
162					}, {
163						"start": 16,
164						"duration": 2,
165						"color": "#FFE4C4",
166						"task": "Task #4"
167					} ]
168				}, {
169					"category": "Tom",
170					"segments": [ {
171						"start": 9,
172						"duration": 4,
173						"color": "#7B742C",
174						"task": "Task #1"
175					}, {
176						"duration": 3,
177						"color": "#7E585F",
178						"task": "Task #2"
179					}, {
180						"duration": 5,
181						"color": "#CF794A",
182						"task": "Task #3"
183					} ]
184				}, {
185					"category": "Kyle",
186					"segments": [ {
187						"start": 6,
188						"duration": 3,
189						"color": "#7E585F",
190						"task": "Task #2"
191					} ]
192				}, {
193					"category": "Anita",
194					"segments": [ {
195						"start": 12,
196						"duration": 2,
197						"color": "#7E585F",
198						"task": "Task #2"
199					}, {
200						"start": 16,
201						"duration": 2,
202						"color": "#FFE4C4",
203						"task": "Task #4"
204					} ]
205				}, {
206					"category": "Jack",
207					"segments": [ {
208						"start": 8,
209						"duration": 10,
210						"color": "#7B742C",
211						"task": "Task #1"
212					}, {
213						"duration": 2,
214						"color": "#7E585F",
215						"task": "Task #2"
216					} ]
217				}, {
218					"category": "Kim",
219					"segments": [ {
220						"start": 12,
221						"duration": 2,
222						"color": "#7E585F",
223						"task": "Task #2"
224					}, {
225						"duration": 3,
226						"color": "#CF794A",
227						"task": "Task #3"
228					} ]
229				}, {
230					"category": "Aaron",
231					"segments": [ {
232						"start": 18,
233						"duration": 2,
234						"color": "#7E585F",
235						"task": "Task #2"
236					}, {
237						"duration": 2,
238						"color": "#FFE4C4",
239						"task": "Task #4"
240					} ]
241				}, {
242					"category": "Alan",
243					"segments": [ {
244						"start": 17,
245						"duration": 2,
246						"color": "#7B742C",
247						"task": "Task #1"
248					}, {
249						"duration": 2,
250						"color": "#7E585F",
251						"task": "Task #2"
252					}, {
253						"duration": 2,
254						"color": "#CF794A",
255						"task": "Task #3"
256					} ]
257				}, {
258					"category": "Ruth",
259					"segments": [ {
260						"start": 13,
261						"duration": 2,
262						"color": "#7E585F",
263						"task": "Task #2"
264					}, {
265						"duration": 1,
266						"color": "#CF794A",
267						"task": "Task #3"
268					}, {
269						"duration": 4,
270						"color": "#7B742C",
271						"task": "Task #1"
272					} ]
273				}, {
274					"category": "Simon",
275					"segments": [ {
276						"start": 10,
277						"duration": 3,
278						"color": "#7E585F",
279						"task": "Task #2"
280					}, {
281						"start": 17,
282						"duration": 4,
283						"color": "#FFE4C4",
284						"task": "Task #4"
285					} ]
286				} ],
287				"chartScrollbar": {},
288				"chartCursor": {
289					"valueBalloonsEnabled": false,
290					"cursorAlpha": 0.1,
291					"valueLineBalloonEnabled": true,
292					"valueLineEnabled": true,
293					"fullWidth": true
294				},
295				"responsive": {
296					"enabled": true
297				}
298			} );
299		</script>
300	</head>
301	<body>
302		<div id="chartdiv"></div>
303	</body>
304</html>