This is a code excerpt from the book, D3 on Angular. http://leanpub.com/d3angularjs
Last active
September 24, 2015 04:16
-
-
Save vicapow/9556184 to your computer and use it in GitHub Desktop.
A modest real time data dashboard using Angular + D3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[73, 34, 42, 89] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script> | |
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
</head> | |
<body ng-app="myApp" ng-controller="MainCtrl"> | |
<donut-chart data="donutData"></donut-chart> | |
<script> | |
var myApp = angular.module('myApp', []); | |
myApp.controller('MainCtrl', function($scope, $http, $interval){ | |
$interval(function(){ | |
$http.get('donut-data-api.json').then(function(response){ | |
// your API would presumably be sending new data, not the same | |
// data each time! | |
var data = response.data | |
.map(function(d){ return d * ( 1 - Math.random() / 10) }); | |
$scope.donutData = data; | |
}, function(err){ | |
throw err; | |
}); | |
}, 1000); | |
}); | |
myApp.directive('donutChart', function(){ | |
function link(scope, el, attr){ | |
var color = d3.scale.category10(); | |
var width = 200; | |
var height = 200; | |
var min = Math.min(width, height); | |
var svg = d3.select(el[0]).append('svg'); | |
var pie = d3.layout.pie().sort(null); | |
var arc = d3.svg.arc() | |
.outerRadius(min / 2 * 0.9) | |
.innerRadius(min / 2 * 0.5); | |
svg.attr({width: width, height: height}); | |
// center the donut chart | |
var g = svg.append('g') | |
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); | |
// add the <path>s for each arc slice | |
var arcs = g.selectAll('path'); | |
scope.$watch('data', function(data){ | |
if(!data){ return; } | |
arcs = arcs.data(pie(data)); | |
arcs.exit().remove(); | |
arcs.enter().append('path') | |
.style('stroke', 'white') | |
.attr('fill', function(d, i){ return color(i) }); | |
// update all the arcs (not just the ones that might have been added) | |
arcs.attr('d', arc); | |
}, true); | |
} | |
return { | |
link: link, | |
restrict: 'E', | |
scope: { data: '=' } | |
}; | |
}); | |
</script> | |
</body> | |
</html> |
Hi,
this example not working. i downloaded the .zip and i have tried to execute the html index but not working. i think it's a really modest dash.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi vicapow, thanks for this donut chart. i'm trying to get it working in my web app. Unfortunately there is just an empty svg shown up. i would like to ask if maybe you have an idea on this issue because i couldn't solve it so far. If you want you can have look at my repository: https://github.com/DavidH1904/d3_webapp/tree/master
best regards