nv-chart

AngularJS charting using NVD3.js

View project onGitHub
Download this project as a .zip file Download this project as a tar.gz file

Getting Started

Dependencies

nv-chart requires the following to be installed:

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:

  1. Add a reference to AngularJS:
    <script type="text/javascript" src="angular.js"></script>
  2. Add a reference to D3.js:
    <script type="text/javascript" src="d3.js"></script>
  3. 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" />
  4. 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" />
  5. Define your AngularJS app:
    <html ng-app="myApp">
  6. Define the AngularJS controller you will be using on the page:
    <body ng-controller="MyCtrl">
  7. 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:

  1. Initialize your AngularJS app and include nv-chart as a dependency:
    angular.module('myApp',['nvChart']);
  2. 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}
        ]
    }];
  3. In your AngularJS controller, define a scope variable with your nv-chart options. At a minimum, the chartType and the chartData 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 form function(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 form function(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