I have been attempting to utilize ng-repeat with Highcharts but I am encountering an issue where only one chart is displayed in each row. Below is the HTML code:
<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 this is the data in the 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];
})
This is the directive used:
.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
},
// Rest of the configuration properties...
});
scope.$watch("items", function (processed) {
chart.series[0].setData(processed, true);
console.log(processed)
}, true);
}
}
});
I have been trying to display a unique chart for each row but it keeps showing the same chart every time. Any ideas on what I might be missing?