├── .bowerrc
├── .gitignore
├── README.md
├── bower.json
├── chartjs-directive.js
├── index.html
└── package.json


/.bowerrc:
--------------------------------------------------------------------------------
1 | {
2 |   "directory": "vendor",
3 |   "analytics": false,
4 |   "timeout": 120000
5 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | vendor
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Angular Chart-js Directive
 2 | [Homepage](http://earlonrails.github.io/angular-chartjs-directive/)
 3 | 
 4 | 
 5 | ## Usage
 6 | 1. Include [chartjs](https://github.com/nnnick/Chart.js) via script tag, can use bower or download min
 7 | 2. Include `chartjs-directive.js`.
 8 | 3. Add `chartjs-directive` as a dependency to your app.
 9 | 4. Make `<chart>`s.
10 | 
11 | ## Bower
12 | Installable via `bower`:
13 | 
14 | ```bash
15 | bower install angular-chartjs-directive
16 | ```
17 | 
18 | ## Example
19 | See the [homepage](http://earlonrails.github.io/angular-chartjs-directive/) for an example.
20 | 
21 | ```html
22 | <div ng-app="chartjs-directive">
23 |   <chart value="myChart"></chart>
24 | </div>
25 | ```
26 | 
27 | ## License
28 | MIT
29 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-chartjs-directive",
 3 |   "version": "1.0.0",
 4 |   "main": "./chartjs-directive.js",
 5 |   "ignore": [
 6 |     ".bowerrc",
 7 |     ".gitignore",
 8 |     "bower.json",
 9 |     "package.json",
10 |     "index.html",
11 |     "vendor",
12 |     "README.md"
13 |   ],
14 |   "dependencies": {
15 |     "angular": ">=1",
16 |     "chartjs" : "<=2.1.6"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/chartjs-directive.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | angular.module('chartjs-directive', []).
 4 |     .directive('chart', function() {
 5 |         var baseWidth = 600;
 6 |         var baseHeight = 400;
 7 | 
 8 |         return {
 9 |             restrict: 'E',
10 |             template: '<canvas></canvas>',
11 |             scope: {
12 |                 chartObject: "=value"
13 |             },
14 |             link: function(scope, element, attrs) {
15 |                 var canvas, context, chart, options;
16 |                 var init = function(type) {
17 |                     element.empty();
18 |                     element.append('<canvas></canvas>');
19 | 
20 |                     canvas = element.find("canvas")[0];
21 |                     context = canvas.getContext("2d");
22 | 
23 |                     options = {
24 |                         type: type || "Line",
25 |                         width: attrs.width || baseWidth,
26 |                         height: attrs.height || baseHeight,
27 |                         last_type: false
28 |                     };
29 |                     canvas.height = options.height;
30 |                     canvas.width = options.width;
31 |                     chart = new Chart(context);
32 |                 };
33 |                 init(attrs.type);
34 | 
35 |                 scope.$watch(function() {
36 |                     return element.attr('type');
37 |                 }, function(value) {
38 |                     if (!value) return;
39 |                     init(value);
40 |                     var chartType = options.type;
41 |                 });
42 | 
43 |                 //Update when charts data changes
44 |                 scope.$watch(function() {
45 |                     return scope.chartObject;
46 |                 }, function(value) {
47 |                     if (!value) return;
48 | 
49 |                     var chartType = options.type;
50 |                     if (scope.chartInstance) {
51 |                         scope.chartInstance.destroy();
52 |                     }
53 |                     if (typeof scope.chartObject !== 'undefined') {
54 |                         scope.chartInstance = chart[chartType](scope.chartObject.data, scope.chartObject.options);
55 |                     }
56 |                 }, true);
57 |             }
58 |         }
59 |     });
60 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en" ng-app="myApp">
  3 |   <head>
  4 |     <meta charset="utf-8"/>
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  6 |     <title>AngularJS Chartjs Directive</title>
  7 |     <meta name="description" content="chartjs-directive.">
  8 |     <link href="http://netdna.bootstrapcdn.com/bootswatch/2.3.0/cerulean/bootstrap.min.css" rel="stylesheet">
  9 |     <style>
 10 |       #editor {
 11 |         position: absolute;
 12 |         top: 0;
 13 |         right: 0;
 14 |         bottom: 0;
 15 |         left: 0;
 16 |       }
 17 |     </style>
 18 |   </head>
 19 |   <body class="container" ng-controller="myController">
 20 |   <div class="row">
 21 |     <div class="span12">
 22 |       <h1>Angular Chartjs Directive</h1>
 23 |       <hr>
 24 |       <p></p>
 25 |     </div>
 26 |   </div>
 27 |   <h2>Usage</h2>
 28 | 
 29 |   <div class="row">
 30 |     <div class="span12">
 31 |       <ol>
 32 |         <li>Include <code>chartjs-directive.js</code>.</li>
 33 |         <li>Add directive
 34 | <pre><code>&lt;div ng-app="chartjs-directive"&gt;
 35 |   &lt;chart value="myChart"&gt;&lt;/chart&gt;
 36 | &lt;/div&gt;</code></pre></li>
 37 | 
 38 |         <li>Inject some data
 39 | <pre><code>
 40 | function myContoller(){
 41 | 
 42 |   var data = {
 43 |     labels : ["January","February","March","April","May","June","July"],
 44 |     datasets : [
 45 |       {
 46 |         fillColor : "rgba(220,220,220,0.5)",
 47 |         strokeColor : "rgba(220,220,220,1)",
 48 |         pointColor : "rgba(220,220,220,1)",
 49 |         pointStrokeColor : "#fff",
 50 |         data : [65,59,90,81,56,55,40]
 51 |       },
 52 |       {
 53 |         fillColor : "rgba(151,187,205,0.5)",
 54 |         strokeColor : "rgba(151,187,205,1)",
 55 |         pointColor : "rgba(151,187,205,1)",
 56 |         pointStrokeColor : "#fff",
 57 |         data : [28,48,40,19,96,27,100]
 58 |       }
 59 |     ]
 60 |   }
 61 | 
 62 |   $scope.myChart.data = data;
 63 | }
 64 | </code></pre></li>
 65 |       </ol>
 66 |     </div>
 67 |   </div>
 68 |   <hr>
 69 |   <div class="row">
 70 |     <div class="span12">
 71 |       <h2>In action</h2>
 72 |     </div>
 73 |   </div>
 74 | 
 75 |   <div class="row">
 76 |     <div class="span6">
 77 |       <chart value="myChart" id="myCoolChart"></chart>
 78 |       <p>^ This is a chart</p>
 79 |       <button ng-click="updateData()" class="btn btn-success">
 80 |         Update Data
 81 |       </button>
 82 |     </div>
 83 |   </div>
 84 | 
 85 |   <div class="row">
 86 |     <div class="span12">
 87 |       <h3>Tag Parameters</h3>
 88 |       <ul>
 89 |         <li><code>value</code> (default: "Line")</li>
 90 |         <li><code>width</code> (default: 600)</li>
 91 |         <li><code>height</code> (default: 400)</li>
 92 |       </ul>
 93 | 
 94 |       <p>value can be any of the chartjs chart types:</p>
 95 |       <ul>
 96 |         <li>
 97 |           <button ng-click="line()" class="btn btn-success">
 98 |             Line
 99 |           </button>
100 |         </li>
101 |         <br />
102 |         <li>
103 |           <button ng-click="bar()" class="btn btn-success">
104 |             Bar
105 |           </button>
106 |         </li>
107 |         <br />
108 |         <li>
109 |           <button ng-click="radar()" class="btn btn-success">
110 |             Radar
111 |           </button>
112 |         </li>
113 |         <br />
114 |         <li>
115 |           <button ng-click="polarArea()" class="btn btn-success">
116 |             Polar
117 |           </button>
118 |         </li>
119 |         <br />
120 |         <li>
121 |           <button ng-click="pie()" class="btn btn-success">
122 |             Pie
123 |           </button>
124 |         </li>
125 |         <br />
126 |         <li>
127 |           <button ng-click="doughnut()" class="btn btn-success">
128 |             Doughnut
129 |           </button>
130 |         </li>
131 |       </ul>
132 |     </div>
133 |   </div>
134 | 
135 |   <div class="row">
136 |     <div class="span12">
137 |       <h3>Chart Parameters</h3>
138 |       <ul>
139 |         <li><code>data</code></li>
140 |         <li><code>options</code></li>
141 |         <li><a href="http://www.chartjs.org/docs/">See Chartjs documentation</a></li>
142 |       </ul>
143 |     </div>
144 |   </div>
145 |   <hr>
146 |   <div class="row">
147 |     <div class="span12">
148 |       <h2>Bower</h2>
149 |       <p>Installable via <code>bower</code>:</p>
150 |       <code>bower install angular-chartjs-directive</code>
151 |       <hr>
152 |       <h2>License</h2>
153 |       <p>MIT</p>
154 |     </div>
155 |   </div>
156 |   <a href="https://github.com/earlonrails/angular-chartjs-directive">
157 |     <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub">
158 |   </a>
159 |   <script type="text/javascript" src="vendor/angular/angular.min.js"></script>
160 |   <script type="text/javascript" src="vendor/chartjs/Chart.min.js"></script>
161 |   <script type="text/javascript" src="chartjs-directive.js"></script>
162 |   <script type="text/javascript">
163 |     angular.module('myApp', ['chartjs-directive'])
164 |       .controller('myController', function($scope){
165 |         $scope.updateData = function() {
166 |           var chart = document.getElementById("myCoolChart").getAttribute("type");
167 |           switch (chart) {
168 |             case 'PolarArea':
169 |               $scope.generatePieData();
170 |               break;
171 |             case 'Pie':
172 |               $scope.generatePieData();
173 |               break;
174 |             case 'Doughnut':
175 |               $scope.generatePieData();
176 |               break;
177 |             default:
178 |               $scope.generateData();
179 |           }
180 |         };
181 | 
182 |         $scope.generateData = function(){
183 |           var sevenRandNumbers = function(){
184 |             var numberArray = [];
185 |             for (var i=0;i<7;i++){
186 |               numberArray.push(Math.floor((Math.random()*100)+1));
187 |             }
188 |             return numberArray;
189 |           };
190 |           var data = {
191 |             labels : ["January","February","March","April","May","June","July"],
192 |             datasets : [
193 |               {
194 |                 fillColor : "rgba(220,220,220,0.5)",
195 |                 strokeColor : "rgba(220,220,220,1)",
196 |                 pointColor : "rgba(220,220,220,1)",
197 |                 pointStrokeColor : "#fff",
198 |                 data : sevenRandNumbers()
199 |               },
200 |               {
201 |                 fillColor : "rgba(151,187,205,0.5)",
202 |                 strokeColor : "rgba(151,187,205,1)",
203 |                 pointColor : "rgba(151,187,205,1)",
204 |                 pointStrokeColor : "#fff",
205 |                 data : sevenRandNumbers()
206 |               }
207 |             ]
208 |           };
209 |           $scope.myChart = {"data": data, "options": {} };
210 |         };
211 | 
212 |         $scope.generatePieData = function(){
213 |           var data = [
214 |             {
215 |               value: Math.floor((Math.random()*100)+1),
216 |               color:"#F38630"
217 |             },
218 |             {
219 |               value : Math.floor((Math.random()*100)+1),
220 |               color : "#E0E4CC"
221 |             },
222 |             {
223 |               value : Math.floor((Math.random()*100)+1),
224 |               color : "#69D2E7"
225 |             }
226 |           ]
227 |           $scope.myChart = {"data": data, "options": {} };
228 |         };
229 | 
230 |         $scope.line = function() {
231 |           document.getElementById('myCoolChart').setAttribute('type', 'Line');
232 |           $scope.updateData();
233 |         };
234 | 
235 |         $scope.bar = function() {
236 |           document.getElementById('myCoolChart').setAttribute('type', 'Bar');
237 |           $scope.updateData();
238 |         };
239 | 
240 |         $scope.radar = function() {
241 |           document.getElementById('myCoolChart').setAttribute('type', 'Radar');
242 |           $scope.updateData();
243 |         };
244 | 
245 |         $scope.polarArea = function() {
246 |           document.getElementById('myCoolChart').setAttribute('type', 'PolarArea');
247 |           $scope.updateData();
248 |         };
249 | 
250 |         $scope.pie = function() {
251 |           document.getElementById('myCoolChart').setAttribute('type', 'Pie');
252 |           $scope.updateData();
253 |         };
254 | 
255 |         $scope.doughnut = function() {
256 |           document.getElementById('myCoolChart').setAttribute('type', 'Doughnut');
257 |           $scope.updateData();
258 |         };
259 | 
260 |         $scope.generateData();
261 |       });
262 | 
263 |   </script>
264 | 
265 |   </body>
266 | </html>
267 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-chartjs-directive",
 3 |   "version": "1.0.0",
 4 |   "description": "An Angular Js Directive which allows to simplify the use of Chartjs charts",
 5 |   "main": "chartjs-directive.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/earlonrails/angular-chartjs-directive.git"
12 |   },
13 |   "keywords": [
14 |     "An",
15 |     "Angular",
16 |     "Js",
17 |     "Directive",
18 |     "which",
19 |     "allows",
20 |     "to",
21 |     "simplify",
22 |     "the",
23 |     "use",
24 |     "of",
25 |     "Chartjs",
26 |     "charts"
27 |   ],
28 |   "author": "Kevin Krauss <earlkrauss@gmail.com>",
29 |   "license": "ISC",
30 |   "bugs": {
31 |     "url": "https://github.com/earlonrails/angular-chartjs-directive/issues"
32 |   },
33 |   "homepage": "https://github.com/earlonrails/angular-chartjs-directive#readme"
34 | }
35 | 


--------------------------------------------------------------------------------