CODEWITHSUNDEEP
javascriptjquerycsshtmlhighcharts
Ben A. Hilleli
Ben A. Hilleli

Reputation: 606

Getting highcharts to re-animate a line graph

I would like to create a highCharts page with a button to "re-animate" the chart.

When I initially create the series, I set the 'redraw' to FALSE: 

   $("contain").highcharts().addSeries({                        
        name: "filter",
        data: result
   }, false, {duration: 300000, easing: 'linear'});

When I then manually call redraw() on the entire chart:

$("contain").highcharts().redraw()

...the chart animates from the start - BUT ONLY ONCE. After the charts are animated 'on-screen', I've found no way to have them re-animate from the start EXCEPT FOR REMOVING AND THEN RE-ADDING, not an ideal solution for my case as there will be many series (lines) & ALOT of data such that I was hoping there was a simpler solution (I see somebody answered while I editted the question)...

Is there any way to do this or will have to remove and then re-add the series each time I want to re-animate?

Here is the fiddle I promised earlier. It's using the remove/re-add concept which I do not love : http://jsfiddle.net/bhilleli/854jbbhg/

Upvotes: 0

Views: 1471

Answers (1)

Jordan.J.D
Jordan.J.D

Reputation: 8113

If you want to reanimate the same series, you will want to remove your current one and redraw it as a new series.

 $('#button').click(function() {
    $("contain").highcharts().series[0].remove();
    $("contain").highcharts().addSeries({
       name:"filter",
       data: result} );

});

Upvotes: 2

Related Questions