Chartjs-Ng-repeat in ChartJS AngularJS

by

0👍

There’s a few issues with the code that you’ve posted. The key ones that I see that will get the chart rendering happening are as follows:

First, your ng-repeat is using options, but you also have a scope variable called options, and I think they are clashing (or at the very least, not doing what you think they are doing).

Changing $scope.options = {...} to $scope.chartOptions = {...}, and chart-options="options" to chart-options="chartOptions" will fix this.

Second, your ng-repeat is looking for chart-data and chart-labels inside each person. You’ve only defined name and number, so there is no data to display.

On this, I can see that you’ve iterated over the person array and dropped all the information into a scope data and labels array.

That means that while you are rendering a chart per person, you’re effectively rendering the same chart each time.

A full working version follows:

<link rel="stylesheet" href="http://jtblin.github.io/angular-chart.js/node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="http://jtblin.github.io/angular-chart.js/node_modules/angular/angular.min.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/node_modules/chart.js/dist/Chart.min.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/dist/angular-chart.js"></script>


<script>
  var app = angular.module("RodoApp", ["chart.js"]);
  app.controller("ChartController", function ($scope, $http) {
    $scope.person = [
      {
        "name": "Rodrigo",
        "number": 5,
      },
      {
        "name": "Carlos",
        "number": 11,
      },
      {
        "name": "Arnold",
        "number": 20,
      }
    ];


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

    for (i = 0; i < $scope.person.length; i++) {
      $scope.labels.push($scope.person[i].name);
      $scope.data.push($scope.person[i].number);
    }

    $scope.chartOptions = {
      legend: {
        display: true,
      },
      title: {
        display: true,
        text: 'title'
      } 
    };

  });
</script>
<body ng-app="RodoApp" ng-controller="ChartController">

  <div ng-repeat="t in person">
    <div>{{t.name}} - {{t.number}}</div>
  </div>
  <hr />
  <div ng-repeat="options in person track by $index">
    <canvas ng-attr-id="{{options.name}}" class="chart chart-pie"  chart-options="chartOptions" chart-data="data" chart-labels="labels" />
  </div>
</body>

While this renders the charts, the make up of the data and why you want to repeat this is something that you’ll need to think about, and possible ask another question on.

Leave a comment