Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-9517 in 4.2.2.
  1. #1
    Ext JS Premium Member
    Join Date
    Oct 2011
    Posts
    17
    Vote Rating
    4
    k.pavithra is on a distinguished road

      1  

    Default Line chart Zoom problem

    Line chart Zoom problem


    When the graph is in a window of specific size, the zoom mask does not appear in the proper place on the graph. below is the screen shot.

    Zoom when chart is in a window of specific size.jpg

    here is the code i have used
    Code:
    Ext.require('Ext.chart.*');Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']);
    
    
    var store1 = Ext.create('Ext.data.Store', {
            fields: ['name', 'data1', 'data2', 'data3'],
            data:[
                {"name":"jan",  "data1":30 ,"data2":50, "data3":55},
                {"name":"feb",  "data1":40 ,"data2":60, "data3":65},
                {"name":"mar",  "data1":10 ,"data2":20, "data3":35},
                {"name":"apr",  "data1":70 ,"data2":80, "data3":65},
                {"name":"may",  "data1":10 ,"data2":30, "data3":45},
                {"name":"august",  "data1":10 ,"data2":30, "data3":45},
                {"name":"june", "data1":30 ,"data2":50, "data3":95}
            ]
        });
    
    
    Ext.onReady(function () {
        
        var chart = Ext.create('Ext.chart.Chart', {
                style: 'background:#fff',
                animate: true,
                store: store1,
                shadow: true,
                theme: 'Category1',
                resizable:true,
                enableMask: true,
                mask: true,
                listeners: {
                    select: {
                        fn: function(me, selection) {
                            me.setZoom(selection);
                            me.mask.hide();
                        }
                    }
                },
                legend: {
                    position: 'right'
                },
                axes: [{
                    type: 'Numeric',
                    minimum: 0,
                    position: 'left',
                    fields: ['data1', 'data2', 'data3'],
                    title: 'Number of Hits',
                    minorTickSteps: 1,
                    grid: {
                        odd: {
                            opacity: 1,
                            fill: '#ddd',
                            stroke: '#bbb',
                            'stroke-width': 0.5
                        }
                    }
                }, {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['name'],
                    title: 'Month of the Year'
                }],
                series: [{
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    axis: 'left',
                    xField: 'name',
                    yField: 'data1',
                    markerConfig: {
                        type: 'cross',
                        size: 4,
                        radius: 4,
                        'stroke-width': 0
                    }
                },{
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    axis: 'left',
                    xField: 'name',
                    yField: 'data2',
                    markerConfig: {
                        type: 'cross',
                        size: 4,
                        radius: 4,
                        'stroke-width': 0
                    }
                },{
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    axis: 'left',
                    xField: 'name',
                    yField: 'data3',
                    markerConfig: {
                        type: 'cross',
                        size: 4,
                        radius: 4,
                        'stroke-width': 0
                    }
                }]
            });
    
    
    
    
        var win = Ext.create('Ext.Window', {
            width: 800,
            height: 600,
            minHeight: 400,
            minWidth: 550,
            hidden: false,
            maximizable: true,
            title: 'Line Chart',
            renderTo: Ext.getBody(),
            layout: 'fit',
            items: chart
        });
    });

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,010
    Vote Rating
    183
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    50
    Vote Rating
    2
    pierresas is on a distinguished road

      1  

    Default


    Duplicate of EXTJSIV-6249 that was fixed on 22/Aug/2012 and shipped in 4.1.2 or 4.1.3

Thread Participants: 2

Tags for this Thread