@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