4

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.net/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.net/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...

Pablojim
  • 8,542
  • 8
  • 45
  • 69
Jack Shepherd
  • 165
  • 4
  • 12

1 Answers1

8

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.net/K6hL8/4/

YOU
  • 120,166
  • 34
  • 186
  • 219
  • Thanks for your answer. So I can edit $scope.chartConfig, and Angular watches this - that's great - but shouldn't I be able to edit $scope.chartData too and have the parent object update? It works the first time I push a new value into it, just not subsequently. – Jack Shepherd Jan 03 '14 at 19:05
  • 2
    ya, variables are referencing to same object, but may be that api cache data to another variable somewhere? – YOU Jan 03 '14 at 19:13