blob: 30722baa88baff7292dfb2f7c571ebfe068c5477 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
tc-angular-chartjs
==================
[](https://travis-ci.org/carlcraig/tc-angular-chartjs)
[Documentation](http://carlcraig.github.io/tc-angular-chartjs/)
### Add Chart.js to your angular applications
tc-angular-chartjs provides you with directives for all chartjs chart types.
- Line Charts
- Bar Charts
- Radar Charts
- Polar Area Charts
- Pie Charts
- Doughnut Charts
You can see all the [Chart.js Documentation](http://www.chartjs.org/docs/) on their website.
Installation
============
Grab the latest version of `Chart.js` and `tc-angular-chartjs`.
Load `Chart.js` and `tc-angular-chartjs` as you would with normal scripts.
```html
<script type="text/javascript" src="js/Chart.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/tc-angular-chartjs.js"></script>
```
Make sure you use `dist/tc-angular-chartjs.js` or `dist/tc-angular-chartjs.min.js`
Require `tc.chartjs` in your application modules where you require `Chart.js`.
```javascript
angular.module( 'app', ['tc.chartjs']);
```
Basic Usage
===========
There are 6 different directives.
- tc-chartjs
- tc-chartjs-line
- tc-chartjs-bar
- tc-chartjs-radar
- tc-chartjs-polararea
- tc-chartjs-pie
- tc-chartjs-doughnut
Just place one of these directives on a `canvas` element to create a Chart.js chart.
```html
<canvas tc-chartjs-doughnut width="350" height="350"></canvas>
```
You will also want to give the chart some `data` and `options`. These can be provided
by assigning $scope variables to `chart-options` and `chart-data` attributes on the same canvas element.
```html
<canvas tc-chartjs-doughnut chart-data="myData" chart-options="myOptions" width="350" height="350"></canvas>
```
```javascript
$scope.myData = [
{ value : 50, color : "#F7464A" },
{ value : 90, color : "#E2EAE9" },
{ value : 75, color : "#D4CCC5" },
{ value : 30, color : "#949FB1"}
];
$scope.myOptions = {
// Chart.js options can go here.
};
```
Using the `tc-chartjs` directive
================================
When using the `tc-chartjs` directive you will need to add an additional attribute to
say which type of chart should be created.
Just attach a `chart-type=""` attribute to the canvas element.
```html
<canvas tc-chartjs chart-type="doughnut" chart-data="data" chart-options="options" width="350" height="350"></canvas>
```
Available Types:
- line
- bar
- radar
- polararea
- pie
- doughnut
Passing another value to chart-type than the above will try to create a chart of
that type, which is useful if you have extended Chart.js with custom chart types,
e.g. through plugins.
Contributing
============
- [Open a Pull Request (PR)](https://github.com/carlcraig/tc-angular-chartjs/pull/new/master)
- Make sure your PR is on a new branch you created from the latest version of master branch
- Please do not open a PR from your master branch
- Open a PR even if your code is incomplete to start a discussion and to collect feedback
- Please make sure all unit tests pass, and add new tests for any added features.
License
=======
tc-angular-chartjs is dual licensed with the Apache-2.0 or MIT license.
See LICENSE-APACHE-2.0 and LICENSE-MIT for more details.
|
