Chartjs-Chart is not populating when getting the data from AJAX call

by

1👍

✅

It seems you need a chart for every post, right?

Change your template to get data for every post

<div class="panel panel-default post" ng-repeat="post in posts">
  <div class="panel-body">
    <div class="row">
      <div class="col-sm-3">
        <canvas class="chart chart-pie" 
            chart-data="post.data"
            chart-labels="labels"
            chart-options="options"
        ></canvas>
      </div>
    </div>
  </div>
</div>

And populate post.data for each incomming post

 $http.get('/api/posts')
   .success(function(res) {
     $scope.posts = res.posts;

     // populate post.data
     $scope.posts.forEach(function(post) {
        post.data = [post.agreeCounter, post.disagreeCounter];
     });
   })

BTW IDs must be unique within document. You shouldn’t use static id (id="pie") inside ng-repeat. It will generate multiple nodes with the same id.

Leave a comment