directive returns the same array a few times angularjs

Question

I'm trying to display highcharts with ng-repeat but displays 1 chart in every row Here is html:

<tr ng-repeat="perspective in perspectives">
                <td>
                    <highcharts-pie class="hc-pie" items="processed"></highcharts-pie>
                </td>
                <td>{{perspective.perfomance}}</td>
                <td>{{perspective.current}}</td>
                <td>{{perspective.previous}}</td>
                <td>{{perspective.variance}}</td>
            </tr>

And data in controller:

    $scope.perspectives=[
      {perfomance:'A',
        current:'0',
        previous:'1',
        variance:'-1',
        plus:false,
        graphData:[
          {value: 32.4},
          {value: 13.2},
          {value: 84.5},
          {value: 19.7},
          {value: 22.6},
          {value: 65.5},
          {value: 77.4},
          {value: 90.4},
          {value: 17.6},
          {value: 59.1},
          {value: 76.8},
          {value: 21.1}
            ]
      },{perfomance:'B',
          current:'1',
          previous:'0',
          variance:'1',
          plus:true,
          graphData:[
            {value: 22.4},
            {value: 53.2},
            {value: 45.5},
            {value: 67.7},
            {value: 92.6},
            {value: 78.5},
            {value: 71.4},
            {value: 35.4},
            {value: 21.6},
            {value: 34.1},
            {value: 68.8},
            {value: 24.1}
          ]
 }];
  $scope.processed = $scope.perspectives[0].graphData.map(function (elem, i) {
    return [i, elem.value];
  })

Here is directive:

.directive('hcPie', function () {
  return {
    restrict: 'C',
    replace: true,
    scope: {
      items: '='
    },
    controller: function ($scope, $element) {
    },
    template: '<div id="container">not working</div>',
    link: function (scope, element) {
      var chart = new Highcharts.Chart({
        chart: {
          renderTo: element[0],
          height: 45,
          type: 'column',
          backgroundColor: null
        },
        title: {
          text: null
        },
        subtitle: {
          text: null
        },
        xAxis: {
          categories: [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec'
          ],
          labels: {
            enabled: false
          },
          gridLineWidth: 0,
          minorGridLineWidth: 0,
          lineColor: 'transparent',
          tickLength: 0
        },
        yAxis: {
          gridLineWidth: 0,
          minorGridLineWidth: 0,
          lineColor: 'transparent',
          min: 0,
          title: {
            text: null
          },
          labels: {
            enabled: false
          }
        },
        tooltip: {
          enabled: false
        },
        plotOptions: {
          column: {
            pointPadding: 0,
            borderWidth: 0,
            states: {
              hover: {
                color: '#FFFFFF'
              }
            }
          }
        },
        legend: {
          enabled: false
        },
        series: [{
          name: 'Value',
          color: '#EC5B00',
          data: scope.items

        }],
        exporting: {
          enabled: false
        }
      });
      scope.$watch("items", function (processed) {
        chart.series[0].setData(processed, true);
        console.log(processed)
      }, true);
    }
  }
});

I'm trying to display self chart for every row, but all time displays the same what I missed?

Answer 1

$scope.processed is only defined once, and will always be the processed graphData values of the first perspective.

Consider the following solution:

In the controller:

$scope.process = function(graphData) {
  return graphData.map(function (elem, i) {
    return [i, elem.value];
  });
}

When using the directive:

<tr ng-repeat="perspective in perspectives">
   <td>
     <highcharts-pie class="hc-pie" items="process(perspective.graphData)"></highcharts-pie>
   </td>
   ....
</tr>

Answer 2

You are not looping through graphData, try using

  perspective.graphData

in ng-repeat