angular nvd3

by Sinh Nguyen

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.9/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.13-beta/nv.d3.min.js"></script>
<script src="http://cmaurer.github.io/angularjs-nvd3-directives/lib/angularjs-nvd3-directives/dist/angularjs-nvd3-directives.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.13-beta/nv.d3.css">
<div ng-app='nvd3TestApp'>
<div ng-controller="ExampleCtrl">
    <nvd3-pie-chart
            data="exampleData"
            id="exampleId"
            showLabels="true"
            x="xFunction()"
            y="yFunction()"
            donut="true"
            donutRatio="0.3"
            callback="func"
            donutLabelsOutside="false" width="400" height="400"  color="colorFunction()" showLegend="true" >
                <svg width="600"></svg>
          
        <svg height="600"></svg>
    </nvd3-pie-chart>

</div>
</div>

JavaScript

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

        function ExampleCtrl($scope,$element){
            $scope.func = function() {
            	var selection = d3.selectAll($element);
                                var donut = selection.selectAll('g.nv-slice').filter(
                                    function (d, i) {
                                        return i == 0;
                                    }
                                );
                                donut.insert('text', 'g')
                                .text('Line One')
                                .attr('class', 'middle')
                                .attr('text-anchor', 'middle')
                                    .attr('dy', '-.55em')
                                    .style('fill', '#000');
            }
            $scope.exampleData = [
                {
                    key: "On Hold",
                    y: 5
                },
                {
                    key: "Open",
                    y: 2
                },
                {
                    key: "Closed",
                    y: 9
                }
            ];
            var colorArray = ['#FF0000', '#0000FF', '#FFFF00', '#00FFFF'];
$scope.colorFunction = function() {
	return function(d, i) {
    	return colorArray[i];
	};
}
$scope.colorFunction = function() {
	return function(d, i) {
    	return colorArray[i];
	};
}
            $scope.xFunction = function(){
                return function(d) {
                    return d.key;
                };
            }
            $scope.yFunction = function(){
                return function(d) {
                    return d.y;
                };
            }

        }