Theme Inspinia
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

morris-demo.js 3.0KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. $(function() {
  2. Morris.Line({
  3. element: 'morris-one-line-chart',
  4. data: [
  5. { year: '2008', value: 5 },
  6. { year: '2009', value: 10 },
  7. { year: '2010', value: 8 },
  8. { year: '2011', value: 22 },
  9. { year: '2012', value: 8 },
  10. { year: '2014', value: 10 },
  11. { year: '2015', value: 5 }
  12. ],
  13. xkey: 'year',
  14. ykeys: ['value'],
  15. resize: true,
  16. lineWidth:4,
  17. labels: ['Value'],
  18. lineColors: ['#1ab394'],
  19. pointSize:5,
  20. });
  21. Morris.Area({
  22. element: 'morris-area-chart',
  23. data: [{ period: '2010 Q1', iphone: 2666, ipad: null, itouch: 2647 },
  24. { period: '2010 Q2', iphone: 2778, ipad: 2294, itouch: 2441 },
  25. { period: '2010 Q3', iphone: 4912, ipad: 1969, itouch: 2501 },
  26. { period: '2010 Q4', iphone: 3767, ipad: 3597, itouch: 5689 },
  27. { period: '2011 Q1', iphone: 6810, ipad: 1914, itouch: 2293 },
  28. { period: '2011 Q2', iphone: 5670, ipad: 4293, itouch: 1881 },
  29. { period: '2011 Q3', iphone: 4820, ipad: 3795, itouch: 1588 },
  30. { period: '2011 Q4', iphone: 15073, ipad: 5967, itouch: 5175 },
  31. { period: '2012 Q1', iphone: 10687, ipad: 4460, itouch: 2028 },
  32. { period: '2012 Q2', iphone: 8432, ipad: 5713, itouch: 1791 } ],
  33. xkey: 'period',
  34. ykeys: ['iphone', 'ipad', 'itouch'],
  35. labels: ['iPhone', 'iPad', 'iPod Touch'],
  36. pointSize: 2,
  37. hideHover: 'auto',
  38. resize: true,
  39. lineColors: ['#87d6c6', '#54cdb4','#1ab394'],
  40. lineWidth:2,
  41. pointSize:1,
  42. });
  43. Morris.Donut({
  44. element: 'morris-donut-chart',
  45. data: [{ label: "Download Sales", value: 12 },
  46. { label: "In-Store Sales", value: 30 },
  47. { label: "Mail-Order Sales", value: 20 } ],
  48. resize: true,
  49. colors: ['#87d6c6', '#54cdb4','#1ab394'],
  50. });
  51. Morris.Bar({
  52. element: 'morris-bar-chart',
  53. data: [{ y: '2006', a: 60, b: 50 },
  54. { y: '2007', a: 75, b: 65 },
  55. { y: '2008', a: 50, b: 40 },
  56. { y: '2009', a: 75, b: 65 },
  57. { y: '2010', a: 50, b: 40 },
  58. { y: '2011', a: 75, b: 65 },
  59. { y: '2012', a: 100, b: 90 } ],
  60. xkey: 'y',
  61. ykeys: ['a', 'b'],
  62. labels: ['Series A', 'Series B'],
  63. hideHover: 'auto',
  64. resize: true,
  65. barColors: ['#1ab394', '#cacaca'],
  66. });
  67. Morris.Line({
  68. element: 'morris-line-chart',
  69. data: [{ y: '2006', a: 100, b: 90 },
  70. { y: '2007', a: 75, b: 65 },
  71. { y: '2008', a: 50, b: 40 },
  72. { y: '2009', a: 75, b: 65 },
  73. { y: '2010', a: 50, b: 40 },
  74. { y: '2011', a: 75, b: 65 },
  75. { y: '2012', a: 100, b: 90 } ],
  76. xkey: 'y',
  77. ykeys: ['a', 'b'],
  78. labels: ['Series A', 'Series B'],
  79. hideHover: 'auto',
  80. resize: true,
  81. lineColors: ['#54cdb4','#1ab394'],
  82. });
  83. });