morris-data.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
  1. // Dashboard 1 Morris-chart
  2. Morris.Area({
  3. element: 'morris-area-chart',
  4. data: [{
  5. period: '2010',
  6. iphone: 50,
  7. ipad: 80,
  8. itouch: 20
  9. }, {
  10. period: '2011',
  11. iphone: 130,
  12. ipad: 100,
  13. itouch: 80
  14. }, {
  15. period: '2012',
  16. iphone: 80,
  17. ipad: 60,
  18. itouch: 70
  19. }, {
  20. period: '2013',
  21. iphone: 70,
  22. ipad: 200,
  23. itouch: 140
  24. }, {
  25. period: '2014',
  26. iphone: 180,
  27. ipad: 150,
  28. itouch: 140
  29. }, {
  30. period: '2015',
  31. iphone: 105,
  32. ipad: 100,
  33. itouch: 80
  34. },
  35. {
  36. period: '2016',
  37. iphone: 250,
  38. ipad: 150,
  39. itouch: 200
  40. }],
  41. xkey: 'period',
  42. ykeys: ['iphone', 'ipad', 'itouch'],
  43. labels: ['iPhone', 'iPad', 'iPod Touch'],
  44. pointSize: 3,
  45. fillOpacity: 0,
  46. pointStrokeColors:['#00bfc7', '#fb9678', '#9675ce'],
  47. behaveLikeLine: true,
  48. gridLineColor: 'rgba(120, 130, 140, 0.28)',
  49. lineWidth: 2,
  50. gridTextColor: '#96a2b4',
  51. hideHover: 'auto',
  52. lineColors: ['#00bfc7', '#fb9678', '#9675ce'],
  53. resize: true
  54. });
  55. Morris.Area({
  56. element: 'morris-area-chart2',
  57. data: [{
  58. period: '2010',
  59. SiteA: 0,
  60. SiteB: 0,
  61. }, {
  62. period: '2011',
  63. SiteA: 130,
  64. SiteB: 100,
  65. }, {
  66. period: '2012',
  67. SiteA: 80,
  68. SiteB: 60,
  69. }, {
  70. period: '2013',
  71. SiteA: 70,
  72. SiteB: 200,
  73. }, {
  74. period: '2014',
  75. SiteA: 180,
  76. SiteB: 150,
  77. }, {
  78. period: '2015',
  79. SiteA: 105,
  80. SiteB: 90,
  81. },
  82. {
  83. period: '2016',
  84. SiteA: 250,
  85. SiteB: 150,
  86. }],
  87. xkey: 'period',
  88. ykeys: ['SiteA', 'SiteB'],
  89. labels: ['Site A', 'Site B'],
  90. pointSize: 0,
  91. fillOpacity: 0.4,
  92. pointStrokeColors:['#5e6d88', '#01c0c8'],
  93. behaveLikeLine: true,
  94. gridLineColor: 'rgba(120, 130, 140, 0.28)',
  95. lineWidth: 0,
  96. smooth: false,
  97. gridTextColor: '#96a2b4',
  98. hideHover: 'auto',
  99. lineColors: ['#5e6d88', '#01c0c8'],
  100. resize: true
  101. });
  102. // LINE CHART
  103. var line = new Morris.Line({
  104. element: 'morris-line-chart',
  105. resize: true,
  106. data: [
  107. {y: '2011 Q1', item1: 2666},
  108. {y: '2011 Q2', item1: 2778},
  109. {y: '2011 Q3', item1: 4912},
  110. {y: '2011 Q4', item1: 3767},
  111. {y: '2012 Q1', item1: 6810},
  112. {y: '2012 Q2', item1: 5670},
  113. {y: '2012 Q3', item1: 4820},
  114. {y: '2012 Q4', item1: 15073},
  115. {y: '2013 Q1', item1: 10687},
  116. {y: '2013 Q2', item1: 8432}
  117. ],
  118. xkey: 'y',
  119. ykeys: ['item1'],
  120. labels: ['Item 1'],
  121. gridLineColor: 'rgba(120, 130, 140, 0.28)',
  122. lineColors: ['#a3a4a9'],
  123. lineWidth: 1,
  124. gridTextColor: '#96a2b4',
  125. hideHover: 'auto'
  126. });
  127. // Morris donut chart
  128. Morris.Donut({
  129. element: 'morris-donut-chart',
  130. data: [{
  131. label: "Download Sales",
  132. value: 12,
  133. }, {
  134. label: "In-Store Sales",
  135. value: 30
  136. }, {
  137. label: "Mail-Order Sales",
  138. value: 20
  139. }],
  140. resize: true,
  141. backgroundColor: '#353c48',
  142. labelColor: '#96a2b4',
  143. colors:['#99d683', '#13dafe', '#6164c1']
  144. });
  145. // Morris bar chart
  146. Morris.Bar({
  147. element: 'morris-bar-chart',
  148. data: [{
  149. y: '2006',
  150. a: 100,
  151. b: 90,
  152. c: 60
  153. }, {
  154. y: '2007',
  155. a: 75,
  156. b: 65,
  157. c: 40
  158. }, {
  159. y: '2008',
  160. a: 50,
  161. b: 40,
  162. c: 30
  163. }, {
  164. y: '2009',
  165. a: 75,
  166. b: 65,
  167. c: 40
  168. }, {
  169. y: '2010',
  170. a: 50,
  171. b: 40,
  172. c: 30
  173. }, {
  174. y: '2011',
  175. a: 75,
  176. b: 65,
  177. c: 40
  178. }, {
  179. y: '2012',
  180. a: 100,
  181. b: 90,
  182. c: 40
  183. }],
  184. xkey: 'y',
  185. ykeys: ['a', 'b', 'c'],
  186. labels: ['A', 'B', 'C'],
  187. barColors:['#b8edf0', '#b4c1d7', '#fcc9ba'],
  188. hideHover: 'auto',
  189. gridLineColor: 'rgba(120, 130, 140, 0.28)',
  190. gridTextColor:'#96a2b4',
  191. resize: true
  192. });
  193. // Extra chart
  194. Morris.Area({
  195. element: 'extra-area-chart',
  196. data: [{
  197. period: '2010',
  198. iphone: 0,
  199. ipad: 0,
  200. itouch: 0
  201. }, {
  202. period: '2011',
  203. iphone: 50,
  204. ipad: 15,
  205. itouch: 5
  206. }, {
  207. period: '2012',
  208. iphone: 20,
  209. ipad: 50,
  210. itouch: 65
  211. }, {
  212. period: '2013',
  213. iphone: 60,
  214. ipad: 12,
  215. itouch: 7
  216. }, {
  217. period: '2014',
  218. iphone: 30,
  219. ipad: 20,
  220. itouch: 120
  221. }, {
  222. period: '2015',
  223. iphone: 25,
  224. ipad: 80,
  225. itouch: 40
  226. }, {
  227. period: '2016',
  228. iphone: 10,
  229. ipad: 10,
  230. itouch: 10
  231. }
  232. ],
  233. lineColors: ['#fb9678', '#01c0c8', '#8698b7'],
  234. xkey: 'period',
  235. ykeys: ['iphone', 'ipad', 'itouch'],
  236. labels: ['Site A', 'Site B', 'Site C'],
  237. pointSize: 0,
  238. lineWidth: 0,
  239. resize:true,
  240. fillOpacity: 0.8,
  241. behaveLikeLine: true,
  242. gridLineColor: 'rgba(120, 130, 140, 0.28)',
  243. gridTextColor:'#96a2b4',
  244. hideHover: 'auto'
  245. });