line-multi-axis.html 3.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Line Chart Multiple Axes</title>
  5. <script src="../dist/Chart.bundle.js"></script>
  6. <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.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.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
  23. };
  24. var randomColor = function(opacity) {
  25. return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
  26. };
  27. var lineChartData = {
  28. labels: ["January", "February", "March", "April", "May", "June", "July"],
  29. datasets: [{
  30. label: "My First dataset",
  31. data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
  32. yAxisID: "y-axis-1",
  33. }, {
  34. label: "My Second dataset",
  35. data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
  36. yAxisID: "y-axis-2"
  37. }]
  38. };
  39. $.each(lineChartData.datasets, function(i, dataset) {
  40. dataset.borderColor = randomColor(0.4);
  41. dataset.backgroundColor = randomColor(1);
  42. dataset.pointBorderColor = randomColor(0.7);
  43. dataset.pointBackgroundColor = randomColor(0.5);
  44. dataset.pointBorderWidth = 1;
  45. });
  46. window.onload = function() {
  47. var ctx = document.getElementById("canvas").getContext("2d");
  48. window.myLine = Chart.Line(ctx, {
  49. data: lineChartData,
  50. options: {
  51. responsive: true,
  52. hoverMode: 'label',
  53. stacked: false,
  54. title:{
  55. display:true,
  56. text:'Chart.js Line Chart - Multi Axis'
  57. },
  58. scales: {
  59. xAxes: [{
  60. display: true,
  61. gridLines: {
  62. offsetGridLines: false
  63. }
  64. }],
  65. yAxes: [{
  66. type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
  67. display: true,
  68. position: "left",
  69. id: "y-axis-1",
  70. }, {
  71. type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
  72. display: true,
  73. position: "right",
  74. id: "y-axis-2",
  75. // grid line settings
  76. gridLines: {
  77. drawOnChartArea: false, // only want the grid lines for one axis to show up
  78. },
  79. }],
  80. }
  81. }
  82. });
  83. };
  84. $('#randomizeData').click(function() {
  85. lineChartData.datasets[0].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
  86. lineChartData.datasets[1].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
  87. window.myLine.update();
  88. });
  89. </script>
  90. </body>
  91. </html>