angularjs-nvd3-directives

##Angular.js Directives for nvd3.js, d3.js charts


!Line Charts

``html
data="exampleData"
width="600"
height="350"
showXAxis="true"
showYAxis="true"
xAxisTickFormat="xAxisTickFormat_Date_Format()"
yAxisTickFormat="yAxisFormatFunction()">

`

!Stacked Area Charts

`html
data="exampleData"
width="600"
height="350"
showXAxis="true"
showYAxis="true"
xAxisTickFormat="xAxisTickFormat()">

`

More Examples

Basic Quick Start

$3

Install these if you don't already have it.

#### Angular.js

bower install angular --save

#### d3.js

bower install d3 --save

#### nvd3.js

bower install nvd3 --save

#### Angularjs-nvd3-Directives.js

bower install angularjs-nvd3-directives --save



$3

Create a html page and start with the following code. For d3.js 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 `