diff --git a/README.md b/README.md
index fc859b3..c494a9f 100644
--- a/README.md
+++ b/README.md
@@ -49,7 +49,7 @@ In the template...
```html
-
+
```
+Legend is optional, the default behavior is to apear before. Available options: before, after, none.
In the controller...
@@ -67,8 +68,8 @@ In the controller...
myapp.controller('testCtrl', function ($scope) {
$scope.someData = {
labels: [
- 'Apr',
- 'May',
+ 'Apr',
+ 'May',
'Jun'
],
datasets: [
@@ -88,7 +89,7 @@ myapp.controller('testCtrl', function ($scope) {
});
```
-This will result in a Doughnut chart using the dataset from the controller with a StrokeColor of #000 and a StrokeWidth of 5 because options set on the directive attributes override controller level settings for maximum flexibility.
+This will result in a Doughnut chart using the dataset from the controller with a StrokeColor of #000, a legend apearing before the graph and a StrokeWidth of 5 because options set on the directive attributes override controller level settings for maximum flexibility.
### Examples
diff --git a/bower.json b/bower.json
index d213d80..31eb434 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
{
"name": "ng-chartjs",
- "version": "0.0.5",
+ "version": "0.0.6",
"homepage": "https://github.com/petermelias/angular-chartjs",
"authors": [
"Peter M. Elias "
diff --git a/dist/angular-chartjs.js b/dist/angular-chartjs.js
index dca5888..799d129 100644
--- a/dist/angular-chartjs.js
+++ b/dist/angular-chartjs.js
@@ -1,6 +1,6 @@
(function () {
'use strict';
-
+
var chartjs = angular.module('chartjs', []),
chartTypes = {
line: 'Line',
@@ -44,47 +44,73 @@
return {
restrict: 'EAC',
- template: '',
+ template: '',
replace: true,
+ require: '?legend',
scope: {
dataset: '=',
- options: '='
+ options: '=',
+ legend: '@'
},
link: function postLink(scope, element, attrs) {
- var ctx = element[0].getContext('2d'),
+ var chartEl;
+ var legendEl;
+
+ if(attrs.legend === 'before') {
+ element.prepend('');
+ chartEl = element[0].children[1];
+ legendEl = element[0].children[0];
+ }
+
+ if (attrs.legend === 'after' || !attrs.legend ) {
+ element.append('');
+ chartEl = element[0].children[0];
+ legendEl = element[0].children[1];
+ }
+
+ var ctx = chartEl.getContext('2d'),
chart = new Chart(ctx),
chartOpts = {};
angular.extend(
- chartOpts,
+ chartOpts,
Chart.defaults.global,
Chart.defaults[chartType]
);
angular.extend(
- chartOpts,
+ chartOpts,
scope.options,
extractSpecOpts(
chartOpts,
attrs
)
);
-
+
chart = chart[chartType](scope.dataset, chartOpts);
+ legendEl.innerHTML = chart.generateLegend();
scope.$watch('dataset', function (newData, oldData) {
chart.initialize(newData);
+ legendEl.innerHTML = chart.generateLegend();
}, true);
scope.$watch('options', function (newData, oldData) {
angular.extend(
- chart.options,
+ chart.options,
scope.options
);
}, true);
-
+
}
};
};
});
+
+ chartjs.directive('legend', function() {
+ return {
+ controller: function($scope) {}
+ }
+ });
+
})();
diff --git a/dist/angular-chartjs.min.js b/dist/angular-chartjs.min.js
index 8a9b759..c1e622f 100644
--- a/dist/angular-chartjs.min.js
+++ b/dist/angular-chartjs.min.js
@@ -1 +1 @@
-!function(){"use strict";var t=angular.module("chartjs",[]),a={line:"Line",bar:"Bar",radar:"Radar",polar:"PolarArea",pie:"Pie",doughnut:"Doughnut"},n=function(a){var n=a.charAt(0).toUpperCase()+a.slice(1);t.directive("cjs"+n,["ChartFactory",function(t){return new t(a)}])};for(var e in a)n(e);t.factory("ChartFactory",function(){return function(t){t=a[t];var n=function(t,a){var n,e,r={};for(n in t)e=a[n],"undefined"!=typeof e&&(r[n]=e);return r};if("undefined"!=typeof t)return{restrict:"EAC",template:"",replace:!0,scope:{dataset:"=",options:"="},link:function(a,e,r){var o=e[0].getContext("2d"),i=new Chart(o),u={};angular.extend(u,Chart.defaults.global,Chart.defaults[t]),angular.extend(u,a.options,n(u,r)),i=i[t](a.dataset,u),a.$watch("dataset",function(t){i.initialize(t)},!0),a.$watch("options",function(){angular.extend(i.options,a.options)},!0)}}}})}();
\ No newline at end of file
+!function(){"use strict";var e=angular.module("chartjs",[]),n={line:"Line",bar:"Bar",radar:"Radar",polar:"PolarArea",pie:"Pie",doughnut:"Doughnut"},t=function(n){var t=n.charAt(0).toUpperCase()+n.slice(1);e.directive("cjs"+t,["ChartFactory",function(e){return new e(n)}])};for(var r in n)t(r);e.factory("ChartFactory",function(){return function(e){e=n[e];var t=function(e,n){var t,r,a={};for(t in e)r=n[t],"undefined"!=typeof r&&(a[t]=r);return a};if("undefined"!=typeof e)return{restrict:"EAC",template:'',replace:!0,require:"?legend",scope:{dataset:"=",options:"=",legend:"@"},link:function(n,r,a){var i,d;"before"===a.legend&&(r.prepend(''),i=r[0].children[1],d=r[0].children[0]),"after"!==a.legend&&a.legend||(r.append(''),i=r[0].children[0],d=r[0].children[1]);var c=i.getContext("2d"),o=new Chart(c),l={};angular.extend(l,Chart.defaults.global,Chart.defaults[e]),angular.extend(l,n.options,t(l,a)),o=o[e](n.dataset,l),d.innerHTML=o.generateLegend(),n.$watch("dataset",function(e){o.initialize(e),d.innerHTML=o.generateLegend()},!0),n.$watch("options",function(){angular.extend(o.options,n.options)},!0)}}}}),e.directive("legend",function(){return{controller:function(){}}})}();
\ No newline at end of file
diff --git a/src/js/main.js b/src/js/main.js
index c7ab230..ced6ca8 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -1,6 +1,6 @@
(function () {
'use strict';
-
+
var chartjs = angular.module('chartjs', []),
chartTypes = {
line: 'Line',
@@ -44,48 +44,82 @@
return {
restrict: 'EAC',
- template: '',
+ template: '',
replace: true,
+ require: '?legend',
scope: {
dataset: '=',
- options: '='
+ options: '=',
+ legend: '@'
},
link: function postLink(scope, element, attrs) {
- var ctx = element[0].children[0].getContext('2d'),
+ var chartEl;
+ var legendEl;
+
+ if(attrs.legend === 'before') {
+ element.prepend('');
+ chartEl = element[0].children[1];
+ legendEl = element[0].children[0];
+ }
+
+ if (attrs.legend === 'after' || !attrs.legend ) {
+ element.append('');
+ chartEl = element[0].children[0];
+ legendEl = element[0].children[1];
+ }
+
+ if(attrs.legend === 'none') {
+ chartEl = element[0].children[0];
+ legendEl = null;
+ }
+
+ var ctx = chartEl.getContext('2d'),
chart = new Chart(ctx),
chartOpts = {};
angular.extend(
- chartOpts,
+ chartOpts,
Chart.defaults.global,
Chart.defaults[chartType]
);
angular.extend(
- chartOpts,
+ chartOpts,
scope.options,
extractSpecOpts(
chartOpts,
attrs
)
);
-
+
chart = chart[chartType](scope.dataset, chartOpts);
- element[0].children[1].innerHTML = chart.generateLegend();
+ if(attrs.legend != 'none') {
+ legendEl.innerHTML = chart.generateLegend();
+ }
scope.$watch('dataset', function (newData, oldData) {
chart.initialize(newData);
+ if(attrs.legend != 'none') {
+ legendEl.innerHTML = chart.generateLegend();
+ }
}, true);
scope.$watch('options', function (newData, oldData) {
angular.extend(
- chart.options,
+ chart.options,
scope.options
);
}, true);
-
+
}
};
};
});
+
+ chartjs.directive('legend', function() {
+ return {
+ controller: function($scope) {}
+ }
+ });
+
})();