pie.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Pie 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. </head>
  8. <body>
  9. <div id="canvas-holder" style="width:50%">
  10. <canvas id="chart-area" width="300" height="300" />
  11. </div>
  12. <button id="randomizeData">Randomize Data</button>
  13. <button id="addDataset">Add Dataset</button>
  14. <button id="removeDataset">Remove Dataset</button>
  15. <script>
  16. var randomScalingFactor = function() {
  17. return Math.round(Math.random() * 100);
  18. };
  19. var randomColorFactor = function() {
  20. return Math.round(Math.random() * 255);
  21. };
  22. var randomColor = function(opacity) {
  23. return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
  24. };
  25. var config = {
  26. type: 'pie',
  27. data: {
  28. datasets: [{
  29. data: [
  30. randomScalingFactor(),
  31. randomScalingFactor(),
  32. randomScalingFactor(),
  33. randomScalingFactor(),
  34. randomScalingFactor(),
  35. ],
  36. backgroundColor: [
  37. "#F7464A",
  38. "#46BFBD",
  39. "#FDB45C",
  40. "#949FB1",
  41. "#4D5360",
  42. ],
  43. }, {
  44. data: [
  45. randomScalingFactor(),
  46. randomScalingFactor(),
  47. randomScalingFactor(),
  48. randomScalingFactor(),
  49. randomScalingFactor(),
  50. ],
  51. backgroundColor: [
  52. "#F7464A",
  53. "#46BFBD",
  54. "#FDB45C",
  55. "#949FB1",
  56. "#4D5360",
  57. ],
  58. }, {
  59. data: [
  60. randomScalingFactor(),
  61. randomScalingFactor(),
  62. randomScalingFactor(),
  63. randomScalingFactor(),
  64. randomScalingFactor(),
  65. ],
  66. backgroundColor: [
  67. "#F7464A",
  68. "#46BFBD",
  69. "#FDB45C",
  70. "#949FB1",
  71. "#4D5360",
  72. ],
  73. }],
  74. labels: [
  75. "Red",
  76. "Green",
  77. "Yellow",
  78. "Grey",
  79. "Dark Grey"
  80. ]
  81. },
  82. options: {
  83. responsive: true
  84. }
  85. };
  86. window.onload = function() {
  87. var ctx = document.getElementById("chart-area").getContext("2d");
  88. window.myPie = new Chart(ctx, config);
  89. };
  90. $('#randomizeData').click(function() {
  91. $.each(config.data.datasets, function(i, piece) {
  92. $.each(piece.data, function(j, value) {
  93. config.data.datasets[i].data[j] = randomScalingFactor();
  94. config.data.datasets[i].backgroundColor[j] = randomColor(0.7);
  95. });
  96. });
  97. window.myPie.update();
  98. });
  99. $('#addDataset').click(function() {
  100. var newDataset = {
  101. backgroundColor: [randomColor(0.7), randomColor(0.7), randomColor(0.7), randomColor(0.7), randomColor(0.7)],
  102. data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
  103. };
  104. config.data.datasets.push(newDataset);
  105. window.myPie.update();
  106. });
  107. $('#removeDataset').click(function() {
  108. config.data.datasets.splice(0, 1);
  109. window.myPie.update();
  110. });
  111. </script>
  112. </body>
  113. </html>