line-logarithmic.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  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. scaleLabel: {
  59. display: true,
  60. labelString: 'x axis'
  61. }
  62. }],
  63. yAxes: [{
  64. display: true,
  65. type: 'logarithmic',
  66. scaleLabel: {
  67. display: true,
  68. labelString: 'y axis'
  69. }
  70. }]
  71. }
  72. }
  73. };
  74. $.each(config.data.datasets, function(i, dataset) {
  75. dataset.borderColor = randomColor(0.4);
  76. dataset.backgroundColor = randomColor(0.5);
  77. dataset.pointBorderColor = randomColor(0.7);
  78. dataset.pointBackgroundColor = randomColor(0.5);
  79. dataset.pointBorderWidth = 1;
  80. });
  81. window.onload = function() {
  82. var ctx = document.getElementById("canvas").getContext("2d");
  83. window.myLine = new Chart(ctx, config);
  84. };
  85. $('#randomizeData').click(function() {
  86. $.each(config.data.datasets, function(i, dataset) {
  87. dataset.data = dataset.data.map(function() {
  88. return randomScalingFactor();
  89. });
  90. });
  91. window.myLine.update();
  92. });
  93. $('#addDataset').click(function() {
  94. var newDataset = {
  95. label: 'Dataset ' + config.data.datasets.length,
  96. borderColor: randomColor(0.4),
  97. backgroundColor: randomColor(0.5),
  98. pointBorderColor: randomColor(0.7),
  99. pointBackgroundColor: randomColor(0.5),
  100. pointBorderWidth: 1,
  101. data: [],
  102. };
  103. for (var index = 0; index < config.data.labels.length; ++index) {
  104. newDataset.data.push(randomScalingFactor());
  105. }
  106. config.data.datasets.push(newDataset);
  107. window.myLine.update();
  108. });
  109. $('#addData').click(function() {
  110. if (config.data.datasets.length > 0) {
  111. var month = MONTHS[config.data.labels.length % MONTHS.length];
  112. config.data.labels.push(month);
  113. for (var index = 0; index < config.data.datasets.length; ++index) {
  114. config.data.datasets[index].data.push(randomScalingFactor());
  115. }
  116. window.myLine.update();
  117. }
  118. });
  119. $('#removeDataset').click(function() {
  120. config.data.datasets.splice(0, 1);
  121. window.myLine.update();
  122. });
  123. $('#removeData').click(function() {
  124. config.data.labels.splice(-1, 1); // remove the label first
  125. config.data.datasets.forEach(function(dataset, datasetIndex) {
  126. dataset.data.pop();
  127. });
  128. window.myLine.update();
  129. });
  130. </script>
  131. </body>
  132. </html>