# angularjs-nvd3-directives **Repository Path**: justinliao/angularjs-nvd3-directives ## Basic Information - **Project Name**: angularjs-nvd3-directives - **Description**: Angular.js directives for nvd3.js - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2015-07-24 - **Last Updated**: 2024-06-06 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ##[Angular.js](http://angularjs.org/) Directives for [nvd3.js](http://www.nvd3.org), [d3.js](http://www.d3js.org) charts [![Build Status](https://travis-ci.org/angularjs-nvd3-directives/angularjs-nvd3-directives.png?branch=master)](https://travis-ci.org/angularjs-nvd3-directives/angularjs-nvd3-directives) [![Dependencies Status](https://david-dm.org/angularjs-nvd3-directives/angularjs-nvd3-directives.png)](https://david-dm.org/angularjs-nvd3-directives/angularjs-nvd3-directives#info=dependencies) [![devDependency Status](https://david-dm.org/angularjs-nvd3-directives/angularjs-nvd3-directives/dev-status.png)](https://david-dm.org/angularjs-nvd3-directives/angularjs-nvd3-directives#info=devDependencies) [![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/angularjs-nvd3-directives/angularjs-nvd3-directives/trend.png)](https://bitdeli.com/free "Bitdeli Badge") [![Stories in Ready](https://badge.waffle.io/angularjs-nvd3-directives/angularjs-nvd3-directives.png?label=ready)](https://waffle.io/angularjs-nvd3-directives/angularjs-nvd3-directives) [![Gitter chat](https://badges.gitter.im/angularjs-nvd3-directives/angularjs-nvd3-directives.png)](https://gitter.im/angularjs-nvd3-directives/angularjs-nvd3-directives) ![Line Charts](http://angularjs-nvd3-directives.github.io/img/line.chart.png "Line Charts") ```html ``` ![Stacked Area Charts](http://angularjs-nvd3-directives.github.io/img/stacked.area.png "Stacked Area Charts") ```html ``` [More Examples](http://angularjs-nvd3-directives.github.io/angularjs-nvd3-directives) ## Basic Quick Start ### 1. Install dependencies in your application with [bower](http://bower.io/) Install [these](http://bower.io/#installing-bower) if you don't already have it. #### [Angular.js](http://angularjs.org/) bower install angular --save #### [d3.js](http://www.d3js.org) bower install d3 --save #### [nvd3.js](http://www.nvd3.org) bower install nvd3 --save #### [Angularjs-nvd3-Directives.js](http://angularjs-nvd3-directives.github.io/angularjs-nvd3-directives) bower install angularjs-nvd3-directives --save ### 2. Create basic [Angular.js](http://angularjs.org/) application Create a html page and start with the following code. For [d3.js](http://www.d3js.org) it is important that the page include ``````, otherwise you will get error messages about special characters. ```html ``` Include the downloaded dependencies in the `````` section of the html. ```html ``` Create a ``` ``` > For this example we are hardcoding the data to make it easer to quickly create a chart. In the wild, this would obviously not be ideal, but it is more involved than a basic quick start can accomplish. Close out the head ```html ``` Setup the `````` and the rest of the angular application ```html ``` The add the ```ng-app``` attribute to the `````` element, and set the value to ```nvd3TestApp```, which is the same value used in the script block above ```angular.module('nvd3TestApp', ...)```. Add the Directive to the body of the application ```html
``` The directive is wrapped inside of a ```
``` that has a ```ng-controller``` attribute that has the same value as the name of the function created in the ```