Reply To: how to move navigator dynamically

[Indranil]

@ssniri,

Animating the shifting of slider can be achieved by updating minimum and maximum values of the slider using a timer. You can update the minimum and maximum values at a frequent interval inside the rangeChanged event handler with the help of a timer as shown in the code below.

rangeChanged: function(e) {
  clearInterval(animationTimer);
  if (flag === false && e.source === "navigator") {
    if (min < e.minimum) {
      animateSlider("right", e);
      animationTimer = setInterval(animateSlider, 50, "right", e);
    }

    if (max > e.maximum) {
      animateSlider("left", e);
      animationTimer = setInterval(animateSlider, 50, "left", e);
    }
  } else {
    min = e.stockChart.navigator.slider.get("minimum");
    max = e.stockChart.navigator.slider.get("maximum");
  }
},

In the above code snippet, animateSlider method updates the minimum and maximum values. Please refer to the code snippet below for the same.

function animateSlider(direction, e) {
    var range = (e.maximum - e.minimum);
    if(direction === "left")
      range = -(range);

    if(min < e.minimum || max > e.maximum) {
      e.stockChart.navigator.slider.set("minimum", (min + range / animationSpeed), false);
      e.stockChart.navigator.slider.set("maximum", (max + range / animationSpeed));

      min = min + range / animationSpeed;
      max = max + range / animationSpeed;
    }
    
    if ((min >= e.minimum && direction === "right") || (max <= e.maximum && direction === "left")) {
      clearInterval(animationTimer);
    }
  }

Also, kindly check this JSFiddle for complete code of an working example on the same.

___________
Indranil Deo
Team CanvasJS