dashboard2.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  1. $(function () {
  2. 'use strict'
  3. /* ChartJS
  4. * -------
  5. * Here we will create a few charts using ChartJS
  6. */
  7. //-----------------------
  8. //- MONTHLY SALES CHART -
  9. //-----------------------
  10. // Get context with jQuery - using jQuery's .get() method.
  11. var salesChartCanvas = $('#salesChart').get(0).getContext('2d')
  12. var salesChartData = {
  13. labels : ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  14. datasets: [
  15. {
  16. label : 'Digital Goods',
  17. backgroundColor : 'rgba(60,141,188,0.9)',
  18. borderColor : 'rgba(60,141,188,0.8)',
  19. pointRadius : false,
  20. pointColor : '#3b8bba',
  21. pointStrokeColor : 'rgba(60,141,188,1)',
  22. pointHighlightFill : '#fff',
  23. pointHighlightStroke: 'rgba(60,141,188,1)',
  24. data : [28, 48, 40, 19, 86, 27, 90]
  25. },
  26. {
  27. label : 'Electronics',
  28. backgroundColor : 'rgba(210, 214, 222, 1)',
  29. borderColor : 'rgba(210, 214, 222, 1)',
  30. pointRadius : false,
  31. pointColor : 'rgba(210, 214, 222, 1)',
  32. pointStrokeColor : '#c1c7d1',
  33. pointHighlightFill : '#fff',
  34. pointHighlightStroke: 'rgba(220,220,220,1)',
  35. data : [65, 59, 80, 81, 56, 55, 40]
  36. },
  37. ]
  38. }
  39. var salesChartOptions = {
  40. maintainAspectRatio : false,
  41. responsive : true,
  42. legend: {
  43. display: false
  44. },
  45. scales: {
  46. xAxes: [{
  47. gridLines : {
  48. display : false,
  49. }
  50. }],
  51. yAxes: [{
  52. gridLines : {
  53. display : false,
  54. }
  55. }]
  56. }
  57. }
  58. // This will get the first returned node in the jQuery collection.
  59. var salesChart = new Chart(salesChartCanvas, {
  60. type: 'line',
  61. data: salesChartData,
  62. options: salesChartOptions
  63. }
  64. )
  65. //---------------------------
  66. //- END MONTHLY SALES CHART -
  67. //---------------------------
  68. //-------------
  69. //- PIE CHART -
  70. //-------------
  71. // Get context with jQuery - using jQuery's .get() method.
  72. var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
  73. var pieData = {
  74. labels: [
  75. 'Chrome',
  76. 'IE',
  77. 'FireFox',
  78. 'Safari',
  79. 'Opera',
  80. 'Navigator',
  81. ],
  82. datasets: [
  83. {
  84. data: [700,500,400,600,300,100],
  85. backgroundColor : ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de'],
  86. }
  87. ]
  88. }
  89. var pieOptions = {
  90. legend: {
  91. display: false
  92. }
  93. }
  94. //Create pie or douhnut chart
  95. // You can switch between pie and douhnut using the method below.
  96. var pieChart = new Chart(pieChartCanvas, {
  97. type: 'doughnut',
  98. data: pieData,
  99. options: pieOptions
  100. })
  101. //-----------------
  102. //- END PIE CHART -
  103. //-----------------
  104. /* jVector Maps
  105. * ------------
  106. * Create a world map with markers
  107. */
  108. $('#world-map-markers').mapael({
  109. map: {
  110. name : "usa_states",
  111. zoom: {
  112. enabled: true,
  113. maxLevel: 10
  114. },
  115. },
  116. }
  117. );
  118. // $('#world-map-markers').vectorMap({
  119. // map : 'world_en',
  120. // normalizeFunction: 'polynomial',
  121. // hoverOpacity : 0.7,
  122. // hoverColor : false,
  123. // backgroundColor : 'transparent',
  124. // regionStyle : {
  125. // initial : {
  126. // fill : 'rgba(210, 214, 222, 1)',
  127. // 'fill-opacity' : 1,
  128. // stroke : 'none',
  129. // 'stroke-width' : 0,
  130. // 'stroke-opacity': 1
  131. // },
  132. // hover : {
  133. // 'fill-opacity': 0.7,
  134. // cursor : 'pointer'
  135. // },
  136. // selected : {
  137. // fill: 'yellow'
  138. // },
  139. // selectedHover: {}
  140. // },
  141. // markerStyle : {
  142. // initial: {
  143. // fill : '#00a65a',
  144. // stroke: '#111'
  145. // }
  146. // },
  147. // markers : [
  148. // {
  149. // latLng: [41.90, 12.45],
  150. // name : 'Vatican City'
  151. // },
  152. // {
  153. // latLng: [43.73, 7.41],
  154. // name : 'Monaco'
  155. // },
  156. // {
  157. // latLng: [-0.52, 166.93],
  158. // name : 'Nauru'
  159. // },
  160. // {
  161. // latLng: [-8.51, 179.21],
  162. // name : 'Tuvalu'
  163. // },
  164. // {
  165. // latLng: [43.93, 12.46],
  166. // name : 'San Marino'
  167. // },
  168. // {
  169. // latLng: [47.14, 9.52],
  170. // name : 'Liechtenstein'
  171. // },
  172. // {
  173. // latLng: [7.11, 171.06],
  174. // name : 'Marshall Islands'
  175. // },
  176. // {
  177. // latLng: [17.3, -62.73],
  178. // name : 'Saint Kitts and Nevis'
  179. // },
  180. // {
  181. // latLng: [3.2, 73.22],
  182. // name : 'Maldives'
  183. // },
  184. // {
  185. // latLng: [35.88, 14.5],
  186. // name : 'Malta'
  187. // },
  188. // {
  189. // latLng: [12.05, -61.75],
  190. // name : 'Grenada'
  191. // },
  192. // {
  193. // latLng: [13.16, -61.23],
  194. // name : 'Saint Vincent and the Grenadines'
  195. // },
  196. // {
  197. // latLng: [13.16, -59.55],
  198. // name : 'Barbados'
  199. // },
  200. // {
  201. // latLng: [17.11, -61.85],
  202. // name : 'Antigua and Barbuda'
  203. // },
  204. // {
  205. // latLng: [-4.61, 55.45],
  206. // name : 'Seychelles'
  207. // },
  208. // {
  209. // latLng: [7.35, 134.46],
  210. // name : 'Palau'
  211. // },
  212. // {
  213. // latLng: [42.5, 1.51],
  214. // name : 'Andorra'
  215. // },
  216. // {
  217. // latLng: [14.01, -60.98],
  218. // name : 'Saint Lucia'
  219. // },
  220. // {
  221. // latLng: [6.91, 158.18],
  222. // name : 'Federated States of Micronesia'
  223. // },
  224. // {
  225. // latLng: [1.3, 103.8],
  226. // name : 'Singapore'
  227. // },
  228. // {
  229. // latLng: [1.46, 173.03],
  230. // name : 'Kiribati'
  231. // },
  232. // {
  233. // latLng: [-21.13, -175.2],
  234. // name : 'Tonga'
  235. // },
  236. // {
  237. // latLng: [15.3, -61.38],
  238. // name : 'Dominica'
  239. // },
  240. // {
  241. // latLng: [-20.2, 57.5],
  242. // name : 'Mauritius'
  243. // },
  244. // {
  245. // latLng: [26.02, 50.55],
  246. // name : 'Bahrain'
  247. // },
  248. // {
  249. // latLng: [0.33, 6.73],
  250. // name : 'São Tomé and Príncipe'
  251. // }
  252. // ]
  253. // })
  254. })