123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Scatter Chart</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. data: [{
  33. x: randomScalingFactor(),
  34. y: randomScalingFactor(),
  35. }, {
  36. x: randomScalingFactor(),
  37. y: randomScalingFactor(),
  38. }, {
  39. x: randomScalingFactor(),
  40. y: randomScalingFactor(),
  41. }, {
  42. x: randomScalingFactor(),
  43. y: randomScalingFactor(),
  44. }, {
  45. x: randomScalingFactor(),
  46. y: randomScalingFactor(),
  47. }, {
  48. x: randomScalingFactor(),
  49. y: randomScalingFactor(),
  50. }, {
  51. x: randomScalingFactor(),
  52. y: randomScalingFactor(),
  53. }]
  54. }, {
  55. label: "My Second dataset",
  56. data: [{
  57. x: randomScalingFactor(),
  58. y: randomScalingFactor(),
  59. }, {
  60. x: randomScalingFactor(),
  61. y: randomScalingFactor(),
  62. }, {
  63. x: randomScalingFactor(),
  64. y: randomScalingFactor(),
  65. }, {
  66. x: randomScalingFactor(),
  67. y: randomScalingFactor(),
  68. }, {
  69. x: randomScalingFactor(),
  70. y: randomScalingFactor(),
  71. }, {
  72. x: randomScalingFactor(),
  73. y: randomScalingFactor(),
  74. }, {
  75. x: randomScalingFactor(),
  76. y: randomScalingFactor(),
  77. }]
  78. }]
  79. };
  80. $.each(scatterChartData.datasets, function(i, dataset) {
  81. dataset.borderColor = randomColor(0.4);
  82. dataset.backgroundColor = randomColor(0.1);
  83. dataset.pointBorderColor = randomColor(0.7);
  84. dataset.pointBackgroundColor = randomColor(0.5);
  85. dataset.pointBorderWidth = 1;
  86. });
  87. window.onload = function() {
  88. var ctx = document.getElementById("canvas").getContext("2d");
  89. window.myScatter = Chart.Scatter(ctx, {
  90. data: scatterChartData,
  91. options: {
  92. title: {
  93. display: true,
  94. text: 'Chart.js Scatter Chart'
  95. },
  96. scales: {
  97. xAxes: [{
  98. position: 'top',
  99. gridLines: {
  100. zeroLineColor: "rgba(0,255,0,1)"
  101. },
  102. scaleLabel: {
  103. display: true,
  104. labelString: 'x axis'
  105. }
  106. }],
  107. yAxes: [{
  108. position: 'right',
  109. gridLines: {
  110. zeroLineColor: "rgba(0,255,0,1)"
  111. },
  112. scaleLabel: {
  113. display: true,
  114. labelString: 'y axis'
  115. }
  116. }]
  117. }
  118. }
  119. });
  120. };
  121. $('#randomizeData').click(function() {
  122. scatterChartData.datasets[0].data = [{
  123. x: randomScalingFactor(),
  124. y: randomScalingFactor(),
  125. }, {
  126. x: randomScalingFactor(),
  127. y: randomScalingFactor(),
  128. }, {
  129. x: randomScalingFactor(),
  130. y: randomScalingFactor(),
  131. }, {
  132. x: randomScalingFactor(),
  133. y: randomScalingFactor(),
  134. }, {
  135. x: randomScalingFactor(),
  136. y: randomScalingFactor(),
  137. }, {
  138. x: randomScalingFactor(),
  139. y: randomScalingFactor(),
  140. }, {
  141. x: randomScalingFactor(),
  142. y: randomScalingFactor(),
  143. }];
  144. scatterChartData.datasets[1].data = [{
  145. x: randomScalingFactor(),
  146. y: randomScalingFactor(),
  147. }, {
  148. x: randomScalingFactor(),
  149. y: randomScalingFactor(),
  150. }, {
  151. x: randomScalingFactor(),
  152. y: randomScalingFactor(),
  153. }, {
  154. x: randomScalingFactor(),
  155. y: randomScalingFactor(),
  156. }, {
  157. x: randomScalingFactor(),
  158. y: randomScalingFactor(),
  159. }, {
  160. x: randomScalingFactor(),
  161. y: randomScalingFactor(),
  162. }, {
  163. x: randomScalingFactor(),
  164. y: randomScalingFactor(),
  165. }]
  166. window.myScatter.update();
  167. });
  168. </script>
  169. </body>
  170. </html>