simonbuechi / adf-widget-chart

D3/C3 chart Widget for Angular Dashboard Framework (ADF)

adf-widget-chart

D3/C3 chart widget for the angular-dashboard-framework.

Build

The widget is build with the help of node, npm, bower and gulp. For a install instruction for node and npm, please have a look here.

Installing bower and gulp

npm install -g bower
npm install -g gulp

Installing dependencies

npm install
bower install

Build the adf-widget-chart

gulp

The compiled and optimized files can be found in the dist directory.

Other build goals

Each goal can be used as parameter for the gulp command.

• clean: removes the dist folder
• lint: checks css and javascript files for common errors
• serve: starts an webserver to test the widget

Usage

Include the script in your index.html and be sure it is loaded after angular and after the angular-dashboard-framework.

<script type="text/javascript" src="bower_components/...d3....js"></script>
<script type="text/javascript" src="bower_components/...c3....js"></script>
<script type="text/javascript" src="bower_components/adf-widget-chart/dist/adf-widget-chart.min.js"></script>

Define a dependency for the module:

angular.module('sample', ['adf', 'adf.widget.chart']);