Solution for issue #26, now a callback can be provided to receive the…

… chart object.

README.md

@@ -208,7 +208,7 @@ Another really cool feature is adding the subchart, with this you can select jus
 <c3chart bindto-id="chart5" show-labels="true" show-subchart="true" enable-zoom="true">		
 </c3chart>
 ```
-The last thing to show for now is putting the legenda at another location, changing the tooltip, change the size of the chart and provide an array of colors to use for the lines.
+The last thing to show for now is putting the legend at another location, changing the tooltip, change the size of the chart and provide an array of colors to use for the lines.
 ```html
 <chart-legend show-legend="true" legend-position="right"/>
 <chart-colors color-pattern="#1f77b4,#ffbb78,#2ca02c,#ff7f0e"/>
@@ -217,6 +217,11 @@ The last thing to show for now is putting the legenda at another location, chang
 ```
 
 ## Version History
+
+### 0.6.0
+Main part to move to a higher version is that we have the possibility now to add a callback function. In the examples folder there is a page callback-sample.html that shows how to do this. You can register the callback function to recevei the actual chart object that you can manipulate using the c3js API methods.
+http://c3js.org/reference.html#api
+
 ### 0.5.0
 Added a big pull request by EmmN that includes formatting improvements. All charts now support adding a format function to format labels and tooltips.
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "c3-angular",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "homepage": "https://github.com/jettro/c3-angular-sample",
   "authors": [
     "Jettro Coenradie <[email protected]>"

c3js-directive.js

@@ -215,6 +215,10 @@ angular.module('gridshore.c3js.chart', [])
             $scope.dataLabelsFormatFunction = dataLabelsFormatFunction;
         };
 
+        this.addChartCallbackFunction = function(chartCallbackFunction) {
+            $scope.chartCallbackFunction = chartCallbackFunction;
+        };
+
         this.addYAxis = function (yAxis) {
             $scope.axes = yAxis;
             if (!$scope.axis.y2) {
@@ -453,6 +457,12 @@ angular.module('gridshore.c3js.chart', [])
             if (!$scope.chartIsGenerated) {
                 $scope.chart = c3.generate($scope.config);
                 $scope.chartIsGenerated = true;
+
+                // Use the API as documented here to interact with the chart object
+                // http://c3js.org/reference.html#api
+                if ($scope.chartCallbackFunction) {
+                    $scope.chartCallbackFunction($scope.chart);
+                }
             } else {
                 $scope.chart.load($scope.config.data);
             }
@@ -480,6 +490,9 @@ angular.module('gridshore.c3js.chart', [])
             if (attrs.labelsFormatFunction) {
                 chartCtrl.addDataLabelsFormatFunction(scope.labelsFormatFunction());
             }
+            if (attrs.callbackFunction) {
+                chartCtrl.addChartCallbackFunction(scope.callbackFunction());
+            }
             // Trick to wait for all rendering of the DOM to be finished.
             $timeout(function () {
                 chartCtrl.showGraph();
@@ -497,7 +510,8 @@ angular.module('gridshore.c3js.chart', [])
                 "enableZoom": "@enableZoom",
                 "chartData": "=chartData",
                 "chartColumns": "=chartColumns",
-                "chartX": "=chartX"
+                "chartX": "=chartX",
+                "callbackFunction": "&"
             },
             "template": "<div><div id='{{bindto}}'></div><div ng-transclude></div></div>",
             "replace": true,

examples/assets/js/app.js

@@ -1,31 +1,58 @@
-var graphApp = angular.module('graphApp', ['gridshore.c3js.chart','graphApp.services']);
+var graphApp = angular.module('graphApp', ['gridshore.c3js.chart', 'graphApp.services']);
 
-graphApp.controller('GraphCtrl', function ($scope,$interval,dataService) {
-    $scope.datapoints=[];
-    $scope.datacolumns=[{"id":"top-1","type":"line","name":"Top one"},
-        {"id":"top-2","type":"spline","name":"Top two"}];
-    $scope.datax={"id":"x"};
+graphApp.controller('GraphCtrl', function ($scope, $interval, dataService) {
+    $scope.datapoints = [];
+    $scope.datacolumns = [{"id": "top-1", "type": "line", "name": "Top one"},
+        {"id": "top-2", "type": "spline", "name": "Top two"}];
+    $scope.datax = {"id": "x"};
 
-    $scope.donutPoints=[{"data1":70,"data2":30}];
-    $scope.donutColumns=[{"id":"data1","type":"donut"},{"id":"data2","type":"donut"}];
+    $scope.donutPoints = [{"data1": 70, "data2": 30, "data3": 30, "data4": 30, "data5": 30}];
+    $scope.donutColumns = [
+        {"id": "data1", "type": "donut"},
+        {"id": "data2", "type": "donut"},
+        {"id": "data3", "type": "donut"},
+        {"id": "data4", "type": "donut"},
+        {"id": "data5", "type": "donut"}];
+    $scope.donutPoints2 = [{"data1": 70, "data2": 30}];
+    $scope.donutColumns2 = [
+        {"id": "data1", "type": "donut"},
+        {"id": "data2", "type": "donut"}];
+    $scope.donutTitle = "Dynamic Title";
 
-    $scope.piePoints=[{"data1":70,"data2":30,"data3":"100"}];
-    $scope.pieColumns=[{"id":"data1","type":"pie"},{"id":"data2","type":"pie"},{"id":"data3","type":"pie"}];
+    $scope.piePoints = [{"data1": 70, "data2": 30, "data3": "100"}];
+    $scope.pieColumns = [{"id": "data1", "type": "pie"}, {"id": "data2", "type": "pie"}, {
+        "id": "data3",
+        "type": "pie"
+    }];
 
+    $scope.handleCallback = function (chartObj) {
+        $scope.theChart = chartObj;
+    };
 
-    $scope.generateData = function() {
-        $interval(function(){
-            dataService.loadData(function(data){
+    $scope.legendIsShown = true;
+    $scope.toggleLegend = function() {
+        if ($scope.legendIsShown) {
+            $scope.theChart.legend.hide();
+        } else {
+            $scope.theChart.legend.show();
+        }
+        $scope.legendIsShown= !$scope.legendIsShown;
+        $scope.theChart.flush();
+    };
+
+    $scope.generateData = function () {
+        $interval(function () {
+            dataService.loadData(function (data) {
                 if ($scope.datapoints.length > 10) {
                     $scope.datapoints.shift();
                 }
                 $scope.datapoints.push(data);
             });
-        },1000,1000);
+        }, 1000, 1000);
     };
 
     $scope.clicked = {};
-    $scope.showClick = function(data) {
+    $scope.showClick = function (data) {
         $scope.clicked = data;
     };
 
@@ -35,18 +62,19 @@ graphApp.controller('GraphCtrl', function ($scope,$interval,dataService) {
 });
 
 var services = angular.module('graphApp.services', []);
-services.factory('dataService', function() {
+services.factory('dataService', function () {
     function DataService() {
         var maxNumber = 200;
 
         // API methods
-        this.loadData = function(callback) {
-            callback({"x":new Date(),"top-1":randomNumber(),"top-2":randomNumber()});
+        this.loadData = function (callback) {
+            callback({"x": new Date(), "top-1": randomNumber(), "top-2": randomNumber()});
         };
 
         function randomNumber() {
             return Math.floor((Math.random() * maxNumber) + 1);
         }
     }
+
     return new DataService();
 });

examples/callback-sample.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en" ng-app="graphApp">
+<head>
+    <meta charset="utf-8">
+
+    <link href="assets/css/c3.min.css" rel="stylesheet" type="text/css">
+</head>
+<body ng-controller="GraphCtrl">
+
+<c3chart bindto-id="dynamicpie" chart-data="piePoints" chart-columns="pieColumns"
+        callback-function="handleCallback"/>
+
+<button ng-click="toggleLegend()">Toggle legend</button>
+
+<!-- Javascript includes -->
+<script src="assets/js/d3.min.js" charset="utf-8"></script>
+<script src="assets/js/c3.min.js"></script>
+<script src="assets/js/angular.min.js"></script>
+<script src="assets/js/c3-angular.min.js"></script>
+
+<script src="assets/js/app.js"></script>
+</body>
+</html>

examples/donut-charts.html

@@ -4,14 +4,33 @@
     <meta charset="utf-8">
 
     <link href="assets/css/c3.min.css" rel="stylesheet" type="text/css">
+    <style>
+        .graph {
+            max-width: 400px;
+            float: left;
+            border: 1px solid black;
+        }
+    </style>
+
 </head>
 <body ng-controller="GraphCtrl">
 
-<c3chart bindto-id="eventchart" chart-data="donutPoints" chart-columns="donutColumns">
-    <chart-legend show-legend="true"/>
-    <chart-donut expand="true" width="30" show-label="false" title="Donut sample"/>
-</c3chart>
-
+<div>
+    <div class="graph">
+        <c3chart bindto-id="eventchart" chart-data="donutPoints" chart-columns="donutColumns">
+            <chart-size chart-width="200" chart-height="200"/>
+            <chart-legend show-legend="true"/>
+            <chart-donut expand="true" width="30" show-label="false" title="Donut Title"/>
+        </c3chart>
+    </div>
+    <div class="graph">
+        <c3chart bindto-id="eventchart2" chart-data="donutPoints2" chart-columns="donutColumns2">
+            <chart-size chart-width="200" chart-height="200"/>
+            <chart-legend show-legend="true"/>
+            <chart-donut expand="true" width="30" show-label="false" title="Donut Title"/>
+        </c3chart>
+    </div>
+</div>
 <!-- Javascript includes -->
 <script src="assets/js/d3.min.js" charset="utf-8"></script>
 <script src="assets/js/c3.min.js"></script>

examples/dynamic-pie.html

@@ -7,8 +7,8 @@
 </head>
 <body ng-controller="GraphCtrl">
 
-<c3chart bindto-id="dynamicpie" chart-data="piePoints" chart-columns="pieColumns">
-</c3chart>
+<c3chart bindto-id="dynamicpie" chart-data="piePoints" chart-columns="pieColumns"/>
+
 
 <!-- Javascript includes -->
 <script src="assets/js/d3.min.js" charset="utf-8"></script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "c3-angular",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "An angularjs directive to integrate c3.js within your angularjs project.",
   "main": "c3js-directive.js",
   "directories": {