Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2008
    Location
    Bangladesh
    Posts
    38
    Vote Rating
    0
    titu is on a distinguished road

      0  

    Default Cannot zoom chart

    Cannot zoom chart


    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:

    Code:
    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.

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


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

    Ext.chart.Mask constructor says:
    PHP Code:
        constructor: function(config) {
            var 
    me this,
                
    resizeHandler;

            
    me.addEvents('select');

            if (
    config) {
                
    Ext.apply(meconfig);
            }
            if (
    me.enableMask) {
                
    me.on('afterrender', function() {
                    
    //create a mask layer component
                    
    var comp = new Ext.chart.MaskLayer({
                        
    renderTome.el,
                        
    hiddentrue
                    
    });
                    
    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?
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  3. #3
    Ext JS Premium Member
    Join Date
    Nov 2008
    Location
    Bangladesh
    Posts
    38
    Vote Rating
    0
    titu is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goias, Goiânia
    Posts
    449
    Vote Rating
    9
    wemerson.januario will become famous soon enough

      0  

    Default


    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
    Wemerson Januario
    Twitter:
    @wemersonjanuar
    Skype:
    wemerson.januario
    Email: wemerson.januario@gmail.com
    Fone:
    62 9106-6689
    From: Goiânia, Brazil
    Desenvolvedor ExtJS/ ExtJS Developer

  5. #5
    Sencha User
    Join Date
    Aug 2012
    Posts
    3
    Vote Rating
    0
    vpisacane is on a distinguished road

      0  

    Default Zoom working in charts 4.1.1?

    Zoom working in charts 4.1.1?


    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.

  6. #6
    Sencha User
    Join Date
    Apr 2012
    Location
    Russia
    Posts
    2
    Vote Rating
    0
    Russian is on a distinguished road

      0  

    Default


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

  7. #7
    Sencha User
    Join Date
    Jan 2013
    Posts
    8
    Vote Rating
    0
    hassane is on a distinguished road

      0  

    Default


    Hi everybody,

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

  8. #8
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    977
    Vote Rating
    112
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  9. #9
    Sencha User jagadeesha's Avatar
    Join Date
    Jan 2011
    Location
    Bangalore , Trianz
    Posts
    10
    Vote Rating
    0
    jagadeesha has a little shameless behaviour in the past

      2  

    Default zooming issue workaround

    zooming issue workaround


    Quote Originally Posted by hassane View Post
    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.

    Code:
    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

  10. #10
    Sencha User
    Join Date
    Jan 2013
    Posts
    8
    Vote Rating
    0
    hassane is on a distinguished road

      0  

    Default


    Quote Originally Posted by jagadeesha View Post
    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.

    Code:
    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