dashboard2.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490
  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 : "world_countries",
  111. zoom: {
  112. enabled: true,
  113. maxLevel: 10
  114. },
  115. defaultPlot: {
  116. size: 12,
  117. attrs: {
  118. "stroke-width": 0,
  119. "stroke-linejoin": "round"
  120. },
  121. attrsHover: {
  122. size: 15,
  123. "fill": '#28a745',
  124. "stroke-width": 0,
  125. animDuration: 0
  126. },
  127. }
  128. },
  129. plots: {
  130. "marker1": {
  131. latitude: 41.90,
  132. longitude: 12.45,
  133. href: '#',
  134. tooltip: {
  135. content: 'Vatican City'
  136. }
  137. },
  138. "marker2": {
  139. latitude: 43.73,
  140. longitude: 7.41,
  141. href: '#',
  142. tooltip: {
  143. content: 'Monaco'
  144. }
  145. },
  146. "marker3": {
  147. latitude: -0.52,
  148. longitude: 166.93,
  149. href: '#',
  150. tooltip: {
  151. content: 'Nauru'
  152. }
  153. },
  154. "marker4": {
  155. latitude: -8.51,
  156. longitude: 179.21,
  157. href: '#',
  158. tooltip: {
  159. content: 'Tuvalu'
  160. }
  161. },
  162. "marker5": {
  163. latitude: 43.93,
  164. longitude: 12.46,
  165. href: '#',
  166. tooltip: {
  167. content: 'San Marino'
  168. }
  169. },
  170. "marker6": {
  171. latitude: 47.14,
  172. longitude: 9.52,
  173. href: '#',
  174. tooltip: {
  175. content: 'Liechtenstein'
  176. }
  177. },
  178. "marker7": {
  179. latitude: 7.11,
  180. longitude: 171.06,
  181. href: '#',
  182. tooltip: {
  183. content: 'Marshall Islands'
  184. }
  185. },
  186. "marker8": {
  187. latitude: 17.3,
  188. longitude: -62.73,
  189. href: '#',
  190. tooltip: {
  191. content: 'Saint Kitts and Nevis'
  192. }
  193. },
  194. "marker9": {
  195. latitude: 3.2,
  196. longitude: 73.22,
  197. href: '#',
  198. tooltip: {
  199. content: 'Maldives'
  200. }
  201. },
  202. "marker10": {
  203. latitude: 35.88,
  204. longitude: 14.5,
  205. href: '#',
  206. tooltip: {
  207. content: 'Malta'
  208. }
  209. },
  210. "marker11": {
  211. latitude: 12.05,
  212. longitude: -61.75,
  213. href: '#',
  214. tooltip: {
  215. content: 'Grenada'
  216. }
  217. },
  218. "marker12": {
  219. latitude: 13.16,
  220. longitude: -61.23,
  221. href: '#',
  222. tooltip: {
  223. content: 'Saint Vincent and the Grenadines'
  224. }
  225. },
  226. "marker13": {
  227. latitude: 13.16,
  228. longitude: -59.55,
  229. href: '#',
  230. tooltip: {
  231. content: 'Barbados'
  232. }
  233. },
  234. "marker14": {
  235. latitude: 17.11,
  236. longitude: -61.85,
  237. href: '#',
  238. tooltip: {
  239. content: 'Antigua and Barbuda'
  240. }
  241. },
  242. "marker15": {
  243. latitude: -4.61,
  244. longitude: 55.45,
  245. href: '#',
  246. tooltip: {
  247. content: 'Seychelles'
  248. }
  249. },
  250. "marker16": {
  251. latitude: 7.35,
  252. longitude: 134.46,
  253. href: '#',
  254. tooltip: {
  255. content: 'Palau'
  256. }
  257. },
  258. "marker17": {
  259. latitude: 42.5,
  260. longitude: 1.51,
  261. href: '#',
  262. tooltip: {
  263. content: 'Andorra'
  264. }
  265. },
  266. "marker18": {
  267. latitude: 14.01,
  268. longitude: -60.98,
  269. href: '#',
  270. tooltip: {
  271. content: 'Saint Lucia'
  272. }
  273. },
  274. "marker19": {
  275. latitude: 6.91,
  276. longitude: 158.18,
  277. href: '#',
  278. tooltip: {
  279. content: 'Federated States of Micronesia'
  280. }
  281. },
  282. "marker20": {
  283. latitude: 1.3,
  284. longitude: 103.8,
  285. href: '#',
  286. tooltip: {
  287. content: 'Singapore'
  288. }
  289. },
  290. "marker21": {
  291. latitude: 1.46,
  292. longitude: 173.03,
  293. href: '#',
  294. tooltip: {
  295. content: 'Kiribati'
  296. }
  297. },
  298. "marker22": {
  299. latitude: -21.13,
  300. longitude: -175.2,
  301. href: '#',
  302. tooltip: {
  303. content: 'Tonga'
  304. }
  305. },
  306. "marker23": {
  307. latitude: 15.3,
  308. longitude: -61.38,
  309. href: '#',
  310. tooltip: {
  311. content: 'Dominica'
  312. }
  313. },
  314. "marker24": {
  315. latitude: -20.2,
  316. longitude: 57.5,
  317. href: '#',
  318. tooltip: {
  319. content: 'Mauritius'
  320. }
  321. },
  322. "marker25": {
  323. latitude: 26.02,
  324. longitude: 50.55,
  325. href: '#',
  326. tooltip: {
  327. content: 'Bahrain'
  328. }
  329. },
  330. "marker26": {
  331. latitude: 0.33,
  332. longitude: 6.73,
  333. href: '#',
  334. tooltip: {
  335. content: 'São Tomé and Príncipe'
  336. }
  337. }
  338. }
  339. }
  340. );
  341. // $('#world-map-markers').vectorMap({
  342. // map : 'world_en',
  343. // normalizeFunction: 'polynomial',
  344. // hoverOpacity : 0.7,
  345. // hoverColor : false,
  346. // backgroundColor : 'transparent',
  347. // regionStyle : {
  348. // initial : {
  349. // fill : 'rgba(210, 214, 222, 1)',
  350. // 'fill-opacity' : 1,
  351. // stroke : 'none',
  352. // 'stroke-width' : 0,
  353. // 'stroke-opacity': 1
  354. // },
  355. // hover : {
  356. // 'fill-opacity': 0.7,
  357. // cursor : 'pointer'
  358. // },
  359. // selected : {
  360. // fill: 'yellow'
  361. // },
  362. // selectedHover: {}
  363. // },
  364. // markerStyle : {
  365. // initial: {
  366. // fill : '#00a65a',
  367. // stroke: '#111'
  368. // }
  369. // },
  370. // markers : [
  371. // {
  372. // latLng: [41.90, 12.45],
  373. // name : 'Vatican City'
  374. // },
  375. // {
  376. // latLng: [43.73, 7.41],
  377. // name : 'Monaco'
  378. // },
  379. // {
  380. // latLng: [-0.52, 166.93],
  381. // name : 'Nauru'
  382. // },
  383. // {
  384. // latLng: [-8.51, 179.21],
  385. // name : 'Tuvalu'
  386. // },
  387. // {
  388. // latLng: [43.93, 12.46],
  389. // name : 'San Marino'
  390. // },
  391. // {
  392. // latLng: [47.14, 9.52],
  393. // name : 'Liechtenstein'
  394. // },
  395. // {
  396. // latLng: [7.11, 171.06],
  397. // name : 'Marshall Islands'
  398. // },
  399. // {
  400. // latLng: [17.3, -62.73],
  401. // name : 'Saint Kitts and Nevis'
  402. // },
  403. // {
  404. // latLng: [3.2, 73.22],
  405. // name : 'Maldives'
  406. // },
  407. // {
  408. // latLng: [35.88, 14.5],
  409. // name : 'Malta'
  410. // },
  411. // {
  412. // latLng: [12.05, -61.75],
  413. // name : 'Grenada'
  414. // },
  415. // {
  416. // latLng: [13.16, -61.23],
  417. // name : 'Saint Vincent and the Grenadines'
  418. // },
  419. // {
  420. // latLng: [13.16, -59.55],
  421. // name : 'Barbados'
  422. // },
  423. // {
  424. // latLng: [17.11, -61.85],
  425. // name : 'Antigua and Barbuda'
  426. // },
  427. // {
  428. // latLng: [-4.61, 55.45],
  429. // name : 'Seychelles'
  430. // },
  431. // {
  432. // latLng: [7.35, 134.46],
  433. // name : 'Palau'
  434. // },
  435. // {
  436. // latLng: [42.5, 1.51],
  437. // name : 'Andorra'
  438. // },
  439. // {
  440. // latLng: [14.01, -60.98],
  441. // name : 'Saint Lucia'
  442. // },
  443. // {
  444. // latLng: [6.91, 158.18],
  445. // name : 'Federated States of Micronesia'
  446. // },
  447. // {
  448. // latLng: [1.3, 103.8],
  449. // name : 'Singapore'
  450. // },
  451. // {
  452. // latLng: [1.46, 173.03],
  453. // name : 'Kiribati'
  454. // },
  455. // {
  456. // latLng: [-21.13, -175.2],
  457. // name : 'Tonga'
  458. // },
  459. // {
  460. // latLng: [15.3, -61.38],
  461. // name : 'Dominica'
  462. // },
  463. // {
  464. // latLng: [-20.2, 57.5],
  465. // name : 'Mauritius'
  466. // },
  467. // {
  468. // latLng: [26.02, 50.55],
  469. // name : 'Bahrain'
  470. // },
  471. // {
  472. // latLng: [0.33, 6.73],
  473. // name : 'São Tomé and Príncipe'
  474. // }
  475. // ]
  476. // })
  477. })