Home forums StockChart Support how to move navigator dynamically

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #32829

    I want to move the navigator by an animation? is this possible or I have to change the minimum and maximum of the scroll by a timer?

    #32842

    @ssniri,

    As of now, moving navigator slider with animation is not available as an inbuilt future. However, scrolling with the help of a timer might work but can have an impact on the performance. We will work further on it and get back to you at the earliest.

    ___________
    Indranil Deo
    Team CanvasJS

    #32877

    @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.

    animate slider on click

    ___________
    Indranil Deo
    Team CanvasJS

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.