gantt.html 6.3 KB

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