Support for callbacks on jqplot events

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.
+
+    <ui-chart="data" chart-options="chartOptions" callbacks="cllbcks"></ui-chart>
+
+    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
+        };
+      });

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', [])
         });
       }
     };
-  });
+  });

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);
   });
-});
+});

test/karma.conf.js

@@ -58,4 +58,4 @@ captureTimeout = 60000;
 
 // Continuous Integration mode
 // if true, it capture browsers, run tests and exit
-singleRun = false;
+singleRun = false;