181 lines
5.2KB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Doughnut 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 id="canvas-holder" style="width:75%">
  17. <canvas id="chart-area" />
  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 randomScalingFactor = function() {
  26. return Math.round(Math.random() * 100);
  27. };
  28. var randomColorFactor = function() {
  29. return Math.round(Math.random() * 255);
  30. };
  31. var randomColor = function(opacity) {
  32. return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
  33. };
  34. var config = {
  35. type: 'doughnut',
  36. data: {
  37. datasets: [{
  38. data: [
  39. randomScalingFactor(),
  40. randomScalingFactor(),
  41. randomScalingFactor(),
  42. randomScalingFactor(),
  43. randomScalingFactor(),
  44. ],
  45. backgroundColor: [
  46. "#F7464A",
  47. "#46BFBD",
  48. "#FDB45C",
  49. "#949FB1",
  50. "#4D5360",
  51. ],
  52. label: 'Dataset 1'
  53. }, {
  54. hidden: true,
  55. data: [
  56. randomScalingFactor(),
  57. randomScalingFactor(),
  58. randomScalingFactor(),
  59. randomScalingFactor(),
  60. randomScalingFactor(),
  61. ],
  62. backgroundColor: [
  63. "#F7464A",
  64. "#46BFBD",
  65. "#FDB45C",
  66. "#949FB1",
  67. "#4D5360",
  68. ],
  69. label: 'Dataset 2'
  70. }, {
  71. data: [
  72. randomScalingFactor(),
  73. randomScalingFactor(),
  74. randomScalingFactor(),
  75. randomScalingFactor(),
  76. randomScalingFactor(),
  77. ],
  78. backgroundColor: [
  79. "#F7464A",
  80. "#46BFBD",
  81. "#FDB45C",
  82. "#949FB1",
  83. "#4D5360",
  84. ],
  85. label: 'Dataset 3'
  86. }],
  87. labels: [
  88. "Red",
  89. "Green",
  90. "Yellow",
  91. "Grey",
  92. "Dark Grey"
  93. ]
  94. },
  95. options: {
  96. responsive: true,
  97. legend: {
  98. position: 'top',
  99. },
  100. title: {
  101. display: true,
  102. text: 'Chart.js Doughnut Chart'
  103. },
  104. animation: {
  105. animateScale: true,
  106. animateRotate: true
  107. }
  108. }
  109. };
  110. window.onload = function() {
  111. var ctx = document.getElementById("chart-area").getContext("2d");
  112. window.myDoughnut = new Chart(ctx, config);
  113. };
  114. $('#randomizeData').click(function() {
  115. $.each(config.data.datasets, function(i, dataset) {
  116. dataset.data = dataset.data.map(function() {
  117. return randomScalingFactor();
  118. });
  119. dataset.backgroundColor = dataset.backgroundColor.map(function() {
  120. return randomColor(0.7);
  121. });
  122. });
  123. window.myDoughnut.update();
  124. });
  125. $('#addDataset').click(function() {
  126. var newDataset = {
  127. backgroundColor: [],
  128. data: [],
  129. label: 'New dataset ' + config.data.datasets.length,
  130. };
  131. for (var index = 0; index < config.data.labels.length; ++index) {
  132. newDataset.data.push(randomScalingFactor());
  133. newDataset.backgroundColor.push(randomColor(0.7));
  134. }
  135. config.data.datasets.push(newDataset);
  136. window.myDoughnut.update();
  137. });
  138. $('#addData').click(function() {
  139. if (config.data.datasets.length > 0) {
  140. config.data.labels.push('data #' + config.data.labels.length);
  141. $.each(config.data.datasets, function(index, dataset) {
  142. dataset.data.push(randomScalingFactor());
  143. dataset.backgroundColor.push(randomColor(0.7));
  144. });
  145. window.myDoughnut.update();
  146. }
  147. });
  148. $('#removeDataset').click(function() {
  149. config.data.datasets.splice(0, 1);
  150. window.myDoughnut.update();
  151. });
  152. $('#removeData').click(function() {
  153. config.data.labels.splice(-1, 1); // remove the label first
  154. config.data.datasets.forEach(function(dataset, datasetIndex) {
  155. dataset.data.pop();
  156. dataset.backgroundColor.pop();
  157. });
  158. window.myDoughnut.update();
  159. });
  160. </script>
  161. </body>
  162. </html>