CODEWITHSUNDEEP
angularjshighcharts
Blake
Blake

Reputation: 7547

Create highcharts using angularjs ng-repeat

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>

Upvotes: 1

Views: 5315

Answers (3)

Diego Unanue
Diego Unanue

Reputation: 6826

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();

Upvotes: 0

JasonHuang
JasonHuang

Reputation: 166

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.

Upvotes: 2

user1491655
user1491655

Reputation: 13

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.

Upvotes: 1

Related Questions