Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-4808 in a recent build.
  1. #1
    Ext JS Premium Member
    Join Date
    Aug 2011
    Posts
    11
    Vote Rating
    0
    philidem is on a distinguished road

      0  

    Default Impossible to determine exact bar that was clicked with stacked bar chart

    Impossible to determine exact bar that was clicked with stacked bar chart


    REQUIRED INFORMATION
    Ext version tested:
    • Ext 4.0.7
    Browser versions tested against:
    • Chrome 16.
    • IE8
    • FF3 (firebug 1.3.0.10 installed)
    • Safari 4
    DOCTYPE tested against:
    • <!doctype html>
    Description:
    • With a stacked bar chart it is impossible to determine the exact bar that was clicked when handling the "itemmousedown" event. The "item" argument to the "itemmousedown" handler does not provide the "yField" that was clicked
    Steps to reproduce the problem:
    Code:
    listeners : {    itemmousedown : function(item) {
            var year = item.value[0];
            var genre = '(impossible to determine genre that was clicked)';
            
            alert('You clicked ' + year + ', ' + genre);
        }
    }

    The result that was expected:
    • In this example, it's impossible to determine the specific bar that was clicked. For example, if you click on the segment that corresponds to "2008" and "drama" then would like to see this alert:
      'You clicked 2008, drama'
    The result that occurs instead:
    • Because of limitation of event information, the alert in this example will be something like:
      You clicked 2008, (impossible to determine genre that was clicked)
    Test Case:
    Code:
    /*
    
    
    This file is part of Ext JS 4
    
    
    Copyright (c) 2011 Sencha Inc
    
    
    Contact:  http://www.sencha.com/contact
    
    
    Commercial Usage
    Licensees holding valid commercial licenses may use this file in accordance with the Commercial Software License Agreement provided with the Software or, alternatively, in accordance with the terms contained in a written agreement between you and Sencha.
    
    
    If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
    
    
    */
    Ext.require('Ext.chart.*');
    Ext.require('Ext.layout.container.Fit');
    
    
    Ext.onReady(function () {
        var store = Ext.create('Ext.data.JsonStore', {
            fields: ['year', 'comedy', 'action', 'drama', 'thriller'],
            data: [
                    {year: 2005, comedy: 34000000, action: 23890000, drama: 18450000, thriller: 20060000},
                    {year: 2006, comedy: 56703000, action: 38900000, drama: 12650000, thriller: 21000000},
                    {year: 2007, comedy: 42100000, action: 50410000, drama: 25780000, thriller: 23040000},
                    {year: 2008, comedy: 38910000, action: 56070000, drama: 24810000, thriller: 26940000}
                  ]
        });
    
    
        var panel1 = Ext.create('widget.panel', {
            width: 800,
            height: 400,
            title: 'Stacked Bar Chart - Movies by Genre',
            renderTo: Ext.getBody(),
            layout: 'fit',
            items: {
                xtype: 'chart',
                animate: true,
                shadow: true,
                store: store,
                legend: {
                    position: 'right'
                },
                axes: [{
                    type: 'Numeric',
                    position: 'bottom',
                    fields: ['comedy', 'action', 'drama', 'thriller'],
                    title: false,
                    grid: true,
                    label: {
                        renderer: function(v) {
                            return String(v).replace(/000000$/, 'M');
                        }
                    },
                    roundToDecimal: false
                }, {
                    type: 'Category',
                    position: 'left',
                    fields: ['year'],
                    title: false
                }],
                series: [{
                    type: 'bar',
                    axis: 'bottom',
                    gutter: 80,
                    xField: 'year',
                    yField: ['comedy', 'action', 'drama', 'thriller'],
                    stacked: true,
                    listeners : {
                        itemmousedown : function(item) {
                            var year = item.value[0];
                            var genre = '(impossible to determine genre that was clicked)';
                            
                            alert('You clicked ' + year + ', ' + genre);
                        }
                    },
                    tips: {
                        trackMouse: true,
                        width: 65,
                        height: 28,
                        renderer: function(storeItem, item) {
                            this.setTitle(String(item.value[1] / 1000000) + 'M');
                        }
                    }
                }]
            }
        });
    });

    HELPFUL INFORMATION
    Screenshot or Video:
    • attached (see itemmousedown-bug.png)
    See this URL for live test case: http://Debugging already done:
    • none
    Possible fix:
    Code:
    barAttr = {
                        yField: bounds.bars[j],
                        fill: colors[(barsLen > 1 ? j : 0) % colorLength]
                    };
    With this change, you can now modify listener to work properly:
    Code:
    listeners : {
                        itemmousedown : function(item) {
                            var year = item.value[0];
                            var genre = item.attr.yField;
                            
                            alert('You clicked ' + year + ', ' + genre);
                        }
                    }
    Additional CSS used:
    • only default ext-all.css
    Operating System:
    • Windows 7
    Attached Images

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Vote Rating
    814
    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


    Thank you for the report.
    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
    Nov 2011
    Posts
    5
    Vote Rating
    0
    lukesen is on a distinguished road

      0  

    Default


    In 4.1 (Beta 3) the item seems to have a new property, 'yField'. This seems to be always a string and indicate the precise yField for that bar or column item (and not the whole array of yFields as the series' yField property contains).

    In any case, there are workarounds for finding out the yField for an item even in 4.0.x - take a look at http://www.sencha.com/forum/showthre...l=1#post673669, and following posts.

    Hope this helps.

  4. #4
    Ext JS Premium Member
    Join Date
    Aug 2011
    Posts
    11
    Vote Rating
    0
    philidem is on a distinguished road

      0  

    Default


    Thanks, lukesen, for the update and also pointer to the talk thread with workarounds.