1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    4
    Vote Rating
    0
    Answers
    1
    sambateman is on a distinguished road

      0  

    Default Answered: Graph click listeners

    Answered: Graph click listeners


    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:
    Code:
    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:
    Code:
    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.

  2. 1. You should add listener to a series instance, not to chart.series which is a mixed collection that contains all series.
    Code:
        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:
    Code:
        ...
        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
    Code:
        init: function(application){           
            this.control({
                'topicpie': {
                    //afterrender: this.topicListeners
                    chartitemmouseup: function(obj){
                        console.log('chartitemmouseup', obj)
                    }
                }
            });
        },

  3. #2
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    115
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      0  

    Default


    1. You should add listener to a series instance, not to chart.series which is a mixed collection that contains all series.
    Code:
        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:
    Code:
        ...
        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
    Code:
        init: function(application){           
            this.control({
                'topicpie': {
                    //afterrender: this.topicListeners
                    chartitemmouseup: function(obj){
                        console.log('chartitemmouseup', obj)
                    }
                }
            });
        },

  4. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    4
    Vote Rating
    0
    Answers
    1
    sambateman is on a distinguished road

      0  

    Default


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

    Thanks a lot

Thread Participants: 1

Tags for this Thread