From 8608cab218bb33242a9a296c5da1d5d03fb0e743 Mon Sep 17 00:00:00 2001 From: "matthias.richter" Date: Wed, 18 Dec 2013 13:57:51 +0100 Subject: [PATCH 1/2] added binding of callbacks to support jqplot events --- README.md | 32 ++++++++++++++++++++++++++++---- src/chart.js | 14 +++++++++++++- test/chart.spec.js | 10 +++++++++- test/karma.conf.js | 4 ++-- 4 files changed, 52 insertions(+), 8 deletions(-) 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..fb83906 100644 --- a/test/karma.conf.js +++ b/test/karma.conf.js @@ -49,7 +49,7 @@ autoWatch = false; // - Safari (only Mac) // - PhantomJS // - IE (only Windows) -browsers = ['PhantomJS', 'Chrome', 'Firefox']; +browsers = ['Chrome', 'Firefox']; // If browser does not capture in given timeout [ms], kill it @@ -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; From a541de1ca640a665b97536bd7682c921c439228e Mon Sep 17 00:00:00 2001 From: "matthias.richter" Date: Wed, 18 Dec 2013 14:01:38 +0100 Subject: [PATCH 2/2] whoops did not want to remove that on purpose --- test/karma.conf.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/karma.conf.js b/test/karma.conf.js index fb83906..859e1cb 100644 --- a/test/karma.conf.js +++ b/test/karma.conf.js @@ -49,7 +49,7 @@ autoWatch = false; // - Safari (only Mac) // - PhantomJS // - IE (only Windows) -browsers = ['Chrome', 'Firefox']; +browsers = ['PhantomJS', 'Chrome', 'Firefox']; // If browser does not capture in given timeout [ms], kill it