Cannot zoom chart

[titu]

I'm using ExtJS 4.1-rc2 and trying to zoom chart. I'm following the code sample for the 'mask' config and 'select' event from the api doc and here is my code for the chart:

Ext.widget("chart", {
        style : 'background:#fff',
        animate : true,
        shadow : false,
        store : this.chartStore,
        itemId : 'mychart',
        mask : true,
        legend : {
            position : 'bottom'
        },
        listeners : {
            select : {
                fn : function(me, selection) {
                    me.setZoom(selection);
                    me.mask.hide();
                }
            }
        },
        axes : [{
            type : 'Numeric',
            position : 'left',
            fields : this.numericFields,
            title : EasyAdmin.Locale
                    .localize("Usage Level"),
            grid : {
                odd : {
                    opacity : 0.7,
                    fill : '#ddd',
                    stroke : '#bbb',
                    'stroke-width' : 0.5
                }
            }
        }, {
            type : 'Time',
            position : 'bottom',
            dateFormat : EAUtil.getDateFormat(),
            fields : this.timeFields,
            title : EasyAdmin.Locale.localize("Date"),
            label : {
                rotate : {
                    degrees : -90
                }
            },
            grid : true
        }],
        series : this.series
    });

and I'm getting the UI like:

chart.jpg

And when I'm trying to zoom by trying to select any region or clicking then nothing happens! Also not getting any mask element that I can use to select region.

[jsakalos]

There's something strange going on here, I'm prone to say it's a bug.

Ext.chart.Mask constructor says:

    constructor: function(config) {
        var me = this,
            resizeHandler;

        me.addEvents('select');

        if (config) {
            Ext.apply(me, config);
        }
        if (me.enableMask) {
            me.on('afterrender', function() {
                //create a mask layer component
                var comp = new Ext.chart.MaskLayer({
                    renderTo: me.el,
                    hidden: true
                });
                comp.el.on({
                    'mousemove': function(e) {
                        me.onMouseMove(e);
                    },
                    'mouseup': function(e) {
                        me.resized(e);
                    }
                });
// ... 

So I've tried to set enableMask:true in Ext line chart example but it throws an error and doesn't work.

Do you want me to move this thread to Bugs?

[titu]

Thanks for your findings. Yes, please move this thread to bugs.

[wemerson.januario]

chart does not firing the select event when you setr mask true or horizontal or vertical, if I set enableMask: true firebug show me error

Uncaught TypeError: Cannot call method 'hasOwnProperty' of undefined

[vpisacane]

Just checking if chart zoom works in 4.1.1 or not. We are looking to purchase, but need zoom to work before we go ahead.

[Russian]

Yes, it is very important for me as well. Is it fixed?

[hassane]

Hi everybody,

did anyone fix this problem or find an alternative solution? I really need it. Thank you so much for any reply

[Daniil]

There are two opened bugs.
http://www.sencha.com/forum/showthread.php?252868
http://www.sencha.com/forum/showthread.php?252869

[jagadeesha]

Hi everybody,

did anyone fix this problem or find an alternative solution? I really need it. Thank you so much for any reply

From all of my analysis finally am able to find out why zooming is not working.

Problem is with enableMask config of the chart , this is not getting set with the chart constructor and always it comes as undefined and hence whole zooming logic is disabled.

Here is the fix that i have made and it works.

Ext.define('MyAsup.view.performance.CreateChart',{
    extend : 'Ext.chart.Chart',


     enableMask: true,

      mask: true,

       constructor : function(configs){
		configs.enableMask =this.enableMask;
		this.callParent(arguments);
	},
.......
....


})

Try it out

[hassane]

From all of my analysis finally am able to find out why zooming is not working.

Problem is with enableMask config of the chart , this is not getting set with the chart constructor and always it comes as undefined and hence whole zooming logic is disabled.

Here is the fix that i have made and it works.

Ext.define('MyAsup.view.performance.CreateChart',{
    extend : 'Ext.chart.Chart',


     enableMask: true,

      mask: true,

       constructor : function(configs){
        configs.enableMask =this.enableMask;
        this.callParent(arguments);
    },
.......
....


})

Try it out

Great work, jagadeesha. Thank you for your time and consideration.
I do not know why the mask is a little shifted from the place I drag. Do you have any idea