I am using Highcharts graphs and I am using .setData to update the data in the graph.

This is all working fine but I would like to use the loading animation (where the line chart draws itself from left to right) to be triggered every time I reset the data. Is there a way to call this animation?

I am using Highcharts graphs and I am using .setData to update the data in the graph.

This is all working fine but I would like to use the loading animation (where the line chart draws itself from left to right) to be triggered every time I reset the data. Is there a way to call this animation?

• javascript
• jquery
• highcharts

• by default, it should animate i think.. api.highcharts.com/highcharts#chart.animation, can you post a fiddle? – asifrc Commented Apr 13, 2013 at 12:12

3 Answers 3

You can remove actual series, and add new one. Initial animation is different from all others (clip path is animated, not series itself).

See example: http://jsfiddle.net/UTC6e/2/

    chart.series[0].remove();
    chart.addSeries({data:[229.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4]} );

In the api reference I see the method setVisible(): "A utility function to show or hide the series with an optional redraw.". I think that's what you're looking for?

UPDATE: added JS Fiddle, see: http://jsfiddle.net/UTC6e/1/

So you could first setVisible to false, then set the new data, and at the end setVisible to true and tell the chart to redraw (second boolean argument).

chart.series[0].setVisible(false);
chart.series[0].setData([229.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4] );
chart.series[0].setVisible(true, true);

You could just manually call the redraw method:

chart.redraw();