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:

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

<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>

Answer 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