1

Trying to use nvd3-line-chart directive in my AngularJS app, but it does not redraw on changing the underlying model...

I'm new to AngularJS, so might be something obvious to an experienced Angular programmer, but drives me nuts :-)

Searching for similar issues on stackoverflow only turned up answer dealing with more sophisticated issues like realtime charting or the likes - but I'd just want to push new data once on link click...

I've prepared a Plunker example here:

http://plnkr.co/edit/TkyHhbfi0vNw1FJ6mYZC?p=preview

Directive is being used like that:

<nvd3-line-chart data="exampleData" showXAxis="true" showYAxis="true"
  tooltips="true" xAxisTickValues="xAxisTicks()"
  xAxisTickFormat="xAxisTickFormat()"
  yAxisTickFormat="yAxisTickFormat()" interactive="true" objectEquality="true">
</nvd3-line-chart>

(also tried with objectEquality=false, but behaviour didn't change)...

Then in my js code I set new content in a subfunction (callback from http transfer) with:

$scope.exampleData = data;

To be sure everything get's called as wanted, also added some label (xxx) and modified it in the function call from click to yyy which works - so data binding and scope availability seems ok?

Same function is also used for initial fill, which works fine...

Can anybody shed some light regarding this issue?

BTW; also found a working example but can't spot the difference (apart from them calling it from native js so they need to manually update the component which didn't work for me as I'm already in a angular update cycle):

http://plnkr.co/edit/4ORCLW?p=preview

Juan Carlos Farah
  • 3,829
  • 30
  • 42
bernshaw
  • 11
  • 3
  • I feel your pain - I'm trying to achieve something similar with a sparklineChart. Setting objectEquality makes no difference. Neither does setting an interval which calls $scope.$apply and updates the bound data to match the new data. I also tried following the example in the plugin folder called refresh.example.html but it made no difference at all. The interesting thing about the example is that it updates BOTH of the charts on the example page, even when you delete the additional directive that is supposed to provide the magic update! If anyone has a suggestion, I'd love to hear it! – bitfidget May 26 '15 at 23:38

1 Answers1

0

The problem is that you created two instances of your controller ExampleCtrl:

<div ng-controller="ExampleCtrl">
    <nvd3-line-chart data="exampleData" showXAxis="true" showYAxis="true"
        tooltips="true" xAxisTickValues="xAxisTicks()"
        xAxisTickFormat="xAxisTickFormat()"
        yAxisTickFormat="yAxisTickFormat()" interactive="true" objectEquality="true">
    </nvd3-line-chart>
</div>
<div ng-controller="ExampleCtrl">
    <div ng-click="doClick()">{{mylabel}}</div>
</div>

This means you've created two different scopes and when the button is clicked, the scope that's not attached to your chart is the one whose data was refreshed thus it was not propagated to the chart.

Instead you need something like this (changed your clickable div to a button just for UI discoverability):

<div ng-controller="ExampleCtrl">
    <nvd3-line-chart data="exampleData" showXAxis="true" showYAxis="true"
        tooltips="true" xAxisTickValues="xAxisTicks()"
        xAxisTickFormat="xAxisTickFormat()"
        yAxisTickFormat="yAxisTickFormat()" interactive="true" objectEquality="true">
    </nvd3-line-chart>
    <button ng-click="doClick()">{{mylabel}}</button>
</div>

Plunker here http://plnkr.co/edit/b6ZhMqEU84vEctkOPqQh?p=preview

zai chang
  • 699
  • 9
  • 13