<!doctype html>
<html ng-app="nvd3ex">
<head>
<meta charset="utf-8"/>
<title>Angular-nvD3 with Tab</title>
<link rel="stylesheet" href="https://rawgit.com/novus/nvd3/v1.1.15-beta/nv.d3.min.css"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-route.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="https://rawgit.com/mbostock/d3/master/d3.min.js"></script>
<script src="https://rawgit.com/novus/nvd3/v1.1.15-beta/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v0.1.1/dist/angular-nvd3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="MainController">
<div id="content" ng-view="">
</div>
</body>
</html>
angular.module('nvd3ex', ['ui.bootstrap', 'nvd3', 'ngRoute']);
angular.module('nvd3ex')
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/chart', {templateUrl: 'chart.html', controller: 'ChartController'});
$routeProvider.otherwise({redirectTo: '/chart'});
}])
.controller('MainController', function ($scope, $timeout) {
})
.controller('ChartController', function ($scope, $timeout) {
$scope.selectedTab = -1;
$scope.chart1 = {};
$scope.chart2 = {};
$scope.chart3 = {};
$scope.select = function (arg) {
$scope.selectedTab = arg;
$timeout(function () {
if (arg === 1) $scope.chart1.api.update();
else if (arg === 2) $scope.chart2.api.update();
else if (arg === 3) $scope.chart3.api.update();
});
};
$scope.chart1.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.chart1.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
}
]
}
];
$scope.chart2.options = {
chart: {
type: 'pieChart',
height: 500,
x: function (d) {
return d.key;
},
y: function (d) {
return d.y;
},
showLabels: true,
transitionDuration: 500,
labelThreshold: 0.01,
legend: {
margin: {
top: 5,
right: 35,
bottom: 5,
left: 0
}
}
}
};
$scope.chart2.data = [
{
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: .5
}
];
$scope.chart3.options = {
chart: {
type: 'pieChart',
height: 500,
x: function (d) {
return d.key;
},
y: function (d) {
return d.y;
},
showLabels: true,
transitionDuration: 500,
labelThreshold: 0.01,
legend: {
margin: {
top: 5,
right: 35,
bottom: 5,
left: 0
}
}
}
};
$scope.chart3.data = [
{
key: "Un",
y: 15
},
{
key: "Deux",
y: 12
},
{
key: "Trois",
y: 3
},
{
key: "Quatre",
y: 7
}
];
});
<div class="container">
<div class="row">
<div class="col-xs-12">
<p>Selected tab = {{selectedTab}}</p>
<tabset>
<tab heading="Chart 1" select="select(1)">
<nvd3 options="chart1.options" data="chart1.data" api="chart1.api"></nvd3>
</tab>
<tab heading="Chart 2" select="select(2)">
<nvd3 options="chart2.options" data="chart2.data" api="chart2.api"></nvd3>
</tab>
<tab heading="Chart 3" select="select(3)">
<nvd3 options="chart3.options" data="chart3.data" api="chart3.api"></nvd3>
</tab>
</tabset>
</div>
<div class="col-xs-12">
<p>Simple chart</p>
<nvd3 options="chart1.options" data="chart1.data" api="chart1.api"></nvd3>
</div>
</div>
</div>