diff --git a/README.md b/README.md index 006e5c8..e105544 100644 --- a/README.md +++ b/README.md @@ -57,20 +57,44 @@ This plugin supports usage of any option present for a chart in jqplot. This va angular.module('myApp') .controller('DemoCtrl', function ($scope) { $scope.data = [[ - ['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14], + ['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14], ['Out of home', 16],['Commuting', 7], ['Orientation', 9] ]]; - $scope.chartOptions = { + $scope.chartOptions = { seriesDefaults: { // Make this a pie chart. - renderer: jQuery.jqplot.PieRenderer, + renderer: jQuery.jqplot.PieRenderer, rendererOptions: { // Put data labels on the pie slices. // By default, labels show the percentage of the slice. showDataLabels: true } - }, + }, legend: { show:true, location: 'e' } }; }); + +# Callbacks + +Configure any callbacks supported by jqplot beside the chartOptions on the scope and register them on the directive. See [PieChart Docs](http://www.jqplot.com/docs/files/plugins/jqplot-pieRenderer-js.html) for callback docs. + + + + angular.module('myApp') + .controller('DemoCtrl', function ($scope) { + $scope.data = [[ + ['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14], + ['Out of home', 16],['Commuting', 7], ['Orientation', 9] + ]]; + + $scope.cllbcks = { + jqplotDataClick: function (ev, seriesIndex, pointIndex, data) { + // do something on click events + } + }; + + $scope.chartOptions = { + // .... chartOptions as described above + }; + }); diff --git a/src/chart.js b/src/chart.js index 2840081..2b5a633 100644 --- a/src/chart.js +++ b/src/chart.js @@ -20,7 +20,19 @@ angular.module('ui.chart', []) } } + var callbacks = {}; + if (!angular.isUndefined(attrs.callbacks)) { + callbacks = scope.$eval(attrs.callbacks); + if (!angular.isObject(callbacks)) { + throw 'Invalid ui.chart callbacks attribute'; + } + } + elem.jqplot(data, opts); + + angular.forEach(callbacks, function(callback, eventName) { + elem.bind(eventName, callback); + }); }; scope.$watch(attrs.uiChart, function () { @@ -32,4 +44,4 @@ angular.module('ui.chart', []) }); } }; - }); \ No newline at end of file + }); diff --git a/test/chart.spec.js b/test/chart.spec.js index aac4c4b..e9d3e22 100644 --- a/test/chart.spec.js +++ b/test/chart.spec.js @@ -73,6 +73,14 @@ describe('uiChart Directive', function () { }).toThrow('Invalid ui.chart options attribute'); }); + it('should throw an exception if callbacks are not an object', function () { + expect(function () { + compile('data', 'callbacks="myNonExistentCallbacks"'); + scope.data = [[1,2,3]]; + scope.$digest(); + }).toThrow('Invalid ui.chart callbacks attribute'); + }); + it('should rerender the plot if options in scope change', function () { spyOn($, 'jqplot'); compile('data', 'chart-options="myOpts"'); @@ -130,4 +138,4 @@ describe('uiChart Directive', function () { expect(element.html()).toBe(''); expect(element[0].children.length).toBe(0); }); -}); \ No newline at end of file +}); diff --git a/test/karma.conf.js b/test/karma.conf.js index 13e2490..859e1cb 100644 --- a/test/karma.conf.js +++ b/test/karma.conf.js @@ -58,4 +58,4 @@ captureTimeout = 60000; // Continuous Integration mode // if true, it capture browsers, run tests and exit -singleRun = false; \ No newline at end of file +singleRun = false;