| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304 | 
							- <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>
 
 
  |