Saturday, 2 November 2019

Chart.js get array of currently visible points on graph

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