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