Examples
Basic Example
HTML:
<html ng-app="myApp"> <head> <script type="text/javascript" src="angular.js"></script> <script type="text/javascript" src="d3.js"></script> <script type="text/javascript" src="nv.d3.js"></script> <script type="text/javascript" src="nv-chart.js"></script> <link rel="stylesheet" type="text/css" href="nv.d3.css" /> <link rel="stylesheet" type="text/css" href="nv-chart.css" /> </head> <body ng-controller="MyCtrl"> <div class="chartStyle" nv-chart="chartOptions"></div> </body> </html>
HTML breakdown:
- Add a reference to AngularJS:
<script type="text/javascript" src="angular.js"></script>
- Add a reference to D3.js:
<script type="text/javascript" src="d3.js"></script>
- Add a reference to NVD3.js script and css:
<script type="text/javascript" src="nv.d3.js"></script> <link rel="stylesheet" type="text/css" href="nv.d3.css" />
- Add a reference to nv-chart script and css (css is currently optional):
<script type="text/javascript" src="nv-chart.js"></script> <link rel="stylesheet" type="text/css" href="nv-chart.css" />
- Define your AngularJS app:
<html ng-app="myApp">
- Define the AngularJS controller you will be using on the page:
<body ng-controller="MyCtrl">
- Add the following to the page where you would like your chart to be.
chartOptions
is a scope variable that will be defined in the AngularJS controller:
<div class="chartStyle" nv-chart="chartOptions"></div>
Javascript:
angular.module('myApp',['nvChart']); function MyCtrl($scope) { $scope.chartOptions = { chartType: 'lineChart', data: 'chartData' }; $scope.chartData = [{ key: 'Series 1', values:[ {'x': 1, 'y' : 5}, {'x': 2, 'y' : 10}, {'x': 3, 'y' : 15} ] }]; };
Javascript breakdown:
- Initialize your AngularJS app and include nv-chart as a dependency:
angular.module('myApp',['nvChart']);
- In your AngularJS controller, define a scope variable with your chart data:
$scope.chartData = [{ key: 'Series 1', values:[ {'x': 1, 'y' : 5}, {'x': 2, 'y' : 10}, {'x': 3, 'y' : 15} ] }];
- In your AngularJS controller, define a scope variable with your nv-chart options. At a minimum, the
chartType
and thechartData
options must be set:
$scope.chartOptions = { chartType: 'lineChart', data: 'chartData' };
Result:
Multiple Series
HTML:
<html ng-app="myApp"> <head> <script type="text/javascript" src="angular.js"></script> <script type="text/javascript" src="d3.js"></script> <script type="text/javascript" src="nv.d3.js"></script> <script type="text/javascript" src="nv-chart.js"></script> <link rel="stylesheet" type="text/css" href="nv.d3.css" /> <link rel="stylesheet" type="text/css" href="nv-chart.css" /> </head> <body ng-controller="MyCtrl"> <div class="chartStyle" nv-chart="chartOptions"></div> </body> </html>
Scope variables:
$scope.chartOptions = { chartType: 'multiBarChart', data: 'chartDataOne', margin: { top: 0, bottom: 20, left: 40, right: 10 }, };
$scope.chartData = function() { var sin = [], cos = []; for (var i = 0; i < 100; i++) { sin.push({ x: i, y: Math.sin(i / 10) }); cos.push({ x: i, y: .5 * Math.cos(i / 10) }); } return [ { values: sin, key: 'Sine Wave' }, { values: cos, key: 'Cosine Wave' } ]; }();
Result:
API Documentation
Options passed to nv-chart are logically mapped to NVD3 options.
Chart options structure:
var chartOptions = { // required options chartType: null, data: [], // general chart properties color: [], margin: {}, tooltips: true, // x-axis xValue: null, xAxisLabel: null, xAxisTickFormat: null, // y-axis yValue: null, yAxisLabel: null, yAxisTickFormat: null, }
Chart data structure:
var chartData = { // required options chartType: null, data: [], // general chart properties color: [], margin: {}, tooltips: true, // x-axis xValue: null, xAxisLabel: null, xAxisTickFormat: null, // y-axis yValue: null, yAxisLabel: null, yAxisTickFormat: null, }
Chart Options
General
-
chartType
: One of"bulletChart"
,"cumulativeLineChart"
,"discreteBarChart"
,"historicalBarChart"
,"lineChart"
,"linePlusBarChart"
,"linePlusBarWithFocusChart"
,"lineWithFisheyeChart"
,"lineWithFocusChart"
,"multiBarChart"
,"multiBarHorizontalChart"
,"multiBarTimeSeriesChart"
,"pieChart"
,"scatterChart"
,"scatterPlusLineChart"
,"sparkline"
,"stackedAreaChart"
-
data
: Can either be a string of a scope variable name or an array containing the data to be charted. Because of performance concerns, nv-chart only watches strings for scope reference changes -
color
: An array of D3 accepted color values["#ffeeaa", "#f9f", "red"]
used to color the different data sets -
margin
: An object of the form{ top: 10, bottom: 10, left: 10, right:10 }
-
color
: An array of D3 accepted color values["#ffeeaa", "#f9f", "red"]
used to color the different data sets -
tooltips
(Default: true): Displays tooltips if true -
showValues
(Default: false): Displays the values in the chart if true -
staggerLabels
(Default: false): Staggers the x-axis labels for readability if true -
useInteractiveGuideline
(Default: true): Displays an interactive guideline on the graph if true -
transitionDuration
(Default: 0): A number indicating the speed of transitions -
showXAxis
(Default: true): Displays the x-axis if true -
xValue
: Sets the x-accessor to the specified constant or function of the formfunction(d, i) { }
-
xAxisLabel
: Sets the label of the x-axis -
xAxisTickFormat
: Sets the x-axis tick format to the specified D3 format string or function -
xShowMaxMin
(Default: true): Display the max/min values on the x-axis -
x2AxisLabel
: Sets the label of the x2-axis -
x2AxisTickFormat
: Sets the x2-axis tick format to the specified D3 format string or function -
showYAxis
(Default: true): Displays the y-axis if true -
yValue
: Sets the y-accessor to the specified constant or function of the formfunction(d, i) { }
-
yAxisLabel
: Sets the label of the y-axis -
yAxisTickFormat
: Sets the y-axis tick format to the specified D3 format string or function -
yShowMaxMin
(Default: true): Display the max/min values on the y-axis -
y1AxisLabel
: Sets the label of the y1-axis -
y1AxisTickFormat
: Sets the y1-axis tick format to the specified D3 format string or function -
y2AxisLabel
: Sets the label of the y2-axis -
y2AxisTickFormat
: Sets the y2-axis tick format to the specified D3 format string or function -
y3AxisLabel
: Sets the label of the y3-axis -
y3AxisTickFormat
: Sets the y3-axis tick format to the specified D3 format string or function -
y4AxisLabel
: Sets the label of the y4-axis 41
-
y4AxisTickFormat
: Sets the y4-axis tick format to the specified D3 format string or function
Pie Chart Specific Options
-
showLabels
(Default: true): Displays labels if true -
labelThreshold
(Default: 0.5): Configure the minimum slice size for labels to show up -
labelType
(Default: key): Configure what type of data to show in the label. One of:"key"
,"value"
or"percent"
-
donut
(Default: false): Sets the chart to donut mode -
donutRatio
(Default: 0): Configure the size of the donut hole
Scatter Chart Specific Options
-
showDistX
(Default: false): Show distribution of values on x-axis -
showDistY
(Default: false): Show distribution of values on y-axis -
onlyCircles
(Default: false): All points are plotted as circles