line-time-point-data.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Time Scale Point Data</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. <br>
  20. <br>
  21. <button id="randomizeData">Randomize Data</button>
  22. <button id="addData">Add Data</button>
  23. <button id="removeData">Remove Data</button>
  24. <script>
  25. function randomScalingFactor() {
  26. return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
  27. }
  28. function randomColorFactor() {
  29. return Math.round(Math.random() * 255);
  30. }
  31. function randomColor(opacity) {
  32. return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
  33. }
  34. function newDate(days) {
  35. return moment().add(days, 'd').toDate();
  36. }
  37. function newDateString(days) {
  38. return moment().add(days, 'd').format();
  39. }
  40. var config = {
  41. type: 'line',
  42. data: {
  43. datasets: [{
  44. label: "Dataset with string point data",
  45. data: [{
  46. x: newDateString(0),
  47. y: randomScalingFactor()
  48. }, {
  49. x: newDateString(2),
  50. y: randomScalingFactor()
  51. }, {
  52. x: newDateString(4),
  53. y: randomScalingFactor()
  54. }, {
  55. x: newDateString(5),
  56. y: randomScalingFactor()
  57. }],
  58. fill: false
  59. }, {
  60. label: "Dataset with date object point data",
  61. data: [{
  62. x: newDate(0),
  63. y: randomScalingFactor()
  64. }, {
  65. x: newDate(2),
  66. y: randomScalingFactor()
  67. }, {
  68. x: newDate(4),
  69. y: randomScalingFactor()
  70. }, {
  71. x: newDate(5),
  72. y: randomScalingFactor()
  73. }],
  74. fill: false
  75. }]
  76. },
  77. options: {
  78. responsive: true,
  79. title:{
  80. display:true,
  81. text:"Chart.js Time Point Data"
  82. },
  83. scales: {
  84. xAxes: [{
  85. type: "time",
  86. display: true,
  87. scaleLabel: {
  88. display: true,
  89. labelString: 'Date'
  90. }
  91. }],
  92. yAxes: [{
  93. display: true,
  94. scaleLabel: {
  95. display: true,
  96. labelString: 'value'
  97. }
  98. }]
  99. }
  100. }
  101. };
  102. $.each(config.data.datasets, function(i, dataset) {
  103. dataset.borderColor = randomColor(0.4);
  104. dataset.backgroundColor = randomColor(0.5);
  105. dataset.pointBorderColor = randomColor(0.7);
  106. dataset.pointBackgroundColor = randomColor(0.5);
  107. dataset.pointBorderWidth = 1;
  108. });
  109. window.onload = function() {
  110. var ctx = document.getElementById("canvas").getContext("2d");
  111. window.myLine = new Chart(ctx, config);
  112. };
  113. $('#randomizeData').click(function() {
  114. $.each(config.data.datasets, function(i, dataset) {
  115. $.each(dataset.data, function(j, dataObj) {
  116. dataObj.y = randomScalingFactor();
  117. });
  118. });
  119. window.myLine.update();
  120. });
  121. $('#addData').click(function() {
  122. if (config.data.datasets.length > 0) {
  123. var lastTime = myLine.scales['x-axis-0'].labelMoments[0].length ? myLine.scales['x-axis-0'].labelMoments[0][myLine.scales['x-axis-0'].labelMoments[0].length - 1] : moment();
  124. var newTime = lastTime
  125. .clone()
  126. .add(1, 'day')
  127. .format('MM/DD/YYYY HH:mm');
  128. for (var index = 0; index < config.data.datasets.length; ++index) {
  129. config.data.datasets[index].data.push({
  130. x: newTime,
  131. y: randomScalingFactor()
  132. });
  133. }
  134. window.myLine.update();
  135. }
  136. });
  137. $('#removeData').click(function() {
  138. config.data.datasets.forEach(function(dataset, datasetIndex) {
  139. dataset.data.pop();
  140. });
  141. window.myLine.update();
  142. });
  143. </script>
  144. </body>
  145. </html>