Chart.js/samples/playground.js

(function() {

    var module = angular.module('app', []);

    module.controller('mainController', function($scope, $timeout) {
        angular.extend($scope, {

            chart: {},
            chartTypes: chartTypes(),

            init: init,
            randomizeData: randomizeData,
        });


        init();



        function init() {
            if ($scope._chart) {
                $scope._chart.destroy();
            }
            $scope.ctx = $('canvas')[0].getContext("2d");
            buildData();
            buildChart();

            $scope.$watch('options', function(val) {
                try {
                    angular.extend($scope.chart.options, JSON.parse(val));
                } catch (e) {
                    console.log(e);
                }
            }, true);

            $scope.$watch('chart.options', function() {
                if ($scope._chart) {
                    $scope._chart.update();
                }
            }, true);
        }

        function chartTypes() {
            return [{
                name: 'Line/Scatter',
                value: 'Line/Scatter',
                selected: true
            }, {
                name: 'Bar',
                value: 'Bar',
            }, {
                name: 'Pie/Doughnut',
                value: 'Pie/Doughnut',
            }, {
                name: 'Polar',
                value: 'Polar',
            }, {
                name: 'Radar',
                value: 'Radar',
            }];
        }



        function buildData() {
            $scope.chart.data = groupData();
            $scope.chart.options = {
                stacked: true,
                hoverMode: 'label'
            };
            $scope.options = stringify($scope.chart.options);
        }

        function buildChart() {
            $scope._chart = new Chart($scope.ctx)[$scope.chartType || 'Line']($scope.chart);
        }

        function stringify(o) {
            var cache = [];
            var result = JSON.stringify(o, function(key, value) {
                if (typeof value === 'object' && value !== null) {
                    if (cache.indexOf(value) !== -1) {
                        // Circular reference found, discard key
                        return;
                    }
                    // Store value in our collection
                    cache.push(value);
                }
                return value;
            }, 1);
            cache = null; // Enable garbage collection
            return result;
        }


        function groupData() {
            return {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [{
                    label: "Dataset 1",
                    data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
                    backgroundColor: randomColor(0.8),
                }, {
                    label: "Dataset 2",
                    data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
                    backgroundColor: randomColor(0.8),
                }, {
                    label: "Dataset 3",
                    data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
                    backgroundColor: randomColor(0.8),
                }]
            };
        }

        function flatData() {
            return {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [{
                    label: "My First dataset",
                    data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
                }, {
                    label: "My Second dataset",
                    data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
                }]
            };
        }

        function randomizeData() {

            angular.forEach($scope.chart.data.datasets, function(dataset) {

                dataset.data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
                dataset.backgroundColor = randomColor(.8);
                dataset.borderColor = randomColor(0.7);
                dataset.pointBackgroundColor = randomColor(1);
                dataset.pointBorderColor = randomColor(1);


                $scope._chart.update();
            });
        }




        function randomScalingFactor() {
            return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
        }

        function randomColor(opacity) {
            return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (typeof opacity != "undefined" ? opacity : '.3') + ')';
        }

    });

})();