Angular.js Directives for nvd3.js, d3.js charts
Basic Quick Start
1. Install Dependencies with bower
Install these if you don't already have it.
2. Create basic Angular.js application
Create a html page and start with the following code. For d3.js it is important the the page include
<meta charset="utf-8">, otherwise you will get error messages about special characters.
Include the downloaded dependencies in the
<head> section of the html.
<script> block for the angular application
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
<body> and the rest of the angular application
The add the
ng-app attribute to the
<body> element, and set the value to
nvd3TestApp, which is the same value used in the script block above
Add the Directive to the body of the application
The directive is wrapped inside of a
<div> that has a
ng-controller attribute that has the same value as the name of the function created in the
<script> block above.
Close out the
If everything is setup correctly, you should be able to open the page and see a basic line chart.