1. #1
    Sencha User
    Join Date
    Mar 2012
    Location
    Tallinn, Estonia
    Posts
    4
    Vote Rating
    0
    xytop is on a distinguished road

      0  

    Default Unanswered: How to catch "tap" event for chart "gauge"?

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


    Hi!

    How to catch "tap" event for chart "gauge"?
    This example dont work:
    PHP Code:
    Ext.define("TBB.util.gaugeChart", {    
    extend"Ext.chart.Chart",    
    xtype"gaugechart",    
    config: {        
            
    xtype'gaugechart',
            
    id'gaugechart',
            
    style'background:#F3F4E7',
            
    height180,
            
    insetPadding20,
            
    animate: {
                
    easing'elasticIn',
                
    duratuion5000
            
    },
            
    store'TbbPs2Store',
            
    axes: [
                {
                    
    type'gauge',
                    
    position'gauge',
                    
    title'',
                    
    steps10,
                    
    minimum0,
                    
    maximum100,
                    
    margin: -16,
                    
    label: {
                        
    font"0.7em 'Helvetica Neue', HelveticaNeue, Helvetica-Neue, Helvetica, 'BBAlpha Sans', sans-serif",
                        
    contrasttrue
                    
    }
                }
            ],
            
    series: [ 
               {
                    
    type'gauge',
                    
    angleField'ps',
                    
    donut90,
                    
    colorSet: ['#3FFF00''#ddd'],
                    
    listener:{
                        
    itemtap: function(){
                            
    debugger;
                        }
                    }
                }
            ]
        },
        
    initialize: function() {
            
    this.callParent(arguments);
        }
    }); 
    PHP Code:
    Ext.define("TBB.view.kontod.KontodMain",{
        
    extend'Ext.Panel',
        
    xtype'KontodMainPanel',

        
    config: {
            
    locales : {
                
    title 'kontod.toolbarTitle',
                
    loadingText 'loadmask.text'
            
    },
                
    style'background:#F3F4E7',
            
    scrollabletrue,
            
    items: [
                {
                    
    xtype'panel',
                    
    flex1,
                    
    margin'15 0 0 0'
                   
    style'background:#F3F4E7',
                   
    items: [
                        {
                                
    xtype:'gaugechart'
                            
    } ,
                            {
                                
    xtype'image'
                               
    src"resources/images/tbb-logo-s@2x.png",
                                
    centeredtrue,
                                
    style'background-size: 100% 100%;',
                                
    width70,
                                
    height70,
                                
    margin'85 0 0 0',
                            }
                        ]
                },
                {
                    
    xtype'list',
                    
    id'kontodMainList',
                    
    flex:1,
                    
    loadingText'',
                    
    maskedfalse,
                    
    disableSelectiontrue,
                    
    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...

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    872
    Answers
    3564
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Did you try using interactions?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    2
    Vote Rating
    0
    asmi is on a distinguished road

      0  

    Default no Item event is getting fired for gauge charts

    no Item event is getting fired for gauge charts


    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 ?

  4. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    2
    Vote Rating
    0
    asmi is on a distinguished road

      0  

    Default Workaround to catch item events for gauge chart

    Workaround to catch item events for gauge chart


    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 .

Thread Participants: 2