How to catch "tap" event for chart "gauge"?

[xytop]

Hi!

How to catch "tap" event for chart "gauge"?
This example dont work:

Ext.define("TBB.util.gaugeChart", {    
extend: "Ext.chart.Chart",    
xtype: "gaugechart",    
config: {        
        xtype: 'gaugechart',
        id: 'gaugechart',
        style: 'background:#F3F4E7',
        height: 180,
        insetPadding: 20,
        animate: {
            easing: 'elasticIn',
            duratuion: 5000
        },
        store: 'TbbPs2Store',
        axes: [
            {
                type: 'gauge',
                position: 'gauge',
                title: '',
                steps: 10,
                minimum: 0,
                maximum: 100,
                margin: -16,
                label: {
                    font: "0.7em 'Helvetica Neue', HelveticaNeue, Helvetica-Neue, Helvetica, 'BBAlpha Sans', sans-serif",
                    contrast: true
                }
            }
        ],
        series: [ 
           {
                type: 'gauge',
                angleField: 'ps',
                donut: 90,
                colorSet: ['#3FFF00', '#ddd'],
                listener:{
                    itemtap: function(){
                        debugger;
                    }
                }
            }
        ]
    },
    initialize: function() {
        this.callParent(arguments);
    }
}); 

Ext.define("TBB.view.kontod.KontodMain",{
    extend: 'Ext.Panel',
    xtype: 'KontodMainPanel',

    config: {
        locales : {
            title : 'kontod.toolbarTitle',
            loadingText : 'loadmask.text'
        },
            style: 'background:#F3F4E7',
        scrollable: true,
        items: [
            {
                xtype: 'panel',
                flex: 1,
                margin: '15 0 0 0', 
               style: 'background:#F3F4E7',
               items: [
                    {
                            xtype:'gaugechart'
                        } ,
                        {
                            xtype: 'image', 
                           src: "resources/images/tbb-logo-s@2x.png",
                            centered: true,
                            style: 'background-size: 100% 100%;',
                            width: 70,
                            height: 70,
                            margin: '85 0 0 0',
                        }
                    ]
            },
            {
                xtype: 'list',
                id: 'kontodMainList',
                flex:1,
                loadingText: '',
                masked: false,
                disableSelection: true,
                scrollable      : false,
                itemTpl: new Ext.XTemplate(
                    '<tpl if="order[0] == \'A\'">',
                        '<div style="display: none;">{ps}%</div>',
                    '<tpl else>',
                        '<div style="text-align:center;">{ps}%<br /><span style="font-size:0.5em">{nickname}</span></div>',
                    '</tpl>'
                )
            }
        ]
    },
    initialize: function() {
        this.callParent(arguments);
        this.down('list').setStore(Ext.create('TBB.store.Pss'));
        var store = this.down('list').getStore();
        store.removeAll(true);
        store.sync();
    }
}); 

Help me, pls...

[mitchellsimoens]

Did you try using interactions?

[asmi]

I wanted to capture some events like itemdoubleclick, itemtap etc , but no event is getting fired for gauge charts , and no interaction is getting fired as well. Is there different way to handle gauge charts ?

[asmi]

Found the workaround here
http://stackoverflow.com/questions/6...ip-not-working

extend the gauge series and override the implementation of isItemInPoint method for gauge chart ,
below is the code , have made minor changes to original code given at above link like , changed this.chart.chartBBox to this._chart.chartBBox and this.donut to this._donut.

This method returns true/ false stating if mouse event has occurred within gauge series .

isItemInPoint: function(x, y, item, i) {
var chartBBox = this._chart.chartBBox;
var centerX = this.centerX = chartBBox.x + (chartBBox.width / 2);
var centerY = this.centerY = chartBBox.y + chartBBox.height;
var outerRadius = Math.min(centerX - chartBBox.x, centerY - chartBBox.y);
var innerRadius = outerRadius * +this._donut / 100;
var r = Math.sqrt(Math.pow(centerX-x, 2) + Math.pow(centerY-y,2));
return r > innerRadius && r < outerRadius;
},

and then you can add listeners to gauge series .