CD2H gitForager

myplanetdigital/angular-chart.js

Name: angular-chart.js

Description: Reactive, responsive, beautiful charts for AngularJS using Chart.js: http://jtblin.github.io/angular-chart.js

Forked from: jtblin/angular-chart.js

Created: 2015-07-10 14:02:13.0

Updated: 2015-07-10 14:02:14.0

Pushed: 2015-07-21 21:59:58.0

Homepage:

Size: 2646

Language: HTML

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

angular-chart.js

Beautiful, reactive, responsive charts for Angular.JS using Chart.js.

Demo

Installation

bower install angular-chart.js --save

or copy the files from dist/. Then add the sources to your code (adjust paths as needed) after adding the dependencies for Angular and Chart.js first:

ipt src="../bower_components/angular/angular.min.js"></script>
ipt src="/bower_components/Chart.js/Chart.min.js"></script>
ipt src="/bower_components/angular-chart.js/dist/angular-chart.js"></script>

Utilisation

There are 6 types of charts so 6 directives: chart-line, chart-bar, chart-radar, chart-pie, chart-polar-area, chart-doughnut.

They all use mostly the same API:

data: series data
labels: x axis labels (line, bar, radar) or series labels (pie, doughnut, polar area)
options: chart options (as from Chart.js documentation)
series: (default: []): series labels (line, bar, radar)
colours: data colours (will use default colours if not specified)
getColour: function that returns a colour in case there are not enough (will use random colours if not specified)
click: onclick event handler
hover: onmousemove event handler
legend: (default: false): show legend below the chart

There is another directive chart-base that takes an extra attribute chart-type to define the type dynamically, see stacked bar example.

Browser compatibility

For IE8 and older browsers, you will need to include excanvas. You will also need shims for ES5 functions.

d>
[if lt IE 9]><script src="excanvas.js"></script><![endif]-->
[if lt IE 9]><script src="es5-shim.js"></script><![endif]-->
ad>

Example

Markup

vas id="line" class="chart chart-line" data="data" labels="labels" 
legend="true" series="series" click="onClick"></canvas>

Javascript

lar.module("app", ["chart.js"])
 Optional configuration
onfig(['ChartJsProvider', function (ChartJsProvider) {
// Configure all charts
ChartJsProvider.setOptions({
  colours: ['#FF5252', '#FF8A80'],
  responsive: false
});
// Configure all line charts
ChartJsProvider.setOptions('Line', {
  datasetFill: false
});
)
ontroller("LineCtrl", ['$scope', '$timeout', function ($scope, $timeout) {

cope.labels = ["January", "February", "March", "April", "May", "June", "July"];
cope.series = ['Series A', 'Series B'];
cope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]

cope.onClick = function (points, evt) {
console.log(points, evt);


 Simulate async data update
imeout(function () {
$scope.data = [
  [28, 48, 40, 19, 86, 27, 90],
  [65, 59, 80, 81, 56, 55, 40]
];
 3000);

Reactive

angular-chart.js watch updates on data, series, labels, colours and options and will update, or destroy and recreate, the chart on changes.

Events

angular-chart.js emits the following events on the scope and pass the chart as argument:

create: when chart is created
update: when chart is updated

pe.$on('create', function (event, chart) {
nsole.log(chart);

Note: the event can be emitted multiple times for each chart as the chart can be destroyed and created multiple times during angular watch lifecycle.

angular-chart.js listen to the scope destroy event and destroy the chart when it happens.

Colours

There are a set of 7 default colours. Colours can be replaced using the colours attribute. If there is more data than colours, colours are generated randomly or can be provided via a function through the getColour attribute.

Hex colours are converted to Chart.js colours automatically, including different shades for highlight, fill, stroke, etc.

Issues

Issues or feature requests for Chart.js (e.g. new chart type, new axis, etc.) need to be opened on Chart.js issues tracker

Please check if issue exists and otherwise open issue in github. Please add a link to a plunker, jsbin, or equivalent. Here is a jsbin template for convenience.

Contributing

Pull requests welcome!

Fork the repo
Make your changes
Run tests: npm test
Submit pull request

Contributors

Thank you!

Author

Jerome Touffe-Blin, @jtblin, About me

License

This work is supported by the National Institutes of Health's National Center for Advancing Translational Sciences, Grant Number U24TR002306. This work is solely the responsibility of the creators and does not necessarily represent the official views of the National Institutes of Health.