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.

143 lines
4.6KB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Radar 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. <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 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: 'radar',
  36. data: {
  37. labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
  38. datasets: [{
  39. label: "My First dataset",
  40. backgroundColor: "rgba(220,220,220,0.2)",
  41. pointBackgroundColor: "rgba(220,220,220,1)",
  42. data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
  43. }, {
  44. label: 'Hidden dataset',
  45. hidden: true,
  46. data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
  47. }, {
  48. label: "My Second dataset",
  49. backgroundColor: "rgba(151,187,205,0.2)",
  50. pointBackgroundColor: "rgba(151,187,205,1)",
  51. hoverPointBackgroundColor: "#fff",
  52. pointHighlightStroke: "rgba(151,187,205,1)",
  53. data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
  54. },]
  55. },
  56. options: {
  57. legend: {
  58. position: 'top',
  59. },
  60. title: {
  61. display: true,
  62. text: 'Chart.js Radar Chart'
  63. },
  64. scale: {
  65. reverse: false,
  66. gridLines: {
  67. color: ['black', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
  68. },
  69. ticks: {
  70. beginAtZero: true
  71. }
  72. }
  73. }
  74. };
  75. window.onload = function() {
  76. window.myRadar = new Chart(document.getElementById("canvas"), config);
  77. };
  78. $('#randomizeData').click(function() {
  79. $.each(config.data.datasets, function(i, dataset) {
  80. dataset.data = dataset.data.map(function() {
  81. return randomScalingFactor();
  82. });
  83. });
  84. window.myRadar.update();
  85. });
  86. $('#addDataset').click(function() {
  87. var newDataset = {
  88. label: 'Dataset ' + config.data.datasets.length,
  89. borderColor: randomColor(0.4),
  90. backgroundColor: randomColor(0.5),
  91. pointBorderColor: randomColor(0.7),
  92. pointBackgroundColor: randomColor(0.5),
  93. pointBorderWidth: 1,
  94. data: [],
  95. };
  96. for (var index = 0; index < config.data.labels.length; ++index) {
  97. newDataset.data.push(randomScalingFactor());
  98. }
  99. config.data.datasets.push(newDataset);
  100. window.myRadar.update();
  101. });
  102. $('#addData').click(function() {
  103. if (config.data.datasets.length > 0) {
  104. config.data.labels.push('dataset #' + config.data.labels.length);
  105. $.each(config.data.datasets, function (i, dataset) {
  106. dataset.data.push(randomScalingFactor());
  107. });
  108. window.myRadar.update();
  109. }
  110. });
  111. $('#removeDataset').click(function() {
  112. config.data.datasets.splice(0, 1);
  113. window.myRadar.update();
  114. });
  115. $('#removeData').click(function() {
  116. config.data.labels.pop(); // remove the label first
  117. $.each(config.data.datasets, function(i, dataset) {
  118. dataset.data.pop();
  119. });
  120. window.myRadar.update();
  121. });
  122. </script>
  123. </body>
  124. </html>