when using Angular-google-chart directive, how do you access the selected item in the pie chart?

Question

I'm using the angular-google-charts [bouil.github.io/angular-google-chart/] directive to create a pie chart.

I can fire a method using this with

<div google-chart chart="myChart" style="{{cssStyle}}" on-select="seriesSelected()"></div>

  $scope.seriesSelected = function () {
        console.log('item selected');
    }

However, I can't work out how to get the key of the selected item. I can see how to do this when using google charts without the angular directive: how to stackoverflow answer . However, I can't follow how to get the element when using angular. This guy seems to have an answer (there is also a plunkr here that fairly accurately shows what I am trying to do), but it seems to be more complex than what I am looking for.

I can see in the ng-google-chart.js directive, there is a line, that adds a property to the selected items:

var selectEventRetParams = {selectedItems:$scope.chartWrapper.getChart().getSelection()};

but I'm not yet able to see how to access this property. Any advice is much appreciated.

Answer 1

Documentation

Just change the html to the following

<div google-chart chart="myChart" style="{{cssStyle}}" agc-on-select="seriesSelected(selectedItem)"></div>

Answer 2

I couldn't access the directive scope either. So I added a new attribute to the isolated scope and set it "=".

The HTML:

 <div google-chart chart="chartObject" style="{{cssStyle}}" custom-select="handleSelect"></div>

Modified directive scope:

           scope: {
                beforeDraw: '&',
                chart: '=chart',
                onReady: '&',
                onSelect: '&',
                select: '&',
                customSelect: '='
            },

Add this to the "select" listener:

if($attrs.customSelect){
    $scope.customSelect(selectEventRetParams);
}

My event handler:

$scope.handleSelect=function(selection){
    console.log(selection);
};

http://jsfiddle.net/s911131/sjh4wfe2/5/

Answer 3

Almost there... referring back to your code:

 $scope.seriesSelected = function () { console.log('item selected'); } 

Should be changed to:

 $scope.seriesSelected = function (selectedItem) { console.log('item selected'); console.log(selectedItem); } 

In order to pick up the value as passed by the directive.

Answer 4

UPDATE:

This was a doozy. The parameter name 'selectedItem' used in the markup MUST match that being passed back from the directive's isolate scope!!

on-select="doThis(selectedItem)"

https://docs.angularjs.org/guide/directive does mention it, I didn't read properly.

"Often it's desirable to pass data from the isolate scope via an expression to the parent scope, this can be done by passing a map of local variable names and values into the expression wrapper fn. For example, the hideDialog function takes a message to display when the dialog is hidden. This is specified in the directive by calling close({message: 'closing for now'}). Then the local variable message will be available within the on-close expression."

ORIGINAL QUESTION:

@Sam - did you ever get this to work? I have set breakpoints both in angular-google-charts and my code and I can see a valid selectedItem variable being constructed and passed into $scope.onSelect({selectedItem: selectedItem}) -

google.visualization.events.addListener($scope.chartWrapper, 'select', function () {
                                        var selectedItem = $scope.chartWrapper.getChart().getSelection()[0];
                                        $scope.$apply(function () {
                                            if ($attrs.select) {
                                                console.log('Angular-Google-Chart: The \'select\' attribute is deprecated and will be removed in a future release.  Please use \'onSelect\'.');
                                                $scope.select({ selectedItem: selectedItem });
                                            }
                                            else{
                                                $scope.onSelect({ selectedItem: selectedItem });
                                            }
                                    });

However by the time this reaches my code, the selItem parameter is undefined.

my controller code:

$scope.doThis = function(selItem){
        alert("a");
    };

my markup:

<div google-chart chart="chartObject" on-select="doThis(selItem)" style="{{cssStyle}}" ></div>

I"ve tried both Angular 1.2.x and 1.4.1 - same behavior in both.

@df1 - I can't see how your solution would work since you are calling a function $scope.customSelect(selectEventRetParams), but your directive's isolate scope has declared customSelect to be bound using '=' instead of '&' for expressions/function callbacks.

Answer 5

I want to improve my answer and to spend more time looking into others' answers. I have a working solution, which is as follows. Modify the directive scope by adding a two way binding called selectedItem:

scope: {
      beforeDraw: '&',
      chart: '=chart',
      onReady: '&',
      onSelect: '&',
      select: '&',
      selectedItem: "="
    }

Then my function in the directive is as follows:

google.visualization.events.addListener($scope.chartWrapper, 'select', function (type) {
     var selectEventRetParams = { selectedItems:   $scope.chartWrapper.getChart().getSelection() };
     selectEventRetParams['selectedItem'] = selectEventRetParams['selectedItems'][0];
     $scope.selectedItem = selectEventRetParams['selectedItem'].row;
     $scope.select({ selectEventRetParams: selectEventRetParams });
}

Then, I have a watch function in my own code, which happens to also be a directive with it's own controller and this code looks like this:

   $scope.$watch('selectedItem', function (newValue) {
            if (newValue != null) {
                $scope.handleSelectedItem();
            }
        });

The HTML looks like this:

  <div google-chart chart="chartObject" style="{{cssStyle}}" sselected-item="selectedItem"></div>

I have actually used several two way bindings and use this to click into the pie chart multiple times, diving into the data. It works really well, but I need to tidy my code somewhat and come back to this.