angular-chart is a AngularJS directive, which is build on top of c3 a d3-based chart library.
You can get it from Bower:
bower install angular-chartAdd everything to your index.html:
<link rel="stylesheet" href="bower_components/c3/c3.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/angular-circular-navigation/angular-circular-navigation.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/d3/d3.js"></script>
<script src="bower_components/c3/c3.js"></script>
<script src="bower_components/angular-chart/angular-chart.js"></script>
<script src="bower_components/angular-circular-navigation/angular-circular-navigation.js"></script>And specify the directive in your module dependencies:
angular.module('myApp', ['angularChart'])Add the corresponding data in your controller:
$scope.dataset = [
{
'day': '2013-01-02_00:00:00',
'sales': 13461.295202,
'income': 12365.053
}
];
$scope.schema = {
day: {
type: 'datetime',
format: '%Y-%m-%d_%H:%M:%S',
name: 'Date'
}
};
$scope.options = {
rows: [{
key: 'income',
type: 'bar'
}, {
key: 'sales'
}],
xAxis: {
key: 'day',
displayFormat: '%Y-%m-%d %H:%M:%S'
}
};Then you are ready to use the directive in your view:
<div ng-controller="Controller">
<angularchart
dataset="dataset"
schema="schema"
options="options">
</angularchart>
</div>The Schema is optional, it provides additional information about the dataset. It contains objects for all columns of the dataset that have to specified further. Therefor it provides these keys:
Optional name for the row.
Possible values: datetime, numeric, string
The format is used to specify how the timestamps are saved if they are different to %Y-%m-%dT%H:%M:%S
The following attributes define the chart itself and how to display the data.
Possible Values: json(default), columns, rows
Defines in what format the data is saved. Please see C3 Data Examples for examples.
Defines the columns which should be displayed in the chart. Each row can contain the following:
The column key which identifies the value in each record.
Possible values: line, spline, bar, scatter, area, area-spline, step, area-step, step
Optional name for the row.
Defines if the row should be rendered in the chart.
Defines the color for this row.
Possible values: y, y2
Defines the y axis the row is linked.
Possible values: line, spline, bar, scatter, donut
Defines which kind of chart should be rendered. The value will be the default for rows.type.
When true a selector to switch between multi and pie charts is displayed. Default: false
Defines which column to use and how to display it:
The column key which identifies which value should be shown on the xAxis.
If the xAxis displays a timestamp the format of if can be defined by passing a String which follows the Time Formatting of D3. Alternatively a custom function can be passed.
Sample: function (x) { return x.getFullYear(); }
Shows the dropdown to choose which xAxis you want to use. Default: false
Defines yAxis display.
Label displayed for the Y axis
Stacks bar together, like in this example.
Defines the subchart like in this example.
If true a subchart toggle button is displayed.
If true a subchart for zooming is displayed.
Defines the zoom functionality of the chart.
If true it is possible to zoom using the mouse wheel. Default: false
The current zoomed in range can get and set here. Works also for the subchart.
Callback whenever a zoom event is fired. Works also for the subchart.
Defines the legend.
If true a custom legend is displayed. Default: false
If flase the default legend is hidden. Default: true
Defines the annotation lines.
{value: X, text: 'LABEL', axis: 'AXIS'} AXIS can be x, y, y2.
Defines which Items can be selected and are currently selected.
Allows selection of chart elements. Default: false
Allows selection of multiple chart elements if selection is enabled at all. Default: false
Callback whenever a new selection is added.
Callback whenever a selection is removed.
Contains an array with all selected points of the chart:
Multichart (line, spline, bar, scatter):
{
value: VALUE,
id: COLUMN_NAME,
index: X_AXIS_INDEX
}
Pie-, Donut chart: (Currently adding a selection in the Array will not add the selection in the chart)
{
id: COLUMN_NAME,
values: [ALL_COLUMN_VALUES]
}
Triggered when you click on a data point.
Sample: function(d, element) { console.log('Point at', d.x, 'of the serie', d.name 'has been clicked; corresponding htmlElement:', element) };
We use Karma and jshint to ensure the quality of the code. The easiest way to run these checks is to use grunt:
npm install -g bower grunt-cli
npm install
gruntPlease submit all pull requests the against develop branch. Make sure it passes the CI 
Max Klenk
The MIT License
Copyright (c) 2014 Max Klenk
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.