Angular nvd3 sunburst does not update with $scope.data change

Question

Use Case: When data changes from the api, $scope.data also changes. I could see the data change in html. A sunburst chart update is expected.

Here is the core code:

Controller:

var grabData=function(){
  $http.get('someApi').then(function success(response){
  $scope.options = {
        chart: {
            type: 'sunburstChart',
            width:450,
            height: 450,
            color: d3.scale.category20c(),
            duration: 250,
            mode: 'size',
            useInteractiveGuideline:true,
        }
    };
    $scope.config = {
        visible: true, // default: true
        disabled: false, // default: false
        refreshDataOnly: true, // default: true
        deepWatchOptions: true, // default: true
        deepWatchData: true, // default: true
        deepWatchDataDepth: 2, // default: 2
        debounce: 10 // default: 10
    };
        $scope.data = [];
        $scope.data.push({"name":"PORTFOLIO", "children":response.data});
    },function error(response){
      $scope.all = response.statusText;
  });};

HTML:

<div class="col-md-6 col-md-offset-1">
  <nvd3 options="options" data="data" config="config" class="with-3d-shadow with-transitions"></nvd3>
</div>

Issue: Now when the data changes from the api, $scope.data also changes. I could see the data change in html. But the sunburst chart does not update at all until I manually refresh the page.

Could you prepare a plunker for that? You can fork mine with Angular/NVD3 already in place: http://plnkr.co/N6lWYU — Atais, Jul 21 '16 at 09:11
So I have a service that sends a signal when data at the back-end changes. As soon as the controller gets the signal, the function `grabData()` is called and `$scope.data` gets updated. HTML reflects the data, that means `$scope.data` has changed but the chart does not update. The code is as above ! @Atais — Sushant, Jul 21 '16 at 09:34
The `deepWatchData: true` should do the trick and update the graph. It does not, that is why you should try to replicate the issue with plunker. With this approach you will isolate the problem. The issue might be somewhere else in your application. — Atais, Jul 21 '16 at 09:37
Chart should not render at all in case the data was wrong, no? And I'll update the plunker soon. — Sushant, Jul 21 '16 at 10:18
I forked your plunker, does not seem to work, check it out @Atais — Sushant, Jul 21 '16 at 11:36
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/117919/discussion-between-thatbird-and-atais). — Sushant, Jul 21 '16 at 12:10

score 1 · Answer 1 · answered Jul 21 '16 at 12:38

1

So the fix was pretty simple, you have to pass refreshDataOnly: false.

config="{refreshDataOnly: false}" in your configurations-

<nvd3 options="options" data="sunburst" config="{refreshDataOnly: false}" class="with-3d-shadow with-transitions"></nvd3>

answered Jul 21 '16 at 12:38

Sushant

3,499
3
17
34

Angular nvd3 sunburst does not update with $scope.data change

1 Answers1