<!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"/>
<link rel="stylesheet" href="//mgcrea.github.io/angular-strap/static/styles/angular-motion.min.css">
<link rel="stylesheet" href="//mgcrea.github.io/angular-strap/static/styles/bootstrap-additions.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="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-sanitize.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-animate.js"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.1.6"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.1.6"></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', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap', '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.tabs = [
{
"title": "Chart 1",
"page": "template.chart1.html"
},
{
"title": "Chart 2",
"page": "template.chart2.html"
},
{
"title": "Chart 3",
"page": "template.chart3.html"
}
];
$scope.tabs.activeTab = 0;
$scope.$watch("tabs.activeTab", function (newValue) {
//console.log("activeTab="+newValue+" chart1="+$scope.chart1.api);
if (!$scope.chart1.api) return;
if (newValue === 0) {
$timeout(function () {
$scope.chart1.api.update();
}, 100);
} else if (newValue === 1) {
$timeout(function () {
$scope.chart2.api.update();
}, 100);
}
else if (newValue === 2) {
$timeout(function () {
$scope.chart4.api.update();
}, 100);
}
});
$scope.chart1 = {};
$scope.chart2 = {};
$scope.chart3 = {};
$scope.chart4 = {};
$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
}
];
$scope.chart4.options = {
chart: {
type: 'multiBarHorizontalChart',
height: 450,
x: function (d) {
return d.label;
},
y: function (d) {
return d.value;
},
showControls: true,
showValues: true,
transitionDuration: 500,
xAxis: {
showMaxMin: false
},
yAxis: {
axisLabel: 'Values',
tickFormat: function (d) {
return d3.format(',.2f')(d);
}
}
}
};
$scope.chart4.data = [
{
"key": "Series1",
"color": "#d62728",
"values": [
{
"label": "Group A",
"value": -1.8746444827653
},
{
"label": "Group B",
"value": -8.0961543492239
},
{
"label": "Group C",
"value": -0.57072943117674
},
{
"label": "Group D",
"value": -2.4174010336624
},
{
"label": "Group E",
"value": -0.72009071426284
},
{
"label": "Group F",
"value": -0.77154485523777
},
{
"label": "Group G",
"value": -0.90152097798131
},
{
"label": "Group H",
"value": -0.91445417330854
},
{
"label": "Group I",
"value": -0.055746319141851
}
]
},
{
"key": "Series2",
"color": "#1f77b4",
"values": [
{
"label": "Group A",
"value": 25.307646510375
},
{
"label": "Group B",
"value": 16.756779544553
},
{
"label": "Group C",
"value": 18.451534877007
},
{
"label": "Group D",
"value": 8.6142352811805
},
{
"label": "Group E",
"value": 7.8082472075876
},
{
"label": "Group F",
"value": 5.259101026956
},
{
"label": "Group G",
"value": 0.30947953487127
},
{
"label": "Group H",
"value": 0
},
{
"label": "Group I",
"value": 0
}
]
}
];
});
<div class="container">
<div class="row">
<div class="col-xs-12">
<p>Selected tab = {{tabs.activeTab}}</p>
<div bs-active-pane="tabs.activeTab" bs-tabs>
<div ng-repeat="tab in tabs" title="{{ tab.title }}" bs-pane>
<div class="panel panel-default" >
<div ng-include="tab.page"></div>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<p>Simple chart</p>
<nvd3 options="chart1.options" data="chart1.data" api="chart1.api"></nvd3>
</div>
</div>
</div>
<nvd3 options="chart1.options" data="chart1.data" api="chart1.api"></nvd3>
<nvd3 options="chart2.options" data="chart2.data" api="chart2.api"></nvd3>
<nvd3 options="chart4.options" data="chart4.data" api="chart4.api"></nvd3>