line-time-scale.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Line Chart</title>
  5. <script src="../../node_modules/moment/min/moment.min.js"></script>
  6. <script src="../../dist/Chart.bundle.js"></script>
  7. <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  8. <style>
  9. canvas {
  10. -moz-user-select: none;
  11. -webkit-user-select: none;
  12. -ms-user-select: none;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div style="width:75%;">
  18. <canvas id="canvas"></canvas>
  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 timeFormat = 'MM/DD/YYYY HH:mm';
  29. function randomScalingFactor() {
  30. return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
  31. }
  32. function randomColorFactor() {
  33. return Math.round(Math.random() * 255);
  34. }
  35. function randomColor(opacity) {
  36. return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
  37. }
  38. function newDate(days) {
  39. return moment().add(days, 'd').toDate();
  40. }
  41. function newDateString(days) {
  42. return moment().add(days, 'd').format(timeFormat);
  43. }
  44. function newTimestamp(days) {
  45. return moment().add(days, 'd').unix();
  46. }
  47. var config = {
  48. type: 'line',
  49. data: {
  50. labels: [newDate(0), newDate(1), newDate(2), newDate(3), newDate(4), newDate(5), newDate(6)], // Date Objects
  51. datasets: [{
  52. label: "My First dataset",
  53. data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
  54. fill: false,
  55. borderDash: [5, 5],
  56. }, {
  57. label: "My Second dataset",
  58. data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
  59. }, {
  60. label: "Dataset with point data",
  61. data: [{
  62. x: newDateString(0),
  63. y: randomScalingFactor()
  64. }, {
  65. x: newDateString(5),
  66. y: randomScalingFactor()
  67. }, {
  68. x: newDateString(7),
  69. y: randomScalingFactor()
  70. }, {
  71. x: newDateString(15),
  72. y: randomScalingFactor()
  73. }],
  74. fill: false
  75. }]
  76. },
  77. options: {
  78. responsive: true,
  79. title:{
  80. display:true,
  81. text:"Chart.js Time Scale"
  82. },
  83. scales: {
  84. xAxes: [{
  85. type: "time",
  86. time: {
  87. format: timeFormat,
  88. // round: 'day'
  89. tooltipFormat: 'll HH:mm'
  90. },
  91. scaleLabel: {
  92. display: true,
  93. labelString: 'Date'
  94. }
  95. }, ],
  96. yAxes: [{
  97. scaleLabel: {
  98. display: true,
  99. labelString: 'value'
  100. }
  101. }]
  102. },
  103. }
  104. };
  105. $.each(config.data.datasets, function(i, dataset) {
  106. dataset.borderColor = randomColor(0.4);
  107. dataset.backgroundColor = randomColor(0.5);
  108. dataset.pointBorderColor = randomColor(0.7);
  109. dataset.pointBackgroundColor = randomColor(0.5);
  110. dataset.pointBorderWidth = 1;
  111. });
  112. window.onload = function() {
  113. var ctx = document.getElementById("canvas").getContext("2d");
  114. window.myLine = new Chart(ctx, config);
  115. };
  116. $('#randomizeData').click(function() {
  117. $.each(config.data.datasets, function(i, dataset) {
  118. $.each(dataset.data, function(j, dataObj) {
  119. if (typeof dataObj === 'object') {
  120. dataObj.y = randomScalingFactor();
  121. } else {
  122. dataset.data[j] = randomScalingFactor();
  123. }
  124. });
  125. });
  126. window.myLine.update();
  127. });
  128. $('#addDataset').click(function() {
  129. var newDataset = {
  130. label: 'Dataset ' + config.data.datasets.length,
  131. borderColor: randomColor(0.4),
  132. backgroundColor: randomColor(0.5),
  133. pointBorderColor: randomColor(0.7),
  134. pointBackgroundColor: randomColor(0.5),
  135. pointBorderWidth: 1,
  136. data: [],
  137. };
  138. for (var index = 0; index < config.data.labels.length; ++index) {
  139. newDataset.data.push(randomScalingFactor());
  140. }
  141. config.data.datasets.push(newDataset);
  142. window.myLine.update();
  143. });
  144. $('#addData').click(function() {
  145. if (config.data.datasets.length > 0) {
  146. config.data.labels.push(newDate(config.data.labels.length));
  147. for (var index = 0; index < config.data.datasets.length; ++index) {
  148. if (typeof config.data.datasets[index].data[0] === "object") {
  149. config.data.datasets[index].data.push({
  150. x: newDate(config.data.datasets[index].data.length),
  151. y: randomScalingFactor(),
  152. });
  153. } else {
  154. config.data.datasets[index].data.push(randomScalingFactor());
  155. }
  156. }
  157. window.myLine.update();
  158. }
  159. });
  160. $('#removeDataset').click(function() {
  161. config.data.datasets.splice(0, 1);
  162. window.myLine.update();
  163. });
  164. $('#removeData').click(function() {
  165. config.data.labels.splice(-1, 1); // remove the label first
  166. config.data.datasets.forEach(function(dataset, datasetIndex) {
  167. dataset.data.pop();
  168. });
  169. window.myLine.update();
  170. });
  171. </script>
  172. </body>
  173. </html>