bar-multi-axis.html 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Bar Chart Multi Axis</title>
  5. <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  6. <script src="../dist/Chart.bundle.js"></script>
  7. <style>
  8. canvas {
  9. -moz-user-select: none;
  10. -webkit-user-select: none;
  11. -ms-user-select: none;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <div style="width: 75%">
  17. <canvas id="canvas"></canvas>
  18. </div>
  19. <button id="randomizeData">Randomize Data</button>
  20. <script>
  21. var randomScalingFactor = function() {
  22. return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
  23. };
  24. var randomColorFactor = function() {
  25. return Math.round(Math.random() * 255);
  26. };
  27. var randomColor = function() {
  28. return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
  29. };
  30. var barChartData = {
  31. labels: ["January", "February", "March", "April", "May", "June", "July"],
  32. datasets: [{
  33. label: 'Dataset 1',
  34. backgroundColor: "rgba(220,220,220,0.5)",
  35. yAxisID: "y-axis-1",
  36. data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
  37. }, {
  38. label: 'Dataset 2',
  39. backgroundColor: "rgba(151,187,205,0.5)",
  40. yAxisID: "y-axis-2",
  41. data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
  42. }, {
  43. label: 'Dataset 3',
  44. backgroundColor: [randomColor(), randomColor(), randomColor(), randomColor(), randomColor(), randomColor(), randomColor()],
  45. yAxisID: "y-axis-1",
  46. data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
  47. }]
  48. };
  49. window.onload = function() {
  50. var ctx = document.getElementById("canvas").getContext("2d");
  51. window.myBar = Chart.Bar(ctx, {
  52. data: barChartData,
  53. options: {
  54. responsive: true,
  55. hoverMode: 'label',
  56. hoverAnimationDuration: 400,
  57. stacked: false,
  58. title:{
  59. display:true,
  60. text:"Chart.js Bar Chart - Multi Axis"
  61. },
  62. scales: {
  63. yAxes: [{
  64. type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
  65. display: true,
  66. position: "left",
  67. id: "y-axis-1",
  68. }, {
  69. type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
  70. display: true,
  71. position: "right",
  72. id: "y-axis-2",
  73. gridLines: {
  74. drawOnChartArea: false
  75. }
  76. }],
  77. }
  78. }
  79. });
  80. };
  81. $('#randomizeData').click(function() {
  82. $.each(barChartData.datasets, function(i, dataset) {
  83. if (Chart.helpers.isArray(dataset.backgroundColor)) {
  84. dataset.backgroundColor= [randomColor(), randomColor(), randomColor(), randomColor(), randomColor(), randomColor(), randomColor()];
  85. } else {
  86. dataset.backgroundColor= randomColor();
  87. }
  88. dataset.data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
  89. });
  90. window.myBar.update();
  91. });
  92. </script>
  93. </body>
  94. </html>