scatter-multi-axis.html 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Scatter Chart Multi Axis</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. <div>
  18. <canvas id="canvas"></canvas>
  19. </div>
  20. </div>
  21. <button id="randomizeData">Randomize Data</button>
  22. <script>
  23. var randomScalingFactor = function() {
  24. return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
  25. };
  26. var randomColor = function(opacity) {
  27. return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
  28. };
  29. var scatterChartData = {
  30. datasets: [{
  31. label: "My First dataset",
  32. xAxisID: "x-axis-1",
  33. yAxisID: "y-axis-1",
  34. data: [{
  35. x: randomScalingFactor(),
  36. y: randomScalingFactor(),
  37. }, {
  38. x: randomScalingFactor(),
  39. y: randomScalingFactor(),
  40. }, {
  41. x: randomScalingFactor(),
  42. y: randomScalingFactor(),
  43. }, {
  44. x: randomScalingFactor(),
  45. y: randomScalingFactor(),
  46. }, {
  47. x: randomScalingFactor(),
  48. y: randomScalingFactor(),
  49. }, {
  50. x: randomScalingFactor(),
  51. y: randomScalingFactor(),
  52. }, {
  53. x: randomScalingFactor(),
  54. y: randomScalingFactor(),
  55. }]
  56. }, {
  57. label: "My Second dataset",
  58. xAxisID: "x-axis-1",
  59. yAxisID: "y-axis-2",
  60. data: [{
  61. x: randomScalingFactor(),
  62. y: randomScalingFactor(),
  63. }, {
  64. x: randomScalingFactor(),
  65. y: randomScalingFactor(),
  66. }, {
  67. x: randomScalingFactor(),
  68. y: randomScalingFactor(),
  69. }, {
  70. x: randomScalingFactor(),
  71. y: randomScalingFactor(),
  72. }, {
  73. x: randomScalingFactor(),
  74. y: randomScalingFactor(),
  75. }, {
  76. x: randomScalingFactor(),
  77. y: randomScalingFactor(),
  78. }, {
  79. x: randomScalingFactor(),
  80. y: randomScalingFactor(),
  81. }]
  82. }]
  83. };
  84. $.each(scatterChartData.datasets, function(i, dataset) {
  85. dataset.borderColor = randomColor(0.4);
  86. dataset.backgroundColor = randomColor(0.1);
  87. dataset.pointBorderColor = randomColor(0.7);
  88. dataset.pointBackgroundColor = randomColor(0.5);
  89. dataset.pointBorderWidth = 1;
  90. });
  91. window.onload = function() {
  92. var ctx = document.getElementById("canvas").getContext("2d");
  93. window.myScatter = Chart.Scatter(ctx, {
  94. data: scatterChartData,
  95. options: {
  96. responsive: true,
  97. hoverMode: 'single',
  98. title: {
  99. display: true,
  100. text: 'Chart.js Scatter Chart - Multi Axis'
  101. },
  102. scales: {
  103. xAxes: [{
  104. position: "bottom",
  105. gridLines: {
  106. zeroLineColor: "rgba(0,0,0,1)"
  107. }
  108. }],
  109. yAxes: [{
  110. type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
  111. display: true,
  112. position: "left",
  113. id: "y-axis-1",
  114. }, {
  115. type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
  116. display: true,
  117. position: "right",
  118. reverse: true,
  119. id: "y-axis-2",
  120. // grid line settings
  121. gridLines: {
  122. drawOnChartArea: false, // only want the grid lines for one axis to show up
  123. },
  124. }],
  125. }
  126. }
  127. });
  128. };
  129. $('#randomizeData').click(function() {
  130. scatterChartData.datasets[0].data = [{
  131. x: randomScalingFactor(),
  132. y: randomScalingFactor(),
  133. }, {
  134. x: randomScalingFactor(),
  135. y: randomScalingFactor(),
  136. }, {
  137. x: randomScalingFactor(),
  138. y: randomScalingFactor(),
  139. }, {
  140. x: randomScalingFactor(),
  141. y: randomScalingFactor(),
  142. }, {
  143. x: randomScalingFactor(),
  144. y: randomScalingFactor(),
  145. }, {
  146. x: randomScalingFactor(),
  147. y: randomScalingFactor(),
  148. }, {
  149. x: randomScalingFactor(),
  150. y: randomScalingFactor(),
  151. }];
  152. scatterChartData.datasets[1].data = [{
  153. x: randomScalingFactor(),
  154. y: randomScalingFactor(),
  155. }, {
  156. x: randomScalingFactor(),
  157. y: randomScalingFactor(),
  158. }, {
  159. x: randomScalingFactor(),
  160. y: randomScalingFactor(),
  161. }, {
  162. x: randomScalingFactor(),
  163. y: randomScalingFactor(),
  164. }, {
  165. x: randomScalingFactor(),
  166. y: randomScalingFactor(),
  167. }, {
  168. x: randomScalingFactor(),
  169. y: randomScalingFactor(),
  170. }, {
  171. x: randomScalingFactor(),
  172. y: randomScalingFactor(),
  173. }];
  174. window.myScatter.update();
  175. });
  176. </script>
  177. </body>
  178. </html>