1.0.7 • Published 10 years ago

c3-angularjs v1.0.7

Weekly downloads
10
License
ISC
Repository
github
Last release
10 years ago

c3-angularjs

Angularjs directive for c3.js charts -> http://c3js.org/gettingstarted.html

This directive depends on angularjs, c3 (which depends on d3) and underscore. Clone this repository and run bower install to grab the dependencies or download c3-angular.js and inject into your app -> angular.module("testapp", ['c3-angularjs'])

Load the scripts and css in the following order:

	<link href="bower_components/c3/c3.css" rel="stylesheet" type="text/css">
	<script src="bower_components/underscore/underscore-min.js"></script>
	<script src="bower_components/d3/d3.min.js" charset="utf-8"></script>
	<script src="bower_components/c3/c3.min.js"></script>
	<script src="bower_components/angular/angular.min.js"></script>
	<script src="c3-angular.js"></script>

Look at the test.html to quickly look at how its set up!

Line/Time-Series

	<c3-line data="data" label="revenue" time-series="times"></c3-line>

Data here can be defined as an array of numbers [30, 200, 100] and times can be defined as an array of strings containing the corresponding times ['2013-01-02', '2013-01-03', '2013-01-04']. Don't provide time-series attribute in order to just do a simple line chart

Donut/pie

	<c3-donut data="data"></c3-donut>

Data here can be defined as an object in the following format:

	$scope.data = {
	    'food': 400,
	    'clothes:': 200,
	   	'utilities': 1000,
	}

Add pie as an attribute to make the chart a pie chart

Bar

	<c3-bar data="test"></c3-bar>

Data here can be defined as an object in the following format:

	$scope.data = {
	    March: 10,
    	April: 15,
   		May: 30
	}

Generic Directive

In order to have the ability to customize your charts fully you can use the generic chart directive which takes in data as a required attribute. This data object follows the format as specified in c3 documentation

    <c3-chart data="data"></c3-chart>

Optional attributes include chartid (if undefined, a random id is defined), grid, padding, size, color and axis. Refer to c3 Documentation for the format of these objects.

1.0.7

10 years ago

1.0.6

10 years ago

1.0.5

10 years ago

1.0.4

10 years ago

1.0.3

10 years ago

1.0.2

10 years ago

1.0.1

10 years ago

1.0.0

10 years ago