line-boundaries.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <!DOCTYPE html>
  2. <html lang="en-US">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>area > boundaries | Chart.js sample</title>
  8. <link rel="stylesheet" type="text/css" href="../../style.css">
  9. <script src="../../../dist/Chart.bundle.js"></script>
  10. <script src="../../utils.js"></script>
  11. <script src="analyser.js"></script>
  12. </head>
  13. <body>
  14. <div class="content">
  15. <div class="wrapper col-2"><canvas id="chart-0"></canvas></div>
  16. <div class="wrapper col-2"><canvas id="chart-1"></canvas></div>
  17. <div class="wrapper col-2"><canvas id="chart-2"></canvas></div>
  18. <div class="wrapper col-2"><canvas id="chart-3"></canvas></div>
  19. <div class="toolbar">
  20. <button onclick="toggleSmooth(this)">Smooth</button>
  21. <button onclick="randomize(this)">Randomize</button>
  22. </div>
  23. </div>
  24. <script>
  25. var presets = window.chartColors;
  26. var utils = Samples.utils;
  27. var inputs = {
  28. min: -100,
  29. max: 100,
  30. count: 8,
  31. decimals: 2,
  32. continuity: 1
  33. };
  34. function generateData(config) {
  35. return utils.numbers(Chart.helpers.merge(inputs, config || {}));
  36. }
  37. function generateLabels(config) {
  38. return utils.months(Chart.helpers.merge({
  39. count: inputs.count,
  40. section: 3
  41. }, config || {}));
  42. }
  43. var options = {
  44. maintainAspectRatio: false,
  45. spanGaps: false,
  46. elements: {
  47. line: {
  48. tension: 0.000001
  49. }
  50. },
  51. plugins: {
  52. filler: {
  53. propagate: false
  54. }
  55. },
  56. scales: {
  57. xAxes: [{
  58. ticks: {
  59. autoSkip: false,
  60. maxRotation: 0
  61. }
  62. }]
  63. }
  64. };
  65. [false, 'origin', 'start', 'end'].forEach(function(boundary, index) {
  66. // reset the random seed to generate the same data for all charts
  67. utils.srand(8);
  68. new Chart('chart-' + index, {
  69. type: 'line',
  70. data: {
  71. labels: generateLabels(),
  72. datasets: [{
  73. backgroundColor: utils.transparentize(presets.red),
  74. borderColor: presets.red,
  75. data: generateData(),
  76. label: 'Dataset',
  77. fill: boundary
  78. }]
  79. },
  80. options: Chart.helpers.merge(options, {
  81. title: {
  82. text: 'fill: ' + boundary,
  83. display: true
  84. }
  85. })
  86. });
  87. });
  88. // eslint-disable-next-line no-unused-vars
  89. function toggleSmooth(btn) {
  90. var value = btn.classList.toggle('btn-on');
  91. Chart.helpers.each(Chart.instances, function(chart) {
  92. chart.options.elements.line.tension = value ? 0.4 : 0.000001;
  93. chart.update();
  94. });
  95. }
  96. // eslint-disable-next-line no-unused-vars
  97. function randomize() {
  98. var seed = utils.rand();
  99. Chart.helpers.each(Chart.instances, function(chart) {
  100. utils.srand(seed);
  101. chart.data.datasets.forEach(function(dataset) {
  102. dataset.data = generateData();
  103. });
  104. chart.update();
  105. });
  106. }
  107. </script>
  108. </body>
  109. </html>