CODEWITHSUNDEEP
angularjs
Jean
Jean

Reputation: 2625

AngularJS : FlotChart doesn't repeat with ng-repeat

Am trying to draw some piecharts with flotchart within ng-repeat in AngularJS. The issue is that only the first pie chart is rendered. There is blank space where other pie charts should appear. Here is the code:

JAVASCRIPT

var app = angular.module('plunker', []);

app.controller('AppCtrl', function($scope) {
$scope.recordedEvents = [
                          {
                       id: '#007cbb',
                       name: 'customers'

                   },{
                       id: '#ef7624',
                       name: 'employees'
                   }, {
                       id: '#bbb322',
                       name: 'vendors'
                   }, {
                       id: '#449955',
                       name: 'admin'
                   }
                   ]
               ;  

$scope.$apply();
});

HTML

<!DOCTYPE html>
<html ng-app="Test">
<head>
<meta charset="UTF-8">
<title>Charts</title>
</head>
<body ng-controller="AppCtrl">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://static.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.pie.min.js"></script>
<script src="flotPiechart.js" type="text/javascript"></script>
<!-- CSS -->
<style type="text/css">
#flotcontainer {
    width: 600px;
    height: 500px;
    text-align: left;
}
</style>
 
 
<!-- Javascript -->
<script type="text/javascript">
$(function () {
    var data = [
        {label: "", data:20,color: "#007cbb"},
        {label: "", data: 80,color: "#c2c6c9"}
    ];
 
    var options = {
            series: {
                pie: {show: true,
                label: {
                        show: true,
                        threshold: 0.2
                    }
    }
                    },
                    legend: {
                        show: false
                    }
         };
 
    $.plot($("#flotcontainer"), data, options); 
});
</script>
 
<!-- HTML -->
<div ng-repeat="user in recordedEvents"  ng-style="{'display': 'inline-block' }">
{{user.name}}
<div id="flotcontainer" ></div></div>
</body>
</html>

this gives the following page when run:

enter image description here

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

EDIT

@A. Rodas , thank you! it works for static data, but how do we pass dynamic data into the chart? Here's a plunker with your code http://plnkr.co/edit/r4Rqltd4Y9tKprQJDizG?p=preview

The above link has your code with the modification am looking forward to make : the code for dynamic data which is in script.js :

.controller('AppCtrl', function($scope) {
$scope.recordedEvents = [
                          {
                           "name": "server1",
                           "data":[{label: "", data:20, color: "#007cbb"},
                                   {label: "", data:80, color: "#c2c6c9"}]

                       },{
                           "name": "server2",
                           "data":[{label: "", data:70, color: "#007cbb"},
                                   {label: "", data:30, color: "#c2c6c9"}]
                       }
                       ]
       ; 
});

I want to pass the above JSON as input to the chart rather than the data in 

var data = [
  {label: "", data:20, color: "#007cbb"},
  {label: "", data:80, color: "#c2c6c9"}
  ];

How do I do this? Can you please help?

Upvotes: 0

Views: 864

Answers (1)

A. Rodas
A. Rodas

Reputation: 20679

When you call to $.plot($("#flotcontainer"), data, options);, there is only one <div> rendered to draw the plot. Besides, you are using the same id for all the plots.

You can apply this function to every DOM element inside the ng-repeat with an Angular Directive:

var data = [...];
var options = { ... };

angular.module('plunker', [])
.directive('myChart', function(){
    return {
        link: function(scope, elm){
            $.plot($(elm), data, options);
        }
    }
})
.controller('AppCtrl', function($scope) {
    $scope.recordedEvents = [
        {id: '#007cbb', name: 'customers'},
        {id: '#ef7624', name: 'employees'},
        {id: '#bbb322', name: 'vendors'},
        {id: '#449955', name: 'admin'}
    ];
});

HTML:

<div ng-repeat="user in recordedEvents"  ng-style="{'display': 'inline-block' }">
    {{user.name}}
    <div class="flotcontainer" my-chart></div>
</div>

Plunker: http://plnkr.co/edit/iJfMNko3tHfUk7ApEft2

UPDATE: To pass complex data to your directive, you need to bind the variable to the local scope:

angular.module('plunker', [])
.directive('myChart', function(){
    return {
        restrict: 'A',
        scope: {
          chartdata: "=",
        },
        link: function(scope, elm){
            $.plot($(elm), scope.chartdata, options);
        }
    }
})
.controller('AppCtrl', function($scope) {
    $scope.recordedEvents = [
      {
        "name": "server1",
        "data":[{label: "", data:20, color: "#007cbb"}, {label: "", data:80, color: "#c2c6c9"}]
      },
      {
        "name": "server2",
        "data":[{label: "", data:70, color: "#007cbb"}, {label: "", data:30, color: "#c2c6c9"}]
      }];
});

HTML:

<div ng-repeat="user in recordedEvents"  ng-style="{'display': 'inline-block' }">
    {{user.name}}
    <div class="flotcontainer" my-chart chartdata="user.data"></div>
</div>

Plunker: http://plnkr.co/edit/WEJMA0f7DnnAh6h8jaMW

Upvotes: 1

Related Questions