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.

170 lines
5.9KB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title> Animation Callbacks </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. <progress id="animationProgress" max="1" value="0" style="width: 100%"></progress>
  19. </div>
  20. <br>
  21. <br>
  22. <button id="randomizeData">Randomize Data</button>
  23. <button id="addDataset">Add Dataset</button>
  24. <button id="removeDataset">Remove Dataset</button>
  25. <button id="addData">Add Data</button>
  26. <button id="removeData">Remove Data</button>
  27. <script>
  28. var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  29. var randomScalingFactor = function() {
  30. return Math.round(Math.random() * 100);
  31. };
  32. var randomColorFactor = function() {
  33. return Math.round(Math.random() * 255);
  34. };
  35. var randomColor = function(opacity) {
  36. return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
  37. };
  38. var $progress = $('#animationProgress');
  39. var config = {
  40. type: 'line',
  41. data: {
  42. labels: ["January", "February", "March", "April", "May", "June", "July"],
  43. datasets: [{
  44. label: "My First dataset ",
  45. data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
  46. fill: false,
  47. borderDash: [5, 5],
  48. }, {
  49. label: "My Second dataset ",
  50. data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
  51. }]
  52. },
  53. options: {
  54. title:{
  55. display:true,
  56. text:"Chart.js Line Chart - Animation Progress Bar"
  57. },
  58. animation: {
  59. duration: 2000,
  60. onProgress: function(animation) {
  61. $progress.attr({
  62. value: animation.animationObject.currentStep / animation.animationObject.numSteps,
  63. });
  64. },
  65. onComplete: function(animation) {
  66. window.setTimeout(function() {
  67. $progress.attr({
  68. value: 0
  69. });
  70. }, 2000);
  71. }
  72. },
  73. tooltips: {
  74. mode: 'label',
  75. },
  76. scales: {
  77. xAxes: [{
  78. scaleLabel: {
  79. show: true,
  80. labelString: 'Month'
  81. }
  82. }],
  83. yAxes: [{
  84. scaleLabel: {
  85. show: true,
  86. labelString: 'Value'
  87. },
  88. }]
  89. }
  90. }
  91. };
  92. $.each(config.data.datasets, function(i, dataset) {
  93. dataset.borderColor = randomColor(0.4);
  94. dataset.backgroundColor = randomColor(0.5);
  95. dataset.pointBorderColor = randomColor(0.7);
  96. dataset.pointBackgroundColor = randomColor(0.5);
  97. dataset.pointBorderWidth = 1;
  98. });
  99. window.onload = function() {
  100. var ctx = document.getElementById("canvas").getContext("2d");
  101. window.myLine = new Chart(ctx, config);
  102. };
  103. $('#randomizeData').click(function() {
  104. $.each(config.data.datasets, function(i, dataset) {
  105. dataset.data = dataset.data.map(function() {
  106. return randomScalingFactor();
  107. });
  108. });
  109. window.myLine.update();
  110. });
  111. $('#addDataset').click(function() {
  112. var newDataset = {
  113. label: 'Dataset ' + config.data.datasets.length,
  114. borderColor: randomColor(0.4),
  115. backgroundColor: randomColor(0.5),
  116. pointBorderColor: randomColor(0.7),
  117. pointBackgroundColor: randomColor(0.5),
  118. pointBorderWidth: 1,
  119. data: [],
  120. };
  121. for (var index = 0; index < config.data.labels.length; ++index) {
  122. newDataset.data.push(randomScalingFactor());
  123. }
  124. config.data.datasets.push(newDataset);
  125. window.myLine.update();
  126. });
  127. $('#addData').click(function() {
  128. if (config.data.datasets.length > 0) {
  129. var month = MONTHS[config.data.labels.length % MONTHS.length];
  130. config.data.labels.push(month);
  131. $.each(config.data.datasets, function(i, dataset) {
  132. dataset.data.push(randomScalingFactor());
  133. });
  134. window.myLine.update();
  135. }
  136. });
  137. $('#removeDataset').click(function() {
  138. config.data.datasets.splice(0, 1);
  139. window.myLine.update();
  140. });
  141. $('#removeData').click(function() {
  142. config.data.labels.splice(-1, 1); // remove the label first
  143. config.data.datasets.forEach(function(dataset, datasetIndex) {
  144. dataset.data.pop();
  145. });
  146. window.myLine.update();
  147. });
  148. </script>
  149. </body>
  150. </html>