angular-chart

AngularJS directive for adjustable dynamically updating c3 charts
4 people use it
Author: 3898310?v=3 maxklenk

angular-chart Build Status Coverage Status Dependency Status

angular-chart is a AngularJS directive, which is build on top of c3 a d3-based chart library.

Usage

Please see the Github repository for the most current updates: https://github.com/maxklenk/angular-chart

Schema

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:

name : String

Optional name for the row.

type : String

Possible values: datetime, numeric, string

format : String

The format is used to specify how the timestamps are saved if they are different to %Y-%m-%dT%H:%M:%S

Options

The following attributes define the chart itself and how to display the data.


data : Object


orientation : String

Possible Values: json(default), columns, rows

Defines in what orientation the data is saved. Please see C3 Data Examples for examples.


watchLimit : Integer

Define a custom limit to stop watching for changes inside the dataset and only watch for changes in the number of items. Default: 100


rows : Object (required)

Defines the columns which should be displayed in the chart. Each row can contain the following:


rows.key : String (required)

The column key which identifies the value in each record.


rows.type : String

Possible values: line, spline, bar, scatter, area, area-spline, step, area-step, step


rows.name : String

Optional name for the row.


rows.show : String

Defines if the row should be rendered in the chart.


rows.color : String

Defines the color for this row.


rows.axis : String

Possible values: y, y2

Defines the y axis the row is linked.


type : String

Possible values: line, spline, bar, scatter, donut

Defines which kind of chart should be rendered. The value will be the default for rows.type.


typeSelector : boolean

When true a selector to switch between multi and pie charts is displayed. Default: false


xAxis : Object

Defines which column to use and how to display it:


xAxis.key : String

The column key which identifies which value should be shown on the xAxis.


xAxis.displayFormat : String | Function

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(); }


xAxis.selector : boolean

Shows the dropdown to choose which xAxis you want to use. Default: false


yAxis : Object

Defines yAxis display.


yAxis.label : String

Label displayed for the Y axis


size : Object

Defines a fixed size of the chart.


size.height : Int

A fixed height of the chart.


size.width : Int

A fixed width of the chart.


resize: function(size)

Resize the chart, to a provided size or without parameters to fill the suronding element.


groups : Array

Stacks bar together, like in this example.


subchart : Object

Defines the subchart like in this example.


subchart.selector : boolean

If true a subchart toggle button is displayed.


subchart.show : boolean

If true a subchart for zooming is displayed.


zoom : Object

Defines the zoom functionality of the chart.


zoom.enable : boolean

If true it is possible to zoom using the mouse wheel. Default: false


zoom.range : Array [a, b]

The current zoomed in range can get and set here. Works also for the subchart.


zoom.onzoom : function

Callback whenever a zoom event is fired. Works also for the subchart.


legend : Object

Defines the legend.


legend.selector : boolean

If true a custom legend is displayed. Default: false


legend.show : boolean

If flase the default legend is hidden. Default: true


annotation : Array of Objects

Defines the annotation lines.

{value: X, text: 'LABEL', axis: 'AXIS'} AXIS can be x, y, y2.


selection : Object

Defines which Items can be selected and are currently selected.


selection.enabled : Boolean

Allows selection of chart elements. Default: false


selection.multiple : Boolean

Allows selection of multiple chart elements if selection is enabled at all. Default: false


selection.onselected : function

Callback whenever a new selection is added.


selection.onunselected : function

Callback whenever a selection is removed.


selection.selected : Array

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] }


onclick : function

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) };

resize : function

Call this function to trigger the c3 resize() function (http://c3js.org/samples/api_resize.html)


Development Stories in Ready Gitter chat

We use Karma and jshint to ensure the quality of the code. The easiest way to run these checks is to use grunt: sh npm install -g bower grunt-cli npm install grunt

Contributing

Please submit all pull requests the against develop branch. Make sure it passes the CI Build Status and add tests to cover your code Coverage Status. Thanks!

Authors

Max Klenk

Copyright and license

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.

comments powered by Disqus
This page was last updated almost 3 years ago.