Chartjs-Chart js with ng-repeat

by

0👍

I hope it help

JS

angular.module('horseApp.TrainerController',['chart.js']).
  controller('TrainerController', function ($scope, $stateParams, $http) {

$scope.config = {
 type: 'doughnut',
 data: {labels: [], datasets: [{data: []}]}
}

$http.get('restful-services/api/getAllTrainers')
    .success(function (data, status) {
        $scope.trainer = data;

        $scope.labels=[];
        $scope.data=[];

        for(i=0;i<$scope.trainer.length;i++){
            $scope.config.data.labels.push($scope.trainer[i].trainerName);
            $scope.config.data.datasets[0].data.push($scope.trainer[i].seaonWinners);
        }
          })
    .error(function (error) {
        alert('An error occurred');
    });
       });

 angular.module('horseApp.TrainerController').
  directive('chartJs', function (){

     return {
         restrict: 'E',
         scope: {
           config: '='
         },
         template: '<canvas width="400" height="400"></canvas>'
         link: function(scope, elem, attr) {

             var ctx = elem.getContext("2d");

             var chart = new Chart(ctx, scope.config);

         }
     }

  })

HTML

<div>
   <chart-js data-config="config"></chart-js>
</div>

0👍

The issue is related to chart-type, the classname cannot be chart-pie or chart-bar, it should be chart-base, and you additionally specify chart-type in element properties like this:

<div ng-repeat="(name,options) in charts">
   <canvas id="{{options.name}}" class="chart chart-base" chart-type="options.type" chart-data="options.data" chart-labels="options.labels">
   </canvas>
</div>

Leave a comment