line-legend.html 6.1KB

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