widget-morris-charts.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  1. //[widget morris charts Javascript]
  2. //Project: Riday Admin - Responsive Admin Template
  3. //Primary use: Used only for the morris charts
  4. $(function () {
  5. "use strict";
  6. Morris.Area({
  7. element: 'area-chart',
  8. data: [{
  9. period: '2010',
  10. data1: 55,
  11. data2: 85,
  12. data3: 25
  13. }, {
  14. period: '2011',
  15. data1: 135,
  16. data2: 105,
  17. data3: 85
  18. }, {
  19. period: '2012',
  20. data1: 85,
  21. data2: 65,
  22. data3: 75
  23. }, {
  24. period: '2013',
  25. data1: 75,
  26. data2: 205,
  27. data3: 145
  28. }, {
  29. period: '2014',
  30. data1: 185,
  31. data2: 155,
  32. data3: 145
  33. }, {
  34. period: '2015',
  35. data1: 110,
  36. data2: 105,
  37. data3: 85
  38. },
  39. {
  40. period: '2016',
  41. data1: 255,
  42. data2: 155,
  43. data3: 205
  44. }],
  45. xkey: 'period',
  46. ykeys: ['data1', 'data2', 'data3'],
  47. labels: ['Data 1', 'Data 2', 'Data 3'],
  48. pointSize: 3,
  49. fillOpacity: 0,
  50. pointStrokeColors:['#0bb2d4', '#17b3a3', '#3e8ef7'],
  51. behaveLikeLine: true,
  52. gridLineColor: '#e0e0e0',
  53. lineWidth: 3,
  54. hideHover: 'auto',
  55. lineColors: ['#0bb2d4', '#17b3a3', '#3e8ef7'],
  56. resize: true
  57. });
  58. Morris.Area({
  59. element: 'area-chart2',
  60. data: [{
  61. period: '2013',
  62. data1: 0,
  63. data2: 0,
  64. }, {
  65. period: '2014',
  66. data1: 135,
  67. data2: 105,
  68. }, {
  69. period: '2015',
  70. data1: 85,
  71. data2: 65,
  72. }, {
  73. period: '2016',
  74. data1: 75,
  75. data2: 205,
  76. }, {
  77. period: '2017',
  78. data1: 185,
  79. data2: 155,
  80. }, {
  81. period: '2018',
  82. data1: 110,
  83. data2: 95,
  84. },
  85. {
  86. period: '2019',
  87. data1: 255,
  88. data2: 155,
  89. }],
  90. xkey: 'period',
  91. ykeys: ['data1', 'data2'],
  92. labels: ['Data 1', 'Data 2'],
  93. pointSize: 0,
  94. fillOpacity: 0.4,
  95. pointStrokeColors:['#faa700', '#ff4c52'],
  96. behaveLikeLine: true,
  97. gridLineColor: '#e0e0e0',
  98. lineWidth: 0,
  99. smooth: false,
  100. hideHover: 'auto',
  101. lineColors: ['#faa700', '#ff4c52'],
  102. resize: true
  103. });
  104. // LINE CHART
  105. var line = new Morris.Line({
  106. element: 'line-chart',
  107. resize: true,
  108. data: [
  109. {y: '2016 Q1', data1: 2566},
  110. {y: '2016 Q2', data1: 2678},
  111. {y: '2016 Q3', data1: 4812},
  112. {y: '2016 Q4', data1: 3867},
  113. {y: '2017 Q1', data1: 6910},
  114. {y: '2017 Q2', data1: 5770},
  115. {y: '2017 Q3', data1: 4920},
  116. {y: '2017 Q4', data1: 15173},
  117. {y: '2018 Q1', data1: 11687},
  118. {y: '2018 Q2', data1: 8632}
  119. ],
  120. xkey: 'y',
  121. ykeys: ['data1'],
  122. labels: ['Data 1'],
  123. gridLineColor: '#eef0f2',
  124. lineColors: ['#0bb2d4'],
  125. lineWidth: 1,
  126. hideHover: 'auto'
  127. });
  128. // donut chart
  129. Morris.Donut({
  130. element: 'donut-chart',
  131. data: [{
  132. label: "Online Sales",
  133. value: 15,
  134. }, {
  135. label: "In-Store Sales",
  136. value: 45
  137. }, {
  138. label: "Retail Sales",
  139. value: 35
  140. }],
  141. resize: true,
  142. colors:['#17b3a3', '#3e8ef7', '#ff4c52']
  143. });
  144. // bar chart
  145. Morris.Bar({
  146. element: 'bar-chart',
  147. data: [{
  148. y: '2012',
  149. a: 105,
  150. b: 95,
  151. c: 65
  152. }, {
  153. y: '2013',
  154. a: 80,
  155. b: 70,
  156. c: 45
  157. }, {
  158. y: '2014',
  159. a: 55,
  160. b: 45,
  161. c: 35
  162. }, {
  163. y: '2015',
  164. a: 80,
  165. b: 70,
  166. c: 45
  167. }, {
  168. y: '2016',
  169. a: 55,
  170. b: 45,
  171. c: 35
  172. }, {
  173. y: '2017',
  174. a: 80,
  175. b: 70,
  176. c: 45
  177. }, {
  178. y: '2018',
  179. a: 105,
  180. b: 95,
  181. c: 45
  182. }],
  183. xkey: 'y',
  184. ykeys: ['a', 'b', 'c'],
  185. labels: ['A', 'B', 'C'],
  186. barColors:['#ff4c52', '#faa700', '#0bb2d4'],
  187. hideHover: 'auto',
  188. gridLineColor: '#eef0f2',
  189. resize: true
  190. });
  191. // area chart
  192. Morris.Area({
  193. element: 'area-chart3',
  194. data: [{
  195. period: '2013',
  196. data1: 0,
  197. data2: 0,
  198. data3: 0
  199. }, {
  200. period: '2014',
  201. data1: 55,
  202. data2: 20,
  203. data3: 10
  204. }, {
  205. period: '2015',
  206. data1: 25,
  207. data2: 55,
  208. data3: 70
  209. }, {
  210. period: '2016',
  211. data1: 65,
  212. data2: 17,
  213. data3: 12
  214. }, {
  215. period: '2017',
  216. data1: 35,
  217. data2: 25,
  218. data3: 125
  219. }, {
  220. period: '2018',
  221. data1: 30,
  222. data2: 85,
  223. data3: 45
  224. }, {
  225. period: '2019',
  226. data1: 15,
  227. data2: 15,
  228. data3: 15
  229. }
  230. ],
  231. lineColors: ['#17b3a3', '#3e8ef7', '#faa700'],
  232. xkey: 'period',
  233. ykeys: ['data1', 'data2', 'data3'],
  234. labels: ['Data 1', 'Data 2', 'Data 3'],
  235. pointSize: 0,
  236. lineWidth: 0,
  237. resize:true,
  238. fillOpacity: 0.8,
  239. behaveLikeLine: true,
  240. gridLineColor: '#e0e0e0',
  241. hideHover: 'auto'
  242. });
  243. });