Reply To: multiple charts with dynamic id using angularjs ng-repeat

[Indranil Deo]

@subhashe,

To create multiple charts with dynamic id, you can use ngRepeat to iterate through an array containing the chartContainer id, then use the obtained id values to create multiple chartContainer as shown below –

HTML

<div ng-controller="chartContainerController">
   <chart-Container ng-repeat="chartContainer in chartContainers" chart-container-data="chartContainer" />
 </div>

JS

angular.module('myapp', [])
  .controller('chartContainerController', ['$scope', function($scope) {
    $scope.chartContainers = [
      { id: 'chartContainer1' },
      { id: 'chartContainer2' },
      { id: 'chartContainer3' },
      { id: 'chartContainer4' }];
  }])
  .directive('chartContainer', function() {
  return {
    restrict: 'E', // Element directive
    scope: { chartContainer: '=chartContainerData' },
    template: '<div id = {{chartContainer.id}} style="height: 360px; width: 100%;"></div>'
  };
});

Please take a look at this JSFiddle for a complete working code.

____________
Indranil Deo,
Team CanvasJS