You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

126 lines
3.5KB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Polar Area 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"></canvas>
  18. </div>
  19. <button id="randomizeData">Randomize Data</button>
  20. <button id="addData">Add Data</button>
  21. <button id="removeData">Remove Data</button>
  22. <script>
  23. var randomScalingFactor = function() {
  24. return Math.round(Math.random() * 100);
  25. };
  26. var randomColorFactor = function() {
  27. return Math.round(Math.random() * 255);
  28. };
  29. var randomColor = function(opacity) {
  30. return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
  31. };
  32. var config = {
  33. data: {
  34. datasets: [{
  35. data: [
  36. randomScalingFactor(),
  37. randomScalingFactor(),
  38. randomScalingFactor(),
  39. randomScalingFactor(),
  40. randomScalingFactor(),
  41. ],
  42. backgroundColor: [
  43. "#F7464A",
  44. "#46BFBD",
  45. "#FDB45C",
  46. "#949FB1",
  47. "#4D5360",
  48. ],
  49. label: 'My dataset' // for legend
  50. }],
  51. labels: [
  52. "Red",
  53. "Green",
  54. "Yellow",
  55. "Grey",
  56. "Dark Grey"
  57. ]
  58. },
  59. options: {
  60. responsive: true,
  61. legend: {
  62. position: 'top',
  63. },
  64. title: {
  65. display: true,
  66. text: 'Chart.js Polar Area Chart'
  67. },
  68. scale: {
  69. ticks: {
  70. beginAtZero: true
  71. },
  72. reverse: false
  73. },
  74. animation: {
  75. animateRotate: false,
  76. animateScale: true
  77. }
  78. }
  79. };
  80. window.onload = function() {
  81. var ctx = document.getElementById("chart-area");
  82. window.myPolarArea = Chart.PolarArea(ctx, config);
  83. };
  84. $('#randomizeData').click(function() {
  85. $.each(config.data.datasets, function(i, piece) {
  86. $.each(piece.data, function(j, value) {
  87. config.data.datasets[i].data[j] = randomScalingFactor();
  88. config.data.datasets[i].backgroundColor[j] = randomColor();
  89. });
  90. });
  91. window.myPolarArea.update();
  92. });
  93. $('#addData').click(function() {
  94. if (config.data.datasets.length > 0) {
  95. config.data.labels.push('dataset #' + config.data.labels.length);
  96. $.each(config.data.datasets, function(i, dataset) {
  97. dataset.backgroundColor.push(randomColor());
  98. dataset.data.push(randomScalingFactor());
  99. });
  100. window.myPolarArea.update();
  101. }
  102. });
  103. $('#removeData').click(function() {
  104. config.data.labels.pop(); // remove the label first
  105. $.each(config.data.datasets, function(i, dataset) {
  106. dataset.backgroundColor.pop();
  107. dataset.data.pop();
  108. });
  109. window.myPolarArea.update();
  110. });
  111. </script>
  112. </body>
  113. </html>