bubble.html 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Bubble Chart</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 type="text/css">
  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 id="container" style="width: 75%;">
  17. <canvas id="canvas"></canvas>
  18. </div>
  19. <button id="randomizeData">Randomize Data</button>
  20. <button id="addDataset">Add Dataset</button>
  21. <button id="removeDataset">Remove Dataset</button>
  22. <button id="addData">Add Data</button>
  23. <button id="removeData">Remove Data</button>
  24. <script>
  25. var DEFAULT_DATASET_SIZE = 7;
  26. var addedCount = 0;
  27. var randomScalingFactor = function() {
  28. return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
  29. };
  30. var randomColorFactor = function() {
  31. return Math.round(Math.random() * 255);
  32. };
  33. var randomColor = function() {
  34. return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
  35. };
  36. var bubbleChartData = {
  37. animation: {
  38. duration: 10000
  39. },
  40. datasets: [{
  41. label: "My First dataset",
  42. backgroundColor: randomColor(),
  43. data: [{
  44. x: randomScalingFactor(),
  45. y: randomScalingFactor(),
  46. r: Math.abs(randomScalingFactor()) / 5,
  47. }, {
  48. x: randomScalingFactor(),
  49. y: randomScalingFactor(),
  50. r: Math.abs(randomScalingFactor()) / 5,
  51. }, {
  52. x: randomScalingFactor(),
  53. y: randomScalingFactor(),
  54. r: Math.abs(randomScalingFactor()) / 5,
  55. }, {
  56. x: randomScalingFactor(),
  57. y: randomScalingFactor(),
  58. r: Math.abs(randomScalingFactor()) / 5,
  59. }, {
  60. x: randomScalingFactor(),
  61. y: randomScalingFactor(),
  62. r: Math.abs(randomScalingFactor()) / 5,
  63. }, {
  64. x: randomScalingFactor(),
  65. y: randomScalingFactor(),
  66. r: Math.abs(randomScalingFactor()) / 5,
  67. }, {
  68. x: randomScalingFactor(),
  69. y: randomScalingFactor(),
  70. r: Math.abs(randomScalingFactor()) / 5,
  71. }]
  72. }, {
  73. label: "My Second dataset",
  74. backgroundColor: randomColor(),
  75. data: [{
  76. x: randomScalingFactor(),
  77. y: randomScalingFactor(),
  78. r: Math.abs(randomScalingFactor()) / 5,
  79. }, {
  80. x: randomScalingFactor(),
  81. y: randomScalingFactor(),
  82. r: Math.abs(randomScalingFactor()) / 5,
  83. }, {
  84. x: randomScalingFactor(),
  85. y: randomScalingFactor(),
  86. r: Math.abs(randomScalingFactor()) / 5,
  87. }, {
  88. x: randomScalingFactor(),
  89. y: randomScalingFactor(),
  90. r: Math.abs(randomScalingFactor()) / 5,
  91. }, {
  92. x: randomScalingFactor(),
  93. y: randomScalingFactor(),
  94. r: Math.abs(randomScalingFactor()) / 5,
  95. }, {
  96. x: randomScalingFactor(),
  97. y: randomScalingFactor(),
  98. r: Math.abs(randomScalingFactor()) / 5,
  99. }, {
  100. x: randomScalingFactor(),
  101. y: randomScalingFactor(),
  102. r: Math.abs(randomScalingFactor()) / 5,
  103. }]
  104. }]
  105. };
  106. window.onload = function() {
  107. var ctx = document.getElementById("canvas").getContext("2d");
  108. window.myChart = new Chart(ctx, {
  109. type: 'bubble',
  110. data: bubbleChartData,
  111. options: {
  112. responsive: true,
  113. title:{
  114. display:true,
  115. text:'Chart.js Bubble Chart'
  116. },
  117. }
  118. });
  119. };
  120. $('#randomizeData').click(function() {
  121. var zero = Math.random() < 0.2 ? true : false;
  122. $.each(bubbleChartData.datasets, function(i, dataset) {
  123. dataset.backgroundColor = randomColor();
  124. dataset.data = dataset.data.map(function() {
  125. return {
  126. x: randomScalingFactor(),
  127. y: randomScalingFactor(),
  128. r: Math.abs(randomScalingFactor()) / 5,
  129. };
  130. });
  131. });
  132. window.myChart.update();
  133. });
  134. $('#addDataset').click(function() {
  135. ++addedCount;
  136. var newDataset = {
  137. label: "My added dataset " + addedCount,
  138. backgroundColor: randomColor(),
  139. data: []
  140. };
  141. for (var index = 0; index < DEFAULT_DATASET_SIZE; ++index) {
  142. newDataset.data.push({
  143. x: randomScalingFactor(),
  144. y: randomScalingFactor(),
  145. r: Math.abs(randomScalingFactor()) / 5,
  146. });
  147. }
  148. bubbleChartData.datasets.push(newDataset);
  149. window.myChart.update();
  150. });
  151. $('#addData').click(function() {
  152. if (bubbleChartData.datasets.length > 0) {
  153. for (var index = 0; index < bubbleChartData.datasets.length; ++index) {
  154. bubbleChartData.datasets[index].data.push({
  155. x: randomScalingFactor(),
  156. y: randomScalingFactor(),
  157. r: Math.abs(randomScalingFactor()) / 5,
  158. });
  159. }
  160. window.myChart.update();
  161. }
  162. });
  163. $('#removeDataset').click(function() {
  164. bubbleChartData.datasets.splice(0, 1);
  165. window.myChart.update();
  166. });
  167. $('#removeData').click(function() {
  168. bubbleChartData.datasets.forEach(function(dataset, datasetIndex) {
  169. dataset.data.pop();
  170. });
  171. window.myChart.update();
  172. });
  173. </script>
  174. </body>
  175. </html>