Home forums Using CanvasJS How to Re render with animation

This topic contains 6 replies, has 5 voices, and was last updated by  guilhermemaranhao 6 months, 3 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #14553

    Hi
    I’m updating dataPoints dynamically based on some dropdown, When I do that animation is not coming. How do I re render with animation?

    #14558

    @dsrebel

    To render the chart each time with animation, you should create a new chart with updated options. Please take a look at this jsFiddle.

    —-
    Bivek Singh

    • This reply was modified 2 years, 5 months ago by  Bivek Singh.
    #24139

    Hi @bivek,

    I instantiate my chart before populating my datapoints, which are set after an ajax request.
    At that moment, I render the chart instance and then set the dataPoints.
    Even in the first moment, the chart isn’t being loaded in animation mode. The animationEnabled option is set to true.
    I did it only if I instantiate the chart after setting the datapoints to an option object and instante (and render) the respective chart. Is that still the only possibility to have the animation working?

    Thanks, Guilherme

    #24150

    @guilhermemaranhao,

    Can you please create a JSFiddle reproducing the issue you’re facing so that we can look into the code, understand it better and help you out?

    ____
    Shashi Ranjan
    Team CanvasJS

    #24154

    Hello @shashi!

    That’s what I have implemented:
    jsfiddle today (not working)

    That’s how it works (I need to have my dataPoints set before rendering):
    jsfiddle (that works)

    This is what I’d like to do. Set animationEnabled after the dataPoints. I thought it’d work because after the addTo method, the chart is rendered.
    jsfiddle (why does not work?)
    Why this animated mode does not work? Can’t I simply render the chart again? the only way is instantiating another chart with the dataPoints already set?

    Thank you,

    Guilherme

    • This reply was modified 6 months, 3 weeks ago by  guilhermemaranhao. Reason: change the last question
    #24169

    Guilherme,

    Chart animates only on the first render, as of now. When you use set method, chart re-renders based on the 3rd parameter. During the first render, as there are no dataPoints present, animation wouldn’t be visible. During second render (happened because of set method) animation wouldn’t happen. To update dataPoints dynamically and to animate chart, you can instantiate the chart, update dataPoints via chart-options and then call chart.render as shown in this updated JSFiddle.


    Vishwas R
    Team CanvasJS

    #24172

    Thank you, @vishwas! That’s exactly what I was looking for, a way to have the animated rendering without having to re-instantiate the chart.

    Best regards,

    Guilherme

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

You must be logged in to reply to this topic.