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.

102 lines
3.4 KiB

1 year ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. "use strict";
  2. $(document).ready(function() {
  3. window.addEventListener('load', resizeGraph, false);
  4. window.addEventListener('resize', resizeGraph, false);
  5. function resizeGraph() {
  6. /*Area chart*/
  7. $("#areachart").html('');
  8. var widchart = $("#areachart").width();
  9. var graph = new Rickshaw.Graph({
  10. element: document.querySelector("#areachart"),
  11. width: widchart,
  12. height: 200,
  13. series: [{
  14. color: 'rgba(159, 241, 244, 0.84)',
  15. data: [
  16. { x: 0, y: 40 },
  17. { x: 1, y: 49 },
  18. { x: 2, y: 38 },
  19. { x: 3, y: 30 },
  20. { x: 4, y: 32 }
  21. ]
  22. }]
  23. });
  24. graph.render();
  25. /*multiple area chart*/
  26. $("#multipleAreachart").html('');
  27. var widMultiChart = $("#multipleAreachart").width();
  28. var graph1 = new Rickshaw.Graph({
  29. element: document.querySelector("#multipleAreachart"),
  30. width: widMultiChart,
  31. height: 200,
  32. renderer: 'area',
  33. stroke: true,
  34. series: [{
  35. data: [{ x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 30 }],
  36. color: 'rgba(100, 221, 187, 0.72)',
  37. stroke: 'rgba(0, 230, 190, 0.92)'
  38. }, {
  39. data: [{ x: 0, y: 10 }, { x: 1, y: 25 }, { x: 2, y: 45 }],
  40. color: 'rgba(205, 251, 243, 0.92)',
  41. stroke: 'rgba(0, 230, 190, 0.45)'
  42. }]
  43. });
  44. graph1.render();
  45. /*Multiple Bars*/
  46. $("#barchart").html('');
  47. var graph2 = new Rickshaw.Graph({
  48. element: document.querySelector("#barchart"),
  49. renderer: 'bar',
  50. stack: false,
  51. series: [{
  52. data: [{ x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 30 }],
  53. color: '#4C5667'
  54. }, {
  55. data: [{ x: 0, y: 20 }, { x: 1, y: 24 }, { x: 2, y: 20 }],
  56. color: '#FB9678'
  57. }]
  58. });
  59. graph2.render();
  60. /*Stacked Bars*/
  61. $("#stackedchart").html('');
  62. var graph3 = new Rickshaw.Graph({
  63. element: document.querySelector("#stackedchart"),
  64. renderer: 'bar',
  65. series: [{
  66. data: [{ x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 60 }, { x: 3, y: 20 }, { x: 4, y: 80 }],
  67. color: '#469FB4'
  68. }, {
  69. data: [{ x: 0, y: 20 }, { x: 1, y: 24 }, { x: 2, y: 50 }, { x: 3, y: 10 }, { x: 4, y: 60 }],
  70. color: '#99D683'
  71. }]
  72. });
  73. graph3.render();
  74. $("#interactivehover").html('');
  75. var widchart = $("#power-card-chart2").width();
  76. var graph4 = new Rickshaw.Graph({
  77. element: document.getElementById("interactivehover"),
  78. width: widchart,
  79. height: 200,
  80. renderer: 'line',
  81. series: [{
  82. color: "#c05020",
  83. data: [{ x: 0, y: 20 }, { x: 1, y: 24 }, { x: 2, y: 50 }, { x: 3, y: 10 }, { x: 4, y: 60 }],
  84. name: 'New York'
  85. }
  86. ]
  87. });
  88. graph4.render();
  89. }
  90. resizeGraph();
  91. });