156 lines
5.0KB

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