An Angular directive that encapsulates the Mozilla MetricsGraphics library, providing easy configuration.

Use Bower to automatically install the library and its dependencies in your project:

bower install -S angular-metrics-graphics

Alternately you may clone the project repository and use the compiled dist/angular-metrics-graphics.js library file.

The library has the following runtime dependencies:

• Angular.js
• JQuery
• MetricsGraphics
• d3.js

To compile the library from sources, you will require the following dependencies:

• Nodejs
• Bower
• Grunt

Install all build and run time dependencies as follows:

npm install; bower install

Run grunt at the console to see the list of build commands.

In your HTML, add a reference to the angular-metrics-graphics library and associated JavaScript and CSS dependencies:

<link type="text/css" rel="stylesheet" href="path/to/metrics-graphics/dist/metricsgraphics.css" media="all">
<script type="text/javascript" src="path/to/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="path/to/d3/d3.min.js"></script>
<script type="text/javascript" src="path/to/angular/angular.min.js"></script>
<script type="text/javascript" src="path/to/metricsgraphics/dist/metricsgraphics.js"></script>
<script type="text/javascript" src="path/to/angular-metrics-graphics/dist/angular-metrics-graphics.js"></script>

Create a chart and set the data source as the data variable from the controller scope. Set the configuration options from the variable options in the controller scope:

<chart data="{{ data }}" options="{{ options }}"></chart>

Please see the LICENSE file for licensing and copyright information.