FlotJS: Showing only part of the plotted data

Question

I have a real-time flot chart showing bitrate values that are updated within an interval. I perform an API call to the backend to get the last 3 minutes and plot them.

Now, I want to add panable capabilities to the chart, so the user can be able to move backwards in the time. I can correctly set the limits to the xaxis panRange (first value and last value received). The idea is to load the page showing the last 3 minutes, but you can go back. Simple.

The problem is that flot is plotting and showing every value I get from the backend and I cannot find any configuration/option to specify the "visible" range.

I have though using the zoom to delimit the visible area of the chart, but it will require to recalculate the zoom on each data update.

Thanks

Answer 1

You can use the xaxis.min and xaxis.max options to specify the visible range:

var options = {
    xaxis: {
      min: 3,
      max: 5
    }
}

This JSFiddle has an example of setting the min and max values to limit the visible range of data with basic zoom and pan functionality.