combo-time-scale.html 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Line Chart - Combo Time Scale</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 newDateString(days) {
  39. return moment().add(days, 'd').format(timeFormat);
  40. }
  41. var config = {
  42. type: 'bar',
  43. data: {
  44. labels: [newDateString(0), newDateString(1), newDateString(2), newDateString(3), newDateString(4), newDateString(5), newDateString(6)],
  45. datasets: [{
  46. type: 'bar',
  47. label: 'Dataset 1',
  48. backgroundColor: "rgba(151,187,205,0.5)",
  49. data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
  50. borderColor: 'white',
  51. borderWidth: 2
  52. }, {
  53. type: 'bar',
  54. label: 'Dataset 2',
  55. backgroundColor: "rgba(151,187,205,0.5)",
  56. data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
  57. borderColor: 'white',
  58. borderWidth: 2
  59. }, {
  60. type: 'line',
  61. label: 'Dataset 3',
  62. backgroundColor: "rgba(220,220,220,0.5)",
  63. data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
  64. }, ]
  65. },
  66. options: {
  67. showLines: true,
  68. responsive: true,
  69. title:{
  70. display:true,
  71. text:"Chart.js Combo Time Scale"
  72. },
  73. scales: {
  74. xAxes: [{
  75. type: "time",
  76. display: true,
  77. time: {
  78. format: timeFormat,
  79. // round: 'day'
  80. }
  81. }],
  82. },
  83. }
  84. };
  85. $.each(config.data.datasets, function(i, dataset) {
  86. dataset.borderColor = randomColor(0.4);
  87. dataset.backgroundColor = randomColor(0.5);
  88. dataset.pointBorderColor = randomColor(0.7);
  89. dataset.pointBackgroundColor = randomColor(0.5);
  90. dataset.pointBorderWidth = 1;
  91. });
  92. window.onload = function() {
  93. var ctx = document.getElementById("canvas").getContext("2d");
  94. window.myLine = new Chart(ctx, config);
  95. };
  96. $('#randomizeData').click(function() {
  97. $.each(config.data.datasets, function(i, dataset) {
  98. dataset.data = dataset.data.map(function() {
  99. return randomScalingFactor();
  100. });
  101. });
  102. window.myLine.update();
  103. });
  104. $('#addDataset').click(function() {
  105. var newDataset = {
  106. label: 'Dataset ' + config.data.datasets.length,
  107. borderColor: randomColor(0.4),
  108. backgroundColor: randomColor(0.5),
  109. pointBorderColor: randomColor(0.7),
  110. pointBackgroundColor: randomColor(0.5),
  111. pointBorderWidth: 1,
  112. data: [],
  113. };
  114. for (var index = 0; index < config.data.labels.length; ++index) {
  115. newDataset.data.push(randomScalingFactor());
  116. }
  117. config.data.datasets.push(newDataset);
  118. window.myLine.update();
  119. });
  120. $('#addData').click(function() {
  121. if (config.data.datasets.length > 0) {
  122. config.data.labels.push(newDateString(config.data.labels.length));
  123. for (var index = 0; index < config.data.datasets.length; ++index) {
  124. config.data.datasets[index].data.push(randomScalingFactor());
  125. }
  126. window.myLine.update();
  127. }
  128. });
  129. $('#removeDataset').click(function() {
  130. config.data.datasets.splice(0, 1);
  131. window.myLine.update();
  132. });
  133. $('#removeData').click(function() {
  134. config.data.labels.splice(-1, 1); // remove the label first
  135. config.data.datasets.forEach(function(dataset, datasetIndex) {
  136. config.data.datasets[datasetIndex].data.pop();
  137. });
  138. window.myLine.update();
  139. });
  140. </script>
  141. </body>
  142. </html>