https://locationbank.net/master/js/modules/charts/morris.directive.js

1/**=========================================================
2 * Module: morris.js
3 * AngularJS Directives for Morris Charts
4 =========================================================*/
5
6(function() {
7    'use strict';
8
9    angular
10        .module('app.charts')
11        .directive('morrisBar',   morrisChart('Bar')   )
12        .directive('morrisDonut', morrisChart('Donut') )
13        .directive('morrisLine',  morrisChart('Line')  )
14        .directive('morrisArea',  morrisChart('Area')  );
15
16    function morrisChart(type) {
17      return function () {
18        return {
19          restrict: 'EA',
20          scope: {
21            morrisData: '=',
22            morrisOptions: '='
23          },
24          link: function($scope, element) {
25            // start ready to watch for changes in data
26            $scope.$watch('morrisData', function(newVal) {
27              if (newVal) {
28                $scope.morrisInstance.setData(newVal);
29                $scope.morrisInstance.redraw();
30              }
31            }, true);
32            // the element that contains the chart
33            $scope.morrisOptions.element = element;
34            // If data defined copy to options
35            if($scope.morrisData)
36              $scope.morrisOptions.data = $scope.morrisData;
37            // Init chart
38            $scope.morrisInstance = new Morris[type]($scope.morrisOptions);
39
40          }
41        };
42      };
43    }
44
45})();