[ Mini Kiebo ]
Server: Windows NT AKFAR_SERVER 10.0 build 26200 (Windows 10) AMD64
Path:
D:
/
xampp
/
htdocs
/
pmb
/
chartjs
/
samples
/
charts
/
line
/
[
Home
]
File: multi-axis.html
<!doctype html> <html> <head> <title>Line Chart Multiple Axes</title> <script src="../../../Chart.bundle.js"></script> <script src="../../utils.js"></script> <style> canvas { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } </style> </head> <body> <div style="width:75%;"> <canvas id="canvas"></canvas> </div> <button id="randomizeData">Randomize Data</button> <script> var lineChartData = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'My First dataset', borderColor: window.chartColors.red, backgroundColor: window.chartColors.red, fill: false, data: [ randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor() ], yAxisID: 'y-axis-1', }, { label: 'My Second dataset', borderColor: window.chartColors.blue, backgroundColor: window.chartColors.blue, fill: false, data: [ randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor() ], yAxisID: 'y-axis-2' }] }; window.onload = function() { var ctx = document.getElementById('canvas').getContext('2d'); window.myLine = Chart.Line(ctx, { data: lineChartData, options: { responsive: true, hoverMode: 'index', stacked: false, title: { display: true, text: 'Chart.js Line Chart - Multi Axis' }, scales: { yAxes: [{ type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance display: true, position: 'left', id: 'y-axis-1', }, { type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance display: true, position: 'right', id: 'y-axis-2', // grid line settings gridLines: { drawOnChartArea: false, // only want the grid lines for one axis to show up }, }], } } }); }; document.getElementById('randomizeData').addEventListener('click', function() { lineChartData.datasets.forEach(function(dataset) { dataset.data = dataset.data.map(function() { return randomScalingFactor(); }); }); window.myLine.update(); }); </script> </body> </html>