angular-chartJs/chart.directive.js at master · liollury/angular-chartJs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
/**
 * Created by olelay on 22/03/2016.
 */


(function(){
    'use strict';
    /* global Chart */
    angular
        .module('chart.js', [])
        .directive('chartJs', chartJs);

    /** @ngInject */
    function chartJs($timeout) {
        return {
            restrict: "A",
            scope: {
                chartDatasets: '=?',
                chartLabels: '=?',
                chartOptions: '=?',
                chartType: '=?',
                chart: '=?'
            },
            link : function (scope, element){
                var cvs;
                var reloading = false;

                scope.$watch('chartDatasets', reload);
                scope.$watch('chartOptions', reload);
                scope.$watch('chartType', reload);
                scope.$watch('chartLabels', reload);

                function reload() {
                    if (cvs) {
                        cvs.remove();
                        if (scope.chart) {
                            try {
                                scope.chart.destroy();
                            }catch(e) {
                                //console.log(e);
                            }
                        }
                        cvs = null;
                        scope.chart = null;
                    }

                    var labels = scope.chartLabels || [];
                    var type = scope.chartType || 'bar';
                    var datasets = scope.chartDatasets || [];
                    var options = angular.extend({}, scope.chartOptions);

                    if (datasets.length !== 0 && !reloading) {
                        reloading = true;
                        element.empty();
                        $timeout(function() {
                            cvs = angular.element("<canvas></canvas>");
                            element.append(cvs);
                            var ctx = cvs[0].getContext('2d');

                            scope.chart = new Chart(ctx, {
                                type: type,
                                data: {
                                    labels: labels,
                                    datasets: datasets
                                },
                                options: options
                            });
                            reloading = false;
                        });

                    }
                }

            }
        }
    }
})();