CODEWITHSUNDEEP
javascriptangularjschart.js
Asue
Asue

Reputation: 1531

display multiple charts angular.js chart.js

I want to display multiple charts in a single page, but only one is display (the first, "lots").

On the HTML :

<div ng-app="app" ng-controller="lots">
    <h3>Comparatif des lots en volume</h3>
        <canvas id="doughnut" class="chart chart-doughnut" chart-data="data" chart-labels="labels" height="100px" chart-legend="legend"></canvas>           
</div>
<div ng-app="app2" ng-controller="repartition">
    <h3>Répartition des différents types</h3>
        <canvas id="doughnut2" class="chart chart-doughnut" chart-data="data" chart-labels="labels" height="100px" chart-legend="legend"></canvas> 
</div>

The script :

<script>
    angular.module("app", ["chart.js"]).controller("lots", function ($scope) {
      $scope.labels = ["Non lotis", "Lot 1", "Lot 2"];
      $scope.data = [90, 5, 5];
    });
    angular.module("app2", ["chart.js"]).controller("repartition", function ($scope) {
      $scope.labels = ["JCL", "Appli", "Copy", "Mapset", "PGM"];
      $scope.data = [80, 2, 3, 0.5, 10];
    });
</script>

How can I display both ?

Upvotes: 0

Views: 2785

Answers (1)

Shaohao
Shaohao

Reputation: 3511

According to AngularJS website, Only one AngularJS application can be auto-bootstrapped per HTML document. Ng-app API document.

To fixed your issue, you only allow to have one ng-app for one html document. In this case, either you declare ng-app = "app" in body tag or in html tag. And then assign controller to different div tag.

HTML 
<body ng-app="app">
  <div ng-controller="lots">
    <h3>Comparatif des lots en volume</h3>
    <canvas id="doughnut" class="chart chart-doughnut"
            chart-data="data" chart-labels="labels" height="100px" 
            chart-legend="legend">
    </canvas>           
  </div>
  <div ng-controller="repartition">
    <h3>Répartition des différents types</h3>
    <canvas id="doughnut2" class="chart chart-doughnut" 
            chart-data="data" chart-labels="labels" height="100px" 
            chart-legend="legend">
    </canvas> 
  </div>
</body>
JS 
angular.module("app", ["chart.js"])
       .controller("lots", function ($scope) {
           $scope.labels = ["Non lotis", "Lot 1", "Lot 2"];
           $scope.data = [90, 5, 5];
        })
       .controller("repartition", function ($scope) {
           $scope.labels = ["JCL", "Appli", "Copy", "Mapset", "PGM"];
           $scope.data = [80, 2, 3, 0.5, 10];
        });

Upvotes: 1

Related Questions