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

**philidem** · 19 Dec 2011 10:50 AM

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:

Start with http://docs.sencha.com/ext-js/4-0/ex.../StackedBar.js
Add this property to the series:

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:

Modify Bar.js (http://docs.sencha.com/ext-js/4-0/so...art-series-Bar)
In "getPaths" function, initialize "barAttr" with a yField property:

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

**mitchellsimoens** · 19 Dec 2011 1:28 PM

Thank you for the report.

**lukesen** · 10 Mar 2012 2:21 AM

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.

**philidem** · 12 Mar 2012 5:16 AM

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

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

Thread Tools

Search Thread

Display

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

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

Tags for this Thread