rangeChanged firing while panning

[fdelvalle]

Hi,
rangeChanged event is firing constantly while panning in Chart. I think this should the expected behaviour for rangeChanging, not for rangeChanged.

This is the sequence of events I expect:

– Mouse down (start pan)
– rangeChanging
– rangeChanging
– rangeChanging
– …
– rangeChanging
– Mouse up (end pan)
– rangeChanged

This is what is happening right now:

– Mouse down (start pan)
– rangeChanging
– rangeChanged
– rangeChanging
– rangeChanged
– rangeChanging
– rangeChanged
– …
– rangeChanging
– rangeChanged
– Mouse up (end pan)

You can see the problem here

[Ananya]

@fdelvalle,

While panning, the axis range is being changed as you move the mouse along the chart and hence rangeChanged will be fired at every instance. In contrast, while zooming the range is changed only once after the desired range has been selected, and as a result rangeChanged is fired only once. The sequence of fired events while panning, i.e., rangeChanging followed by rangeChanged, is the intended behaviour.

—
Ananya Deka
Team CanvasJS

[fdelvalle]

Ok, then I have two questions:

1) What is the difference between rangeChanging and rangeChanged then? They seem to fire just one after another.

2) Is there a way to detect when the Pan ends? My intention is to query the database for new values only when Pan or Zoom ends.

Thanks,

[Ananya]

@fdelvalle,

1) What is the difference between rangeChanging and rangeChanged then? They seem to fire just one after another.

rangeChanging is fired just before the range of the chart is about to be changed, i.e., before rendering takes place. rangeChanged is triggered after the chart has been rendered with the updated viewport range. rangeChanging can be useful for modifying chart options based on the new range before the chart updates, while rangeChanged is suitable for tasks that need to react to the finalized change in the range.

2) Is there a way to detect when the Pan ends? My intention is to query the database for new values only when Pan or Zoom ends.

You can check if panning has ended or not with the help of rangeChanged event and mouseup event. Please check the code-snippet below.

rangeChanged: function(e) {
      if(e.trigger === 'pan') {
        panning = true;
      }
    }

document.addEventListener('mouseup', function () {
    if(panning) {
      // query your database here
      panning = false;
    }
  });

Please take a look at this JSFiddle for an example of the same.
—
Ananya Deka
Team CanvasJS