Merge branch 'release/4.0.2'

Author: ashok1994

README.md

@@ -1,4 +1,4 @@
-# AngularJS Charts Plugin
+# angularjs-fusioncharts
 
 Simple and effective AngularJS charts plugin for FusionCharts.
 
@@ -177,6 +177,102 @@ In `index.html`
 ```
 Load  it in browser , Chart should get displayed
 
+### Listening to events
+
+Fusincharts events can be subscribed by attaching scope functions to event attributes.
+All the events attributes start with `fcevent-`
+followed by the event name in lowercase  
+
+Usage in template :
+
+```xml
+<fusioncharts 
+  width="400"
+  height="400"
+  type="column2d"
+  datasource="{{myDataSource}}"
+  fcevent-dataplotrollover="rollover(event, args)">
+</fusioncharts>
+```
+In the given above template, `rollover` is the scope function that needs to be defined in the controller's code.
+
+For more on this read [here](https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-events)
+
+```
+var app = angular.module('myApp', ['ng-fusioncharts']);
+
+app.controller('MyController', function($scope){
+    $scope.myDataSource = {
+        "chart": {
+          "caption": "Countries With Most Oil Reserves [2017-18]",
+          "subCaption": "In MMbbl = One Million barrels",
+          "xAxisName": "Country",
+          "yAxisName": "Reserves (MMbbl)",
+          "numberSuffix": "K",
+          "theme": "fusion"
+        },
+        "data": [
+          { "label": "Venezuela", "value": "290" },
+          { "label": "Saudi", "value": "260" },
+          { "label": "Canada", "value": "180" },
+          { "label": "Iran", "value": "140" },
+          { "label": "Russia", "value": "115" },
+          { "label": "UAE", "value": "100" },
+          { "label": "US", "value": "30" },
+          { "label": "China", "value": "30" }
+        ]
+      };
+
+      $scope.rollover = function(event, name){
+          console.log(event, name);
+      }
+});
+```
+
+Get the list of fusioncharts' [events](https://www.fusioncharts.com/dev/advanced-chart-configurations/events/classifying-events)
+
+### Chart API
+
+FusionCharts chart instance is made available from the ```initialized``` event. It provides the chart instance as a parameter which can be used to call FusionCharts methods.
+
+In template, we add ```initialized``` event
+
+```xml
+<fusioncharts
+  width="400"
+  height="400"
+  type="column2d"
+  datasource="{{myDataSource}}"
+  initialized="onInitialized(chart)">
+</fusioncharts>
+<button ng-click="changeCaption()">Change Chart Caption</button>
+```
+
+In order to use the chart instance, we need to store it.
+
+```
+var app = angular.module('myApp', ['ng-fusioncharts']);
+
+app.controller('MyController', function($scope){
+    var chart; 
+    $scope.datasource = {
+       ...// same data as above
+      };
+
+      $scope.onInitialized = function(chartObj){
+        chart = chartObj;
+      }
+
+      $scope.changeCaption = function(){
+          chart.setChartAttribute('caption', 'Caption changed');
+      }
+});
+```
+In the given above example, clicking the button changes the caption text to ```Caption changed```
+
+Get the list of fusioncharts' [methods](https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-methods)
+
+
 ### Tutorial
 
 Following tutorials will help you get started:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angularjs-fusioncharts",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "description": "Angular plugin for FusionCharts",
   "main": "dist/angular-fusioncharts.js",
   "repository": {

src/angular-fusioncharts.js

@@ -20,35 +20,45 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 (function() {
-    var fc = angular.module('ng-fusioncharts', []);
+    var fc = angular.module('ng-fusioncharts', []),
+    scope = {
+        width: '@',
+        height: '@',
+        data: '@',
+        dataset: '@',
+        categories: '@',
+        chart: '@',
+        linkeddata: '@',
+        trendlines: '@',
+        vtrendlines: '@',
+        annotations: '@',
+        colorrange: '@',
+        lineset: '@',
+        axis: '@',
+        connectors: '@',
+        pointers: '@',
+        value: '@',
+        processes: '@',
+        tasks: '@',
+        rows: '@',
+        columns: '@',
+        map: '@',
+        markers: '@',
+        initialized:'&'
+    },
+    fcEvents = ['beforelinkeditemopen','linkeditemopened','beforelinkeditemclose','linkeditemclosed','printreadystatechange','dataloadrequestcompleted','dataloaderror','dataloadcancelled','dataloadrequestcancelled','dataupdated','dataupdatecancelled','dataloadrequested','beforedataupdate','realtimeupdatecomplete','chartcleared','slicingend','slicingstart','entityrollout','entityrollover','entityclick','connectorrollover','connectorrollout','connectorclick','markerrollover','markerrollout','markerclick','pagenavigated','rotationend','rotationstart','centerlabelrollover','centerlabelrollout','centerlabelclick','centerlabelchanged','chartclick','chartmousemove','chartrollover','chartrollout','backgroundloaded','backgroundloaderror','legenditemclicked','legenditemrollover','legenditemrollout','logorollover','logorollout','logoclick','logoloaded','logoloaderror','beforeexport','exported','exportcancelled','beforeprint','printcomplete','printcancelled','datalabelclick','datalabelrollover','datalabelrollout','scrollstart','scrollend','onscroll','zoomreset','zoomedout','zoomedin','zoomed','zoommodechanged','pinned','datarestored','beforedatasubmit','datasubmiterror','datasubmitted','datasubmitcancelled','chartupdated','nodeadded','nodeupdated','nodedeleted','connectoradded','connectorupdated','connectordeleted','labeladded','labeldeleted','selectionremoved','selectionstart','selectionend','labelclick','labelrollover','labelrollout','labeldragstart','labeldragend','dataplotdragstart','dataplotdragend','processclick','processrollover','processrollout','categoryclick','categoryrollover','categoryrollout','milestoneclick','milestonerollover','milestonerollout','charttypechanged','overlaybuttonclick','loaded','rendered','drawcomplete','rendercomplete','datainvalid','dataxmlinvalid','dataloaded','nodatatodisplay','legendpointerdragstart','legendpointerdragstop','legendrangeupdated','alertcomplete','realtimeupdateerror','dataplotrollover','dataplotrollout','dataplotclick','linkclicked','beforerender','rendercancelled','beforeresize','resized','resizecancelled','beforedispose','disposed','disposecancelled','linkedchartinvoked','beforedrilldown','drilldown','beforedrillup','drillup','drilldowncancelled','drillupcancelled'],
+    currIndex,
+    eventName,
+    eventsLen = fcEvents.length;
+    for (currIndex = 0; currIndex < eventsLen; currIndex++){
+        eventName = 'fcevent' + fcEvents[currIndex][0].toUpperCase() + fcEvents[currIndex].slice(1);
+      scope[eventName] = '&';
+    }
 
 
     fc.directive('fusioncharts', ['$http', function($http) {
         return {
-            scope: {
-                width: '@',
-                height: '@',
-                data: '@',
-                dataset: '@',
-                categories: '@',
-                chart: '@',
-                linkeddata: '@',
-                trendlines: '@',
-                vtrendlines: '@',
-                annotations: '@',
-                colorrange: '@',
-                lineset: '@',
-                axis: '@',
-                connectors: '@',
-                pointers: '@',
-                value: '@',
-                processes: '@',
-                tasks: '@',
-                rows: '@',
-                columns: '@',
-                map: '@',
-                markers: '@'
-            },
+            scope: scope,
             link: function(scope, element, attrs) {
                 var observeConf = {
                         // non-data componenet observers
@@ -361,6 +371,16 @@
                             chart.dispose();
                         }
                         chart = new FusionCharts(chartConfigObject);
+                        scope.initialized && scope.initialized({ chart: chart });
+                        for(currIndex = 0; currIndex < eventsLen ; currIndex++){
+                            eventName = 'fcevent' + fcEvents[currIndex][0].toUpperCase() + fcEvents[currIndex].slice(1);
+                            // assign all events on chart instance
+                            (function(eventName){
+                                chart.addEventListener(fcEvents[currIndex], function(event, args){
+                                    scope[eventName] && scope[eventName]({ event:event, args: args }); 
+                                }); 
+                            })(eventName);
+                        }
                         /* @todo validate the ready function whether it can be replaced in a better way */
                         angular.element(document).ready(function(){
                             element.ready(function(){