Search code examples
angularjshighchartshighcharts-ng

Highcharts smooth transition on data update using Angular and ng-highcharts

I've recently made a prototype of a highchart that works strictly in jquery. I had a bunch of spaghetti code, but I also had a nice transitional animation when selecting a controller that would animate the chart and update the series. In short, it was done like so...

var chart = new Highcharts.Chart(chartOptions);
// ...
$('select#dropdown').change(function(){
  // ...
  chart.series[0].setData(/*data*/, false);
  chart.series[1].setData(/*data*/, false);
  chart.series[2].setData(/*data*/, false);
  // ...
  chart.redraw();
}

So the chart (1) initialized on page load, (2) Takes an argument from a dropdown box (3) decides what the new value is for a given series and (4) smoothly redraws the chart to that value.

My problem is that I'm having a very difficult time re-producing this in angular. Especially highcharts-ng, which seems to have every example under the sun EXCEPT updating existing points.

http://pablojim.github.io/highcharts-ng/examples/example.html

There are things like adding series, deleting series etc.. What about UPDATING a series? What if we wanted a series tied to a scope variable, which was constantly changing? How would I make a $scope.$watch on the drop-down box tell the chart to update the points?

Solution

  • The key is to update the data array in the series and the highcharts will take care of the smooth transition. for example:

     $scope.chartConfig.series[0].data = rnd;

    Here I have updated the example for you to show smooth update transition: JsFiddle

    And an example with Drop Down and watch : JsFiddle

    Hope that helps. let me know if you have any questions on how it works.