Home › Forums › Chart Support › multiple charts with dynamic id using angularjs ng-repeat › Reply To: multiple charts with dynamic id using angularjs ng-repeat
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