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>