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.

146 line
4.7KB

  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: "Skip first dataset",
  40. borderColor: 'rgb(255, 0, 0)',
  41. backgroundColor: "rgba(255,255,0,0.5)",
  42. pointBackgroundColor: "rgba(220,220,220,1)",
  43. data: [NaN, randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
  44. }, {
  45. label: "Skip mid dataset",
  46. borderColor: 'rgb(255, 0, 255)',
  47. backgroundColor: "rgba(0, 255, 0, 0.5)",
  48. pointBackgroundColor: "rgba(151,187,205,1)",
  49. hoverPointBackgroundColor: "#fff",
  50. pointHighlightStroke: "rgba(151,187,205,1)",
  51. data: [randomScalingFactor(), randomScalingFactor(), NaN, randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
  52. },{
  53. label: "Skip last dataset",
  54. borderColor: 'rgb(0, 255, 255)',
  55. backgroundColor: "rgba(0, 0, 255, 0.5)",
  56. pointBackgroundColor: "rgba(151,187,205,1)",
  57. hoverPointBackgroundColor: "#fff",
  58. pointHighlightStroke: "rgba(151,187,205,1)",
  59. data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), NaN]
  60. }]
  61. },
  62. options: {
  63. title:{
  64. display:true,
  65. text:"Chart.js Radar Chart - Skip Points"
  66. },
  67. elements: {
  68. line: {
  69. tension: 0.0,
  70. }
  71. },
  72. scale: {
  73. beginAtZero: true,
  74. reverse: false
  75. }
  76. }
  77. };
  78. window.onload = function() {
  79. window.myRadar = new Chart(document.getElementById("canvas"), config);
  80. };
  81. $('#randomizeData').click(function() {
  82. $.each(config.data.datasets, function(i, dataset) {
  83. dataset.data = dataset.data.map(function() {
  84. return randomScalingFactor();
  85. });
  86. });
  87. window.myRadar.update();
  88. });
  89. $('#addDataset').click(function() {
  90. var newDataset = {
  91. label: 'Dataset ' + config.data.datasets.length,
  92. borderColor: randomColor(0.4),
  93. backgroundColor: randomColor(0.5),
  94. pointBorderColor: randomColor(0.7),
  95. pointBackgroundColor: randomColor(0.5),
  96. pointBorderWidth: 1,
  97. data: [],
  98. };
  99. for (var index = 0; index < config.data.labels.length; ++index) {
  100. newDataset.data.push(randomScalingFactor());
  101. }
  102. config.data.datasets.push(newDataset);
  103. window.myRadar.update();
  104. });
  105. $('#addData').click(function() {
  106. if (config.data.datasets.length > 0) {
  107. config.data.labels.push('dataset #' + config.data.labels.length);
  108. $.each(config.data.datasets, function (i, dataset) {
  109. dataset.data.push(randomScalingFactor());
  110. });
  111. window.myRadar.update();
  112. }
  113. });
  114. $('#removeDataset').click(function() {
  115. config.data.datasets.splice(0, 1);
  116. window.myRadar.update();
  117. });
  118. $('#removeData').click(function() {
  119. config.data.labels.pop(); // remove the label first
  120. $.each(config.data.datasets, function(i, dataset) {
  121. dataset.data.pop();
  122. });
  123. window.myRadar.update();
  124. });
  125. </script>
  126. </body>
  127. </html>