D3 Donut Chart with Labels Using Angular Directive and Json Data (Example)

Running index.html, get the result:

1

 

 

priorityData.json:

{
“priority”:{
“Blocker”:12,
“Critical”:18,
“Major”:5,
“Minor”:30,
“Trivial”:24
}
}

index.html:

<!DOCTYPE html>
<html>
<head>

https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js
http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-resource.min.js
http://d3js.org/d3.v3.min.js
</head>
<body ng-app=”grey” ng-controller=PriorityCtrl>

<priority-graph data=”priorityData”></priority-graph>

var grey = angular.module(‘grey’, [‘ngResource’]);

grey.factory(‘DataFac’,function($resource){
return $resource(‘count.json’,{});
});
grey.controller(‘PriorityCtrl’,function($scope,DataFac){

DataFac.get(function(response){
$scope.priorityData = response.priority;

})
});

grey.directive(‘priorityGraph’, function(){
function link(scope, el, attr){
// set the element
el = el[0];
var width=960,
height=500,
radius=Math.min(width,height)/2;

var color=d3.scale.ordinal().range([“rgb(166,60,48)”, “rgb(229,144,78)”, ” rgb(221,226,77)”, “rgb(157,211,72)”, “rgb(40,106,151)”]);

var arc=d3.svg.arc()
.outerRadius(radius-80)
.innerRadius(radius-150);

//watch data change from json
scope.$watch(‘data’, function(data){
if(!data){ return; }

//change json to two arrays for category and count
//count array
var countArr=[];
//category array
var categoryArr=[];
//total number of issues
var total=0;

for (key in data){
if(data.hasOwnProperty(key)){
categoryArr.push(key);
countArr.push(data[key]);
total+=data[key];
}
}

var pie=d3.layout.pie()
.sort(null)
.value(function(d){return d});

var svg=d3.select(el).append(“svg”)
.attr(“width”,width)
.attr(“height”,height)
.append(“g”)
.attr(“transform”,”translate(“+width/2+”,”+height/2+”)”);

var g=svg.selectAll(“.arc”)
.data(pie(countArr))
.enter().append(“g”)
.attr(“class”,”arc”);

//paint the grah
g.append(“path”)
.attr(“d”,arc)
.style(“fill”,function(d,i){return color(i);});

//paint the text
g.append(“text”)
.attr(“transform”,function(d){return “translate(“+arc.centroid(d)+”)”;})
.attr(“dy”,”.35em”)
.style(“text-anchor”,”middle”)
.text(function(d,i){return countArr[i]});

//paint total number in the middle of graph
g.append(“text”)
.attr(“dy”, “.35em”)
.style(“text-anchor”, “middle”)
.text(function(d) { return total+” tickets”; });

}, true);
}
return {
link: link,
restrict: ‘E’,
scope: { data: ‘=’ }
};
});

</body>
</html>

Advertisements