angularjs-nvd3-directives
Version:
Angular.js directives for nvd3
99 lines (84 loc) • 1.95 kB
HTML
<meta charset="utf-8">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Angular.js nvd3.js Pie Chart Directive</title>
<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 = [{
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.width = 500;
$scope.height = 500;
$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;
}
}
}
</script>
</head>
<body ng-app='nvd3TestApp'>
<div ng-controller="ExampleCtrl">
<nvd3-pie-chart
id="exampleId"
data="exampleData"
x="xFunction()"
y="yFunction()"
width="{{ width }}"
height="{{ height }}"
showLabels="true"
pieLabelsOutside="false"
showValues="true"
labelType="percent">
<svg></svg>
</nvd3-pie-chart>
<div>
<label for="">Width</label>
<input type="text" ng-model="width" />
</div>
<div>
<label for="">Height</label>
<input type="text" ng-model="height" />
</div>
</div>
</body>
</html>