<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../angular.js"></script>
<script src="../bower_components/d3/d3.js"></script>
<script src="../bower_components/nvd3/build/nv.d3.js"></script>
<script src="../bower_components/angular-nvd3/dist/angular-nvd3.js"></script>
<link rel="stylesheet" href="../bower_components/nvd3/build/nv.d3.css">
<script>
angular.module('myApp',['nvd3'])
.controller('myCtrl',function($scope){
$scope.options={
chart: {
type: 'discreteBarChart',
height: 450,
margin : {
top: 20,
right: 20,
bottom: 60,
left: 55
},
x: function(d){ return d.label; },
y: function(d){ return d.value; },
showValues: true,
valueFormat: function(d){
return d3.format(',.4f')(d);
},
transitionDuration: 500,
xAxis: {
axisLabel: 'X Axis'
},
yAxis: {
axisLabel: 'Y Axis',
axisLabelDistance: 30
}
}
};
$scope.data=[{
key: "Cumulative Return",
values: [
{ "label" : "A" , "value" : -29.765957771107 },
{ "label" : "B" , "value" : 0 },
{ "label" : "C" , "value" : 32.807804682612 },
{ "label" : "D" , "value" : 196.45946739256 },
{ "label" : "E" , "value" : 0.19434030906893 },
{ "label" : "F" , "value" : -98.079782601442 },
{ "label" : "G" , "value" : -13.925743130903 },
{ "label" : "H" , "value" : -5.1387322875705 }
]
}];
})
</script>
</head>
<body ng-controller="myCtrl">
<nvd3 options='options' data='data'></nvd3>
</body>
</html>
