Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    3
    Vote Rating
    0
    arikl is on a distinguished road

      0  

    Default [ExtJS 4.1.X] maximum/toDate chart's axis labels range missing/misplacement

    [ExtJS 4.1.X] maximum/toDate chart's axis labels range missing/misplacement


    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.1.x
    Browser versions tested against:
    • Chrome
    • IE8
    • FF3 (firebug 1.3.0.10 installed)
    • Safari 4
    Description:
    • When dynamically modifying the maximum/toDate (depend on the axis type) axis range the labels:
      • in case of a Number type the axis' labels are doubled displayed.
      • In case of Time type the labels disappears.
    Steps to reproduce the problem:
    • Create chart type line or column (not sure about other types)
    • Set the X axis to be a number
    • Change the chart's axis maximum number to be lower.
    • redraw the chart
    The result that was expected:
    • The maximum label should be set to be the modified.
    The result that occurs instead:
    • The axis ticks are correctly zoomed. But the labels are duplicated in case of Number type and disappear in Time type
    Test Case:
    Code:
        // 1) Time test
            Ext.application({
    
    
                name:'users',
                appFolder:'app',
    
    
                launch:function () {
    
    
                    Ext.define('Users', {
                        extend:'Ext.data.Model',
                        fields:[
                            {name:'time', type:'date', dateFormat:'d-m-Y H:i:s'},
                            'value'
                        ]
                    });
    
    
                    var store  = Ext.create('Ext.data.Store', {
                        model:'Users',
                        data:[
                            {time:"08-04-2012 08:00:00", value:10},
                            {time:"08-04-2012 09:00:00", value:6},
                            {time:"08-04-2012 10:00:00", value:7},
                            {time:"08-04-2012 11:00:00", value:6},
                            {time:"08-04-2012 12:00:00", value:8},
                            {time:"08-04-2012 13:00:00", value:6},
                            {time:"08-04-2012 14:00:00", value:9},
                            {time:"08-04-2012 15:00:00", value:5},
                            {time:"08-04-2012 16:00:00", value:6},
                            {time:"08-04-2012 17:00:00", value:12}
                        ]
    
    
                    });
    
    
                    var chart = Ext.create('Ext.chart.Chart', {
                        width:800,
                        height:600,
                        shadow:true,
                        store:store,
                        legend:{
                            position:'right'
                        },
                        animate:true,
                        mask:'horizontal',
                        axes:[
                            {
                                type:'Numeric',
                                minimum:0,
                                maximum:12,
                                position:'left',
                                fields:['value'],
                                title:'Y something'
                            },
                            {
                                type:'Time',
                                position:'bottom',
                                dateFormat:'H:i:s',
                                fromDate: new Date("08:00:00"),
                                toDate: new Date("17:00:00"),
                                step:[Ext.Date.HOUR, 1],
                                fields:['time'],
                                title:'X something'
                            }
                        ],
                        series:[
                            {
                                //fake series which just shows the fill..
                                type:'line',
                                axis:['left', 'bottom'],
                                fill:true,
                                xField:'time',
                                yField:'value'
                            }
    
    
                        ]
                    });
    
    
                    var lowSwitchVar = 0;
                    var hightSwitchVar = 9;
    
    
                    var btndn = Ext.create('Ext.Button', {
                        text: 'Chart axis Down',
                        handler: function() {
                            var axis = chart.axes.items[1];
                            axis.toDate = new Date("17:00:00");
                            axis.fromDate = new Date("08:00:00");
                            chart.redraw(true);
    
    
                            axis.toDate = axis.labels[hightSwitchVar--];
                            axis.fromDate = axis.labels[lowSwitchVar++];
                            chart.redraw(true);
                        }
                    });
                    var btnup = Ext.create('Ext.Button', {
                        text: 'Chart axis Up',
                        handler: function() {
                            var axis = chart.axes.items[1];
                            axis.toDate = new Date("17:00:00");
                            axis.fromDate = new Date("08:00:00");
                            chart.redraw(true);
    
    
                            axis.toDate = axis.labels[hightSwitchVar++];
                            axis.fromDate = axis.labels[lowSwitchVar--];
                            chart.redraw(true);
                        }
                    });
    
    
                    Ext.create('Ext.container.Viewport', {
                        layout:'fit',
                        items:[
                            {
                                region:'center',
                                layout:'vbox',
                                xtype:'panel',
                                resizable:true,
                                title:'Users',
                                items:[
                                    chart, btndn, btnup
                                ]
                            }
                        ]
                    });
    
    
                }
            });
    
    
    
            // 2) Number Test
            Ext.application({
    
    
                name:'users',
                appFolder:'app',
    
    
                launch:function () {
    
    
                    Ext.define('Users', {
                        extend:'Ext.data.Model',
                        fields:['time', 'value']
                    });
    
    
    
    
                    // Uses the User Model's Proxy
                    var store = Ext.create('Ext.data.Store', {
                        model:'Users',
                        data:[
                            {time:8, value:10},
                            {time:9, value:6},
                            {time:10, value:7},
                            {time:11, value:6},
                            {time:12, value:8},
                            {time:13, value:6},
                            {time:14, value:9},
                            {time:15, value:5},
                            {time:16, value:6},
                            {time:17, value:12}
                        ]
    
    
                    });
    
    
                    var chart = Ext.create('Ext.chart.Chart', {
                        width:800,
                        height:600,
                        shadow:true,
                        store:store,
                        legend:{
                            position:'right'
                        },
                        animate:true,
                        mask:'horizontal',
                        axes:[
                            {
                                type:'Numeric',
                                minimum:0,
                                maximum:12,
                                position:'left',
                                fields:['value'],
                                title:'Y something'
                            },
                            {
                                minimum:8,
                                maximum:17,
                                type:'Numeric',
                                position:'bottom',
                                fields:['time'],
                                title:'X something'
                            }
                        ],
                        series:[
                            {
                                //fake series which just shows the fill..
                                type:'line',
                                axis:['left', 'bottom'],
                                fill:true,
                                xField:'time',
                                yField:'value'
                            }
    
    
                        ]
                    });
    
    
                    var switchVar = 1;
    
    
                    var btndn = Ext.create('Ext.Button', {
                        text: 'Chart axis Down',
                        handler: function() {
                            var axis = chart.axes.items[1];
                            axis.minimum += switchVar;
                            axis.maximum -= switchVar;
                            chart.redraw(true);
                        }
                    });
                    var btnup = Ext.create('Ext.Button', {
                        text: 'Chart axis Up',
                        handler: function() {
                            var axis = chart.axes.items[1];
                            axis.minimum -= switchVar;
                            axis.maximum += switchVar;
                            chart.redraw(true);
                        }
                    });
    
    
                    Ext.create('Ext.container.Viewport', {
                        layout:'fit',
                        items:[
                            {
                                region:'center',
                                layout:'vbox',
                                xtype:'panel',
                                resizable:true,
                                title:'Users',
                                items:[
                                    chart, btndn, btnup
                                ]
                            }
                        ]
                    });
    
    
                }
            });
    HELPFUL INFORMATION

    Screenshots:
    Live test case:
    • none (Just run the given examples)
    Possible fix:

    I managed to fix the problem.
    The issue is about the label transformations, currently the code is like that:

    Code:
     
    Ext.chart.axis.Axis.override({
    
    
        drawHorizontalLabels: function () {
    
    ...
    
    textLabel.setAttributes({                hidden: false,
                    x: x,
                    y: y
                }, true);
    
    ...
    It should be like that:
    Code:
    Ext.chart.axis.Axis.override({
    
    
        drawHorizontalLabels: function () {
    ...
    
    textLabel.setAttributes({
                            hidden:false,
                            translate:{
                                x:x,
                                y:y
                            }
                        }, true);
    ...
    I noticed that there are other places with that kind of behavior.

    Additional CSS used:
    • only default ext-all.css
    Operating System:
    • WinXP Pro

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,910
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Can we get the exact version of 4.1 that you are using to see this? I have tried on 4.1RC1 -> 4.1RC3 and I cannot see this behavior:

    -text overlapping on axis
    -overflow of chart on axis

    Have you tried the latest RC, or do you have access to the latest Nightly Builds?

    Regards,
    Scott.

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    3
    Vote Rating
    0
    arikl is on a distinguished road

      0  

    Default


    In the following comment you can see the ExtJS version I'm using (4.1.RC1), Another version which I have to use is the ExtJS 4.1 beta. On both this issue occurs.

    Code:
    /* 
    This file is part of Ext JS 4.1
    
    
    Copyright (c) 2011-2012 Sencha Inc
    
    
    Contact:  http://www.sencha.com/contact
    
    
    Pre-release code in the Ext repository is intended for development purposes only and will
    not always be stable. 
    
    
    Use of pre-release code is permitted with your application at your own risk under standard
    Ext license terms. Public redistribution is prohibited.
    
    
    For early licensing, please contact us at licensing@sencha.com
    
    
    Build date: 2012-03-13 14:31:45 (92d45716fd5f49811568ad9d756992f1cced424d)

Thread Participants: 1