How to generate multiple high charts in ng-repeat

user_5173098 0
Viewed 641

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/

angularjs-ng-repeat angularjs highcharts
1 Answers

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

user_16313790
Related