jquery.flot.pie directive

gistfile1.js

angular.module('flot')
    .directive('flotPie', [function () {
        'use strict';
        return {
            restrict: 'E,A',
            require: 'ngModel',
            link: function (scope, elem, attrs, ngModel) {

                var chart = null,
                    opts = {
                        series: {
                            pie: {
                                innerRadius: 0.25,
                                show: true,
                                combine: {
                                    color: '#999',
                                    threshold: 0.1
                                },
                                label: {
                                    radius:8/18,
                                    formatter: function(label, series){
                                        return '<div style="font-size:9pt;text-align:center;padding:2px;color:black;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
                                    },
                                    show: true,
                                    background: {opacity:0, color: '#999' }
                                }
                            }
                        },
                        legend: {show: false}
                    };

                var render=function(){
                    var data = ngModel.$viewValue;
                    if(angular.isUndefined(data)){
                        return;
                    }
                    chart = $.plot(elem, data, opts);
                    elem.show();
                };

                scope.$watch(attrs.ngModel, function (v) {
                    render();
                });
                // No need to re-render on window resize as we keep the donuts the same size
            }
        };

    }]);