Merge pull request #53 from cstefanache/master

Added click support on chart data
carlcraig · Jan 4, 2016 · 8081ebf · 8081ebf
2 parents b9a430c + e24ca84
commit 8081ebf
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -62,7 +62,7 @@ You will also want to give the chart some `data` and `options`. These can be pro
 by assigning $scope variables to `chart-options` and `chart-data` attributes on the same canvas element.
 
 ```html
-<canvas tc-chartjs-doughnut chart-data="myData" chart-options="myOptions" width="350" height="350"></canvas>
+<canvas tc-chartjs-doughnut chart-data="myData" chart-options="myOptions" chart-click="onChartClick(data, event)" width="350" height="350"></canvas>
 ```
 ```javascript
 $scope.myData = [
@@ -75,6 +75,11 @@ $scope.myData = [
 $scope.myOptions =  {
   // Chart.js options can go here.
 };
+
+$scope.onChartClick = function (data, event) {
+  console.log(data, event);
+};
+
 ```
 
 Using the `tc-chartjs` directive

diff --git a/dist/tc-angular-chartjs.js b/dist/tc-angular-chartjs.js
@@ -1,5 +1,5 @@
 /**
- * tc-angular-chartjs - v1.0.12 - 2015-07-08
+ * tc-angular-chartjs - v1.0.12 - 2015-12-30
  * Copyright (c) 2015 Carl Craig <carlcraig.threeceestudios@gmail.com>
  * Dual licensed with the Apache-2.0 or MIT license.
  */
@@ -43,7 +43,8 @@
                     options: "=chartOptions",
                     type: "@chartType",
                     legend: "=chartLegend",
-                    chart: "=chart"
+                    chart: "=chart",
+                    click: "&chartClick"
                 },
                 link: link
             };
@@ -69,6 +70,23 @@
                         chartObj.destroy();
                     }
                 });
+                if ($scope.click) {
+                    0;
+                    $elem[0].onclick = function(evt) {
+                        var segment;
+                        if (chartObj.getSegmentsAtEvent !== undefined) {
+                            segment = chartObj.getSegmentsAtEvent(evt);
+                        } else if (chartObj.getPointsAtEvent !== undefined) {
+                            segment = chartObj.getPointsAtEvent(evt);
+                        } else if (chartObj.getBarsAtEvent !== undefined) {
+                            segment = chartObj.getBarsAtEvent(evt);
+                        }
+                        $scope.click({
+                            data: segment,
+                            event: evt
+                        });
+                    };
+                }
                 $scope.$watch("data", function(value) {
                     if (value) {
                         if (chartObj) {

diff --git a/dist/tc-angular-chartjs.min.js b/dist/tc-angular-chartjs.min.js
diff --git a/src/tc-angular-chartjs.js b/src/tc-angular-chartjs.js
@@ -56,7 +56,8 @@
           options: '=chartOptions',
           type: '@chartType',
           legend: '=chartLegend',
-          chart: '=chart'
+          chart: '=chart',
+          click: '&chartClick'
         },
         link: link
       };
@@ -87,6 +88,22 @@
           }
         });
 
+        if ($scope.click) {
+          $elem[0].onclick = function (evt) {
+            var segment;
+
+            if (chartObj.getSegmentsAtEvent !== undefined) {
+              segment = chartObj.getSegmentsAtEvent(evt);
+            } else if (chartObj.getPointsAtEvent !== undefined) {
+              segment = chartObj.getPointsAtEvent(evt);
+            } else if (chartObj.getBarsAtEvent !== undefined) {
+              segment = chartObj.getBarsAtEvent(evt);
+            }
+
+            $scope.click({data: segment, event: evt});
+          };
+        }
+
         $scope.$watch(
           'data',
           function ( value ) {