gantt.html 6.1 KB

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