0

I am using Flot successfully to chart usage for a project I am working on with a time series. The flot graph starts with the last 24 hours and allows panning and zooming.

The data is being sampled on the server every 15 minutes, converted to json and downloaded by the flot graph via busy-polling with AJAX (it checks for changes).

After a couple of months I have so much data (of course) that the array has become rather large. I would like to limit the json downloaded from the server to only contain the visible spectrum of the flot graph. To limit the initial download is easy, but I don't know how to handle the panning and zooming. I already have event handlers bound to panning and zooming, but they fire for every move (panning in particular).

Is it possible to detect when panning starts and ends?

Jamgold
  • 1,716
  • 1
  • 14
  • 18
  • After hacking jquery.flot.navigate.js and injecting some state in onDragStart and onDragEnd I was able to make educated decisions in plotpan event. It occurred to me that I can also check if the new xaxis min/max are already present in the data array and only AJAX fetch the delta – Jamgold Aug 27 '12 at 16:57

1 Answers1

0

[Edited because I missed the fact that you already have handlers bound]

If you're already trapping plotpan events, you can just debounce it. Add a timer that fires a certain amount of time (500 milliseconds, for example) after a pan, and is reset each time plotpan fires. This way the action only runs once at the end of many consecutive events.

A very simple example:

var delay = null;
element.on("plotpan", function() {
    if (delay) clearTimeout(delay);
    delay = setTimeout(function() {
        // do your stuff here
        delay = null;
    }, 500);
});
DNS
  • 37,249
  • 18
  • 95
  • 132