Angular Morris Chart - Async Example

by Stewan Pacheco

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-morris-chart/1.2.0/angular-morris-chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.1/angular-resource.min.js"></script>
<div ng-app="my.app" ng-controller="MyCtrl">
  <h1 align="center"><font face="Arial">Angular Morris Chart Contributors</font></h1>
  <div donut-chart donut-data='data'>
  </div>
</div>

CSS

body {
  padding: 20px;
}

JavaScript

angular.module('my.app', ['angular.morris-chart', 'ngResource']).controller('MyCtrl', function($scope, githubResource) {
  var data = [];
  githubResource.get({
    'query': 'repos',
    'user': 'stewones',
    'repo': 'angular-morris-chart',
    'spec': 'contributors'
  }).$promise.then(function(result) {
    result.data.forEach(function(row) {
      data.push({
        label: row.login,
        value: row.contributions
      });
    })
    $scope.data = data;
  });
}).factory('githubResource', function($resource) {
  'use strict';
  return $resource('https://api.github.com/:query/:user/:repo/:spec', {
    'query': 'users',
    'user': 'angular',
    'repo': 'repos',
    'spec': '',
    'callback': 'JSON_CALLBACK',
    'per_page': 100
  }, {
    'get': {
      'method': 'JSONP'
    }
  });
});