Question

I have a requirement to Plot a graph with zoom feature using x axis selection, i am using Flot for plotting graph. I have to show the number of points present after zooming.
I am alwayz getting the total length not the Zoomed length.

Kindly Help

Answer 1

In your “plotzoom” callback, you can get min & max x / y co-ordinates back like so (from the examples on the site):

placeholder.bind('plotzoom', function (event, plot) {
    var axes = plot.getAxes();
    $(".message").html("Zooming to x: "  + axes.xaxis.min.toFixed(2)
                       + " – " + axes.xaxis.max.toFixed(2)
                       + " and y: " + axes.yaxis.min.toFixed(2)
                       + " – " + axes.yaxis.max.toFixed(2));
});

You can the use these to count how many points are within this rectangle.

May i suggest using underscore.js filter function to simplify this?

Eg.

var xmin = axes.xaxis.min.toFixed(2);
var xmax = axes.xaxis.max.toFixed(2);
var ymin = axes.yaxis.min.toFixed(2);
var ymax = axes.yaxis.max.toFixed(2);

var points = [{x: 1, y:20} ..some points.. {x: 30, y: -23}];

var shownpoints = _.filter(points, function(point){ 
    return point.x > xmin && 
           point.x < xmax && 
           point.y > ymin && 
           point.y < ymax;
    }
);

This will give an array with points in-between x & y maxims. You can then use length to get the count!