Angular JS Chart JS построить диаграмму на основе JSON

Question

Я новичок в angular.js и chart.js. Я хочу показать кольцевую диаграмму на основе данных JSON. Может кто-то помочь мне с этим?

Вот мой Plunk.

chartjs.controller('DataController', ['$scope', '$location', '$http', 'Service', function($scope, $location, $http, Service) {
  $scope.getAvgCost = function() {
    Service.cost().success(function(data, response) {
      $scope.avgCost = data.rows;
      var ctx = document.getElementById("avgCostDonut").getContext('2d');
      var myChart = new Chart(ctx, {
        type: 'doughnut', // change the value of pie to doughtnut for doughnut chart
        data: {
          datasets: [{
            data: [235.55, 51.79, 0, 287.34],
            backgroundColor: ['#9274C8', '#DE3F56', '#00ffbb', '#3B669C', '#e100ff', '#DE3F56', '#26C5CC', '#F5AD18', '#92D43D']
          }],
          labels: ['Avg. Tuition', 'Avg. Books', 'Avg. Fees', 'Avg. Cost']
        },
        options: {
          responsive: true
        }
      });
    });
  }
}]);