jQuery Flot.js: Get only currently visible data points

Question

I need to get the currently visible data points after zooming (or panning, if you bind that event as well).

Flot provides a few methods but none that I can figure out for the currently visible data points.

$("#graphContainer").bind("plotzoom", function (event, plot) {
    getCurrentData(plot);
});

function getCurrentData(plot) {
    console.log(plot.getAxes());
    console.log(plot.getData());
};

The getAxes() method gives you access to the ranges, and current ticks. The getData() method gives you access to ALL data points, in an array (var points = plot.getData(); => points[0].data).

I haven't found a way to extract only the visible points after zooming, which is what I'm trying to do. I'd greatly appreciate any help with this.

Answer 1

You have to do that yourself using the array filter() function with something like

var plotData = plot.getData()[0];
var visiblePoints = plotData.data.filter(dp =>
    dp[0] >= plotData.xaxis.min && dp[0] <= plotData.xaxis.max &&
    dp[1] >= plotData.yaxis.min && dp[1] <= plotData.yaxis.max);