While utilizing Chart.js with zoom and pan capabilities, I am attempting to create a function that exports only the content visible on the canvas to a CSV file.
However, I am struggling to identify how to retrieve solely the visible data points after user interaction with zooming and panning.
Although I am aware that inspecting myChart.data.datasets would provide all the data points in the chart, it does not cater to retrieving just the currently visible ones.
var config = {
type: 'line',
data: {
// data received from an API call
},
pan: {
enabled: true,
mode: 'xy'
},
zoom: {
enabled: true,
mode: 'xy'
},
bezierCurve : false
};
};
var ctx = document.getElementById('myChart').getContext('2d');
window.myChart = new Chart(ctx, config);
$('#exportTheseRunsToCSV').on('click', function() {
// something like myChart.getVisibleDataPoints() ???
console.log(chart)
console.log(chart.data.datasets)
});
There should be an internal method for accessing the visible points since I already have a function to export the current visible points as a PNG image, which accurately captures what is currently displayed on the canvas:
<a id="exportTheseRuns" class="text-white" href="#" download="image.png" download><i class="fas fa-download"></i> Export to PNG</a>
$('#exportTheseRuns').on('click', function() {
$('#exportTheseRuns').attr('href', myChart.toBase64Image());
})
The .toBase64Image() function appears to internally achieve what I require, capturing only the visible points. Yet, it returns a Base64 URI which cannot directly be used with my arrayToCSV function.