javascript - Angular Highcharts list of charts with ng-repeat

Question

i'm trying to build an kpi's app and i'm using angular js i want to create a list of charts , each list item shows different values and each list item chart has different type according to my Model.

i'm based on highcharts-ng directive.

i want to inject through highchart directive some attrs like value, title name and chart type that when i will type the following ng-repeat it will create my list of charts due to attrs

     <li ng-repeat="li in list">
       <highchart config="chart" chartTitle="{{li.name}}" kpiValue="{{li.data}}">
       </highchart>
     </li>

you can find my code here http://jsfiddle.net/Cp73s/62/

link to highcharts-ng : https://github.com/pablojim/highcharts-ng

Answer 1

High chart takes its options from config attribute. In your case chart object.

Since you want different values for different chart. You have to create as may configuration as the number of charts that need to be created.

Here is the fiddle to show the approach

http://jsfiddle.net/cmyworld/cSek7/

Basically I created a controller to manage these complexities and did setup the initial object settings in the highChartController. I did it only for title property, but the idea is the same.

Answer 2

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