0

I am trying to capture dataplotClick event in pie2d chart of fusion charts using angular. I'm referring this example Bar chart with events. When I create object events directly to the scope then it's working.

Working

$scope.events = {
                        dataplotClick:function(evnt,data) {
                            var lbl = data.toolText.split(",")[0];
                            console.log(lbl);
                            $scope.$apply(function() {
                                $scope.stFilter = {'EV_STATE_NUMBER':lbl};
                            });
                        }
                    }

Not working

$scope.my = {};
$scope.my.events = {
                    dataplotClick:function(evnt,data) {
                        var lbl = data.toolText.split(",")[0];
                        console.log(lbl);
                        $scope.$apply(function() {
                            $scope.stFilter = {'EV_STATE_NUMBER':lbl};
                        });
                    }
                }

HTML

<fusioncharts 
      width="90%" 
      height="100%"
      type="pie2d"
      datasource="{{fcb.effiPerformance}}"
      events="my.events" // Not working
      events="events" // Working
> </fusioncharts>

As I have more than one charts inside ng-repeat, I have to attach event function for each of them. Help me if anyone knows how to achieve it.

Jay Shukla
  • 5,794
  • 8
  • 33
  • 63

1 Answers1

-1

The FusionCharts angular plugin can access only the direct child objects inside the controller scope. Refer to the following code at line 346 of the source code from https://github.com/fusioncharts/angular-fusioncharts/blob/master/src/angular-fusioncharts.js.

if (scope.$parent[attrs.events]) {

To define different events for different charts inside same controller you can define different event object names. e.g.-

//Controller
$scope.chart1_events = {
      dataplotClick:function(evnt,data) {
          var lbl = data.toolText.split(",")[0];
          console.log(lbl);
          $scope.$apply(function() {
              $scope.stFilter = {'EV_STATE_NUMBER':lbl};
          });
      }
}

//HTML
<fusioncharts 
  width="90%" 
  height="100%"
  type="pie2d"
  datasource="{{fcb.effiPerformance}}"
  events="chart1_events"
> </fusioncharts>

Sample- http://jsfiddle.net/ayanonly1/57gxf5e1/

Update:- The issue is fixed in V3.0 of the plugin.

Ayan Pal
  • 99
  • 5
  • I know this. I already said in my question that direct events object is working fine. As I have more than one object, I want to bind events for each object. – Jay Shukla May 15 '15 at 11:59
  • Did you go through the sample? What you want is already done there. – Ayan Pal May 15 '15 at 12:26
  • @JayShukla, please check the sample and let me know whether this solve your purpose or not. – Ayan Pal May 15 '15 at 14:15
  • I don't know how many objects will be there in an objects. I can't use this approach. Thanks for your alternative solution. – Jay Shukla May 17 '15 at 08:19
  • Not exactly sure about your project. But I think this may be done automatically. This is an open source project. I have marked the source where you have to make the changes to accommodate the access of the deeper level objects. This will be great if you do the change and send a pull request. If you think the negative vote is not applicable you can remove it. :) – Ayan Pal May 18 '15 at 05:06
  • Sure. you need to edit your answer as my vote is locked. – Jay Shukla May 18 '15 at 08:39
  • If you can help me.. http://stackoverflow.com/questions/30349056/display-legend-inside-a-pie-chart-with-fusion-chart – Jay Shukla May 20 '15 at 12:03