Arun Kumar M Arun Kumar M - 26 days ago 5
AngularJS Question

Need help to generate multiple high charts in ng-repeat

I am able to generate one chart. But here there one situation where I need to generate multiple(one or more) charts. Please help me to it with ng-repeat.

JSON data for multiple charts

[
{
"id": 123,
"seriesData": [
{
"name": "Times",
"data": [
[
1505347200000,
20
]
]
},
{
"name": "Prices",
"data": [
[
1505347200000,
80
]
]
},
{
"name": "Cleaner",
"data": [
[
1505347200000,
40
]
]
},
{
"name": "Other",
"data": [
[
1505347200000,
40
]
]
}
]
},
{
"id": 123,
"seriesData": [
{
"name": "Donut",
"data": [
[
1505347200000,
20
]
]
},
{
"name": "Ice Cream",
"data": [
[
1505347200000,
20
]
]
},
{
"name": "Tea",
"data": [
[
1505347200000,
40
]
]
},
{
"name": "Coffee",
"data": [
[
1505347200000,
20
]
]
}
]
}
]


Find the code in jsfiddle http://jsfiddle.net/TXJE6/273/

Answer Source

You can write ng-repeat on series only, because other chart metadata doesn't change:

<div ng-repeat="data in dataOfSeries">
  <hc-chart options="surveyResultChoice" 
            data="data" 
            class="chart" >Placeholder for generic chart</hc-chart>
</div>

And your directive will look like:

app.directive('hcChart', function () {
    return {
        restrict: 'E',
        template: '<div class="chart"></div>',
        scope: {
            chartOptions: '=',
            series: '='
        },
        link: function (scope, element) {

            scope.chartOptions.series = scope.series;

         Highcharts.chart(element[0], scope.chartOptions);
        }
    };
});

Fixed demo Fiddle


As I side note I would create chart inside directive and only would pass series from controller