Get list of data points in the canvas after zoom jqplot

Question

I really appreciate if someone can help me out on this. We are using Jqplot to plot some statistical data and like the zooming functionality.

Specifically we want to use the examples in

http://www.jqplot.com/deploy/dist/examples/zoom1.html and

http://www.jqplot.com/deploy/dist/examples/zoomOptions.html

One of the thing we need to do is to recalculate some values we display on the page like standard deviation, mean etc for the points visible in the graph after zooming in. For this we need to get the list of data points that are there (remain) on the graph after we zoomed in. So ideally we are looking at a method which returns the current data set visible in the graph after I zoomed in.

I looked up the API documentation, but no such method seems to be available. So I would really appreciate if somebody helps with how I should proceed with this.

Thanks....Amit

Answer 1

Ok, so after a lot of digging through the code, there is not really any simple way to get this data, but, there is a way.

In the solution below, I have a zoomChart jqPLot obj that acts as a zoom-proxy to my main jqPLot, called chart. Presumably, if you don't have a proxy, this should work just as well, as long as you bind to the right object.

What I'm doing is binding a custom function to the 'jqplotZoom' event, which is called after a zoom action has been completed.

    zoomChart.target.bind('jqplotZoom', function(ev, gridpos, datapos, plot, cursor){
        var plotData =  plot.series[0].data;
        for (var i=0; i< plotData.length; i++) {
            if(plotData[i][0] >= chart.axes.xaxis.min && plotData[i][0] <= chart.axes.xaxis.max ) {
                //this dataset from the original is within the zoomed region
                //You can save these datapoints in a new array
                //This new array will contain your zoom dataset
                //for ex: zoomDataset.push(plotData[i]);
            }
        }
    });

Does this make sense? Essentially, the chart.axes.xaxis contains the bounds of the zoomed area, and the plot.series[N].data is all your original data in the chart format.

Note that I used chart because I originally created var chart = $.jqplot("chartDiv", ...

You should use whatever variable name you gave your plot. Hope this helps!