Create highcharts using angularjs ng-repeat - angularjs

Question

I have requested the json data containing all the information about people, and I want to a draw highcharts for each person based on the his information. I saw a solution here, but it seems that the config will always be overridden by the last li's config information. Is there a way to keep different configs for each highchart?
<div data-ng-repeat="a in people">
<h4>Method: {{ a.name }}</h4>
<highchart config="chartConfig"></highchart>
</div>

Answer 1

I encountered the same problem. It turns out that ng-repeat create new scope for each item, therefore the config attribute of highchart directive should correspond to the setting in ng-repeat. In your example, since you repeat the people by <div data-ng-repeat="a in people"> ,changing
<highchart config="chartConfig"></highchart>
to
<highchart config="a.chartConfig"></highchart>
should help.
I had create a plunker as an example.

Answer 2

You can use a partial view with a controller. Using ng-highcharts of course.
Like so, in your main you have:
<div data-ng-repeat="person in people">
<h4>Method: {{ person.name }}</h4>
<div data-ng-include="'/partial/chart.html'"></div>
</div>
Then in your partial, you have:
<div data-ng-controller="ChartController">
<highchart config="chartConfig"></highchart>
</div>
Then in your controller, you have:
app.controller('ChartController', function ($scope) {
$scope.chartConfig = {
chart: {
type: 'pie'
},
title: {
text: $scope.person.name
},
series: [{
data: $scope.person.chartdata
}]
};
});
Hope this helps.

Answer 3

You have to create a list then add to that list each chart configuration. Use ng-repeat in the list of charts:
//See: https://github.com/pablojim/highcharts-ng
var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function ($scope) {
//The list who will contain each chart
$scope.chartlist = [];
//Chart 1
$scope.chartConfig = {
options: {
chart: {
type: 'bar'
}
},
series: [{
data: [10, 15]
}],
}
//Chart 2
$scope.chartConfig2 = {
options: {
chart: {
type: 'bar'
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
}
$scope.chartlist.push($scope.chartConfig);
$scope.chartlist.push($scope.chartConfig2);
});
then in your html use ng-repeat on the list of charts:
<div ng-app="myapp">
<div ng-controller="myctrl">
<div ng-repeat="char in chartlist" class="row">
<highchart id="chart1" config="char" class="span10"></highchart>
</div>
</div>
if you want to use dinamic data you can use a foreach to create each chart config, in this example I create a chart foreach object in the array 'a':
$scope.chartlist = [];
var a = [[1, 2],[2,4]];
function chardata(){
for (var i = 0; i < a.length; i++) {
$scope.chartConfig = {
options: {
chart: {
type: 'bar'
}
},
series: [{
data: a[i]
}],
}
$scope.chartlist.push($scope.chartConfig);
}
}
chardata();