Graph click listeners

[sambateman]

I am trying to add click through functionality to some pie charts I have created. Adding the itemmouseup listener to the series within the view where the graph is defined works and allows the event handler to be triggered, however I need the event handler to be in a controller. I could not find a component query for a graph series and thus tried to add the event listener to the series after the graph is rendered.

The listener is added and can be seen in Google Chrome's debugging tools, however the event and therefore its handler is never triggered.

Graph View:

Ext.define('BEM.view.dashboard.TopicPieChart', {
    extend: 'Ext.chart.Chart',
    alias: 'widget.topicpie',
    
    models: [
        'dashboard.TopicPieChart'
    ],
    
    stores: [
        'dashboard.TopicPieCharts'
    ],
    
    autoRender: true,
    autoShow: true,
    //hidden: true,
    width: '100%',
    height: '100%',
    animate: true,
    store: 'dashboard.TopicPieCharts',
    column: true,
    flex: 1,
    insetPadding: 20,
    legend: {
        position: 'right',
        labelFont: '10 px Arial',
        padding: 3,
        itemSpacing: 5
    },
    
    series: [
        {
            
            type: 'pie',
            angleField: 'total',
            showInLegend: true,
            colorSet: ['#164987','#357FD8','#5FA8FF','#9AB1CC','#C8D7E8'],
            shadowAttribbutes: null,
            style: {
                shadow: 0
            },
            
            // This listener will trigger, doesn't provide the functionality required.
            /*listeners: {
              
              itemmouseup: function(obj){
                  this.application.fireEvent('test');
                  console.log(obj);
                  console.log(obj.storeItem.data['key'] + ' - ' + obj.storeItem.data['total']);
              }  
                
            },*/
            
            tips: {
                trackMouse: true,
                width: 150,
                height: 40,
                renderer: function(storeItem, item){                
                    this.setTitle(storeItem.get('key') + ': ' + storeItem.get('total')+' hits');
                }               
            },
            highlight: {
                segment: {
                    margin: 20
                }
            },
            label: {
                field: 'key',
                display: 'none',
                contrast: true,
                font: '10px Arial'
            }
        }
    ]    
   
});

Controller:

Ext.define('BEM.controller.dashboard.DashboardControl', {
    extend: 'Ext.app.Controller',
    
    models: [
        'dashboard.TopicPieChart'
    ],
    
    stores: [
                'dashboard.TopicPieCharts'
    ],
    
    views: [
        
                'dashboard.TopicPieChart',
        
    ],
    
    refs: [    
           {
                ref: 'topicPie',
                selector: 'topicpie'
            }
    ],
    
    init: function(application){           
        this.control({
            'topicpie': {
                afterrender: this.topicListeners
            }
        });
            
    },

    topicListeners: function(){
        var chartApp = this;
        this.getTopicPie().series.addListener('itemclick', function(){
            console.log('Pie Chart has been clicked!');
        });
         
        console.log(this.getTopicPie().series);  
    },

});

In the image you can see that the listener has been added to the series, however the handler function never fires.

Sencha-Graph-Click.png

Can anyone tell me where I'm going wrong and how to achieve the desired functionality?

Thanks.

[vietits]

1. You should add listener to a series instance, not to chart.series which is a mixed collection that contains all series.

    topicListeners: function(){
        var chartApp = this;
//        this.getTopicPie().series.addListener('itemclick', function(){
        this.getTopicPie().series.getAt(0).addListener('itemclick', function(){
            console.log('Pie Chart has been clicked!');
        });
         
        console.log(this.getTopicPie().series);  
    },

2. You can fire a custom event from the chart and then catch it from controller:

    ...
    series: [{
        type: 'pie',
        angleField: 'total',
        showInLegend: true,
        colorSet: ['#164987','#357FD8','#5FA8FF','#9AB1CC','#C8D7E8'],
        shadowAttribbutes: null,
        style: {
            shadow: 0
        },
        listeners: {
            itemmouseup: function(obj){
                this.chart.fireEvent('chartitemmouseup', obj);
            }   
        }

controller

    init: function(application){           
        this.control({
            'topicpie': {
                //afterrender: this.topicListeners
                chartitemmouseup: function(obj){
                    console.log('chartitemmouseup', obj)
                }
            }
        });
    },

[sambateman]

The first method threw an error but adding the custom event worked perfectly!

Thanks a lot