Chart.js

by Zaiste

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.1/css/foundation.min.css">
<script src="//cdn.jsdelivr.net/chart.js/0.2/Chart.min.js"></script>
<body ng-app="app" ng-controller="MainCtrl"> <a href='' class='button small' ng-click='generate()'>Regenerate</a>

    <canvas chart data='data' width="500" height="500"></canvas>
</body>

JavaScript

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

app.controller('MainCtrl', function ($scope) {
    $scope.data = [{
        value: 30,
        color: "#F38630"
    }, {
        value: 50,
        color: "#E0E4CC"
    }, {
        value: 100,
        color: "#69D2E7"
    }];
    var generateColor = function () {
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++) {
            color += letters[Math.round(Math.random() * 15)];
        }
        return color;
    };

    $scope.generate = function () {
        $scope.data = [];
        for (var i = 0; i < 10; ++i) {
            $scope.data.push({
                color: generateColor(),
                value: Math.floor((Math.random() * 100) + 1)
            });
        }

    }
});

app.directive('chart', function () {
    return {
        scope: {
            width: "@",
            height: "@",
            data: "="
        },
        link: function (scope, element, attrs) {
            var width = attrs.width || 300;
            var height = attrs.height || 300;

            var ctx = element[0].getContext("2d");
            var myNewChart = new Chart(ctx).Pie(scope.data);

            scope.$watch('data', function (newVal, oldVal) {
                new Chart(ctx).Pie(scope.data);
            });
        }
    }
});