Using Chart.js with zoom/pan enabled, I am trying to write a function to export only what is visible on the canvas to CSV.
But I cannot figure out how to get only the visible datapoints after the user zooms/pans.
I know I can just look at myChart.data.datasets but that would fetch all the points in the chart, not just the currently visible ones.
var config = {
type: 'line',
data: {
// data is from 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 has to be some internal API call to get the visible points, as I also have a function to export the current visible points to PNG and that only grabs what is currently drawn 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 function .toBase64Image() seems like it internally does what I am looking for, as it will only capture visible points, but then it returns a Base64 URI which I can't use for my arrayToCSV function.
from Chart.js get array of currently visible points on graph
No comments:
Post a Comment