Create dynamic number of angularjs nvd3 charts

Question

How to create dynamic number of charts using angularjs nvd3 directive ?

Seems data attribute is not expanded. Here is an example:

<div ng-repeat="item in [0, 1]">
<nvd3-pie-chart
    data="exampleDataPieChart{{$index}}"
    id="toolTipExample1{{$index}}"
    x="xFunction()"
    y="yFunction()"
    width="250"
    tooltips="true">
</nvd3-pie-chart>

j.wittwer · Accepted Answer · 2014-05-06 06:11:10Z

1

If your chart data arrays are wrapped in an array:

$scope.exampleDataPieChart = [
  $scope.exampleDataPieChart0,
  $scope.exampleDataPieChart1
];

then, you can use $index to select one of them:

<div ng-repeat="item in [0, 1]">
  <nvd3-pie-chart 
  data="exampleDataPieChart[$index]" 
  ...
  </nvd3-pie-chart>
</div>

Or, simply:

<div ng-repeat="chart in exampleDataPieChart">
  <nvd3-pie-chart 
  data="chart" 
  ...
  </nvd3-pie-chart>
</div>

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

answered May 6, 2014 at 6:11

j.wittwer

9,4973 gold badges32 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Create dynamic number of angularjs nvd3 charts

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related