I'm using highcharts-ng Angular-JS directive to draw a chart on my page.

I am hoping to be able to update the data in my controller, and have these values reflected in the graph. However, when I update a $scope variable using assignment eg:

$scope.chartData = [1, 2, 3];

...then the graph is not updated. The only way I can get the graph updated is to push a value into the data, eg:

$scope.chartData.push(4);

...however this works only the first time it is performed. Here's a JS-fiddle showing what I mean: /

I'm new to Angular so I wanted to check whether there is an obvious problem with my Angular code (maybe I misunderstand $scope and two way bindings?) before I start blaming the third party directive.

Thanks in advance!

Edit:

So it appears (in this fiddle: /) that Angular does see the change in chartData (I've put a watch with an alert on it), but only when watch is called with "true" for equality. All the watches in the directive use 'true', so I'm stumped...

I'm using highcharts-ng Angular-JS directive to draw a chart on my page.

I am hoping to be able to update the data in my controller, and have these values reflected in the graph. However, when I update a $scope variable using assignment eg:

$scope.chartData = [1, 2, 3];

...then the graph is not updated. The only way I can get the graph updated is to push a value into the data, eg:

$scope.chartData.push(4);

...however this works only the first time it is performed. Here's a JS-fiddle showing what I mean: http://jsfiddle/K6hL8/

I'm new to Angular so I wanted to check whether there is an obvious problem with my Angular code (maybe I misunderstand $scope and two way bindings?) before I start blaming the third party directive.

Thanks in advance!

Edit:

So it appears (in this fiddle: http://jsfiddle/K6hL8/) that Angular does see the change in chartData (I've put a watch with an alert on it), but only when watch is called with "true" for equality. All the watches in the directive use 'true', so I'm stumped...

• javascript
• angularjs
• highcharts
• angularjs-scope
• highcharts-ng

• 2 Author of the directive here. There was a bug that has now been fixed. Your jsfiddle now works! – Pablojim Commented Jan 25, 2014 at 20:40
• Hi - thanks for letting me know - and for the directive too! – Jack Shepherd Commented Jan 26, 2014 at 21:34

1 Answer 1

You are modifying a temporary data variable which is used to apply to actual chart. You need to modify directly .series data

    var data  = $scope.chartConfig.series[0].data;
    $scope.chartConfig.series[0].data = data.concat([data.length]);   

http://jsfiddle/K6hL8/4/