angularjs-nvd3-directives
Version:
Angular.js directives for nvd3
94 lines (84 loc) • 2.48 kB
HTML
<meta charset="utf-8">
<html>
<head>
<title>Angular.js nvd3.js Pie Chart Directive</title>
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<script src="js/angular.js"></script>
<script src="js/d3.js"></script>
<script src="js/nv.d3.js"></script>
<script src="../dist/angularjs-nvd3-directives.js"></script>
<link rel="stylesheet" href="stylesheets/nv.d3.css"/>
<script>
var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']);
function ExampleCtrl($scope){
$scope.exampleData = [];
// $scope.exampleData = [
// {
// key: "One",
// y: 5
// },
// {
// key: "Two",
// y: 2
// },
// {
// key: "Three",
// y: 9
// },
// {
// key: "Four",
// y: 7
// },
// {
// key: "Five",
// y: 4
// },
// {
// key: "Six",
// y: 3
// },
// {
// key: "Seven",
// y: 9
// }
// ];
$scope.xFunction = function(){
return function(d) {
return d.key;
};
}
$scope.yFunction = function(){
return function(d) {
return d.y;
};
}
$scope.descriptionFunction = function(){
return function(d){
return d.key;
}
}
$scope.changegraph=function(){
$scope.exampleData.push({ key: "Oitos", y: 20 });
}
}
</script>
</head>
<body ng-app='nvd3TestApp'>
<div ng-controller="ExampleCtrl">
<input type="button" ng-click="changegraph()" value="Change Graph"></input>
<nvd3-pie-chart
data="exampleData"
width="400"
height="400"
x="xFunction()"
y="yFunction()"
showLabels="true"
pieLabelsOutside="false"
showValues="true"
labelType="percent"
objectEquality="true">
</nvd3-pie-chart>
</div>
</body>
</html>