1. #1
    Sencha User
    Join Date
    Dec 2009
    Posts
    37
    Vote Rating
    0
    feanor91 is on a distinguished road

      0  

    Default Problem with chart zoom in.

    Problem with chart zoom in.


    Hello

    In reference to that thread ; http://www.sencha.com/forum/showthread.php?128301-chart-zooming&highlight=chart+zoom

    I
    try to apply a zoom in a chart but I have 2 problems :
    first, if my window that contain chart is no displayed full screen, the selection box is not made in the good spot (it start from x=0, y=0 in place of starting to the point i clicked)
    second, the select event is not fired, the function is not executed so the chart is not zoomed.

    Here the code :

    Code:
    var Comment = Ext.create('Ext.form.field.TextArea', {    width: 580,
        height: 170,
        grow      : true,
        name      : 'message',
        anchor    : '100%'
    });
    
    
    var panTipETTR = Ext.create('Ext.panel.Panel', {
        items: [Comment]
    });
    
    
    var ETTRChartWin= Ext.create('Ext.chart.Chart', {
        flex: 2,
        width: '99.99%',
        animate: true,
        store: stoETTR,
        style: 'background:#fff',
        shadow: true,
        mask: 'true',
            listeners: {
                select: {
                    fn: function(){
                        alert('toto');
                        }
    //                fn: function(me, selection) {
    //                    me.setZoom(selection);
    //                    me.mask.hide();
    //                }
                }
            },
        legend: {
                position: 'bottom',
                boxStroke: '#fff',
                boxFill: '#fff'
            },
        listeners: {
          click: function() {
                winETTR.show();
          }  
        },    
       axes: [
            {
                type: 'Numeric',
                position: 'left',
                fields: ['OSA', 'Ventilation', '3rd Party products', 'ETTR OSA target', 'ETTR ventilation target', 'ETTR 3PP target'],
                label: {
                    renderer: Ext.util.Format.numberRenderer('0.0')
                },
                minimum: 0,
                majorTickSteps: 4,
                    grid: {
                        odd: {
                            opacity: 1,
                            fill: '#ddd',
                            stroke: '#bbb',
                            'stroke-width': 0.5
                        }
                    }
            },
            {
                type: 'Category',
                position: 'bottom',
                fields: ['month'],
                title: 'ETTR (median)',       
                label: {
                    renderer: Ext.util.Format.dateRenderer('F Y'),
                    rotate: {
                        degrees: 315
                    }
                }
    
    
            }
        ],
        series: [
            {
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                fill: true,
                smooth: false,
                xField: 'month',
                yField: 'OSA',
                style: {
                    stroke: '#00ff00'
                },
                tips: {
                    trackMouse: true,
                    width: 580,
                    height: 170,
                    layout: 'fit',
                    items: {
                        xtype: 'container',
                        layout: 'hbox',
                        items: [panTipETTR]
                    },
                    renderer: function(klass, item) {
                        var storeItem = item.storeItem;
    //                        data = [{
    //                            name: 'data1',
    //                            data: storeItem.get('data1')
    //                        }, {
    //                            name: 'data2',
    //                            data: storeItem.get('data2')
    //                        }, {
    //                            name: 'data3',
    //                            data: storeItem.get('data3')
    //                        }, {
    //                            name: 'data4',
    //                            data: storeItem.get('data4')
    //                        }, {
    //                            name: 'data5',
    //                            data: storeItem.get('data5')
    //                        }], i, l, html;
    //                    
                        this.setTitle("Information for " + storeItem.get('month'));
    //                    pieStore.loadData(data);
    //                    gridStore.loadData(data);
    //                    grid.setSize(480, 130);
                    }
                },
                markerConfig: {
                type: 'circle',
                size: 3,
                radius: 3,
                'stroke-width': 0,
                'fill':'#00ff00'
                }
            },
            {
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                 fill: true,
                axis: 'left',
                xField: 'month',
                yField: 'Ventilation',
                smooth: false,
                style: {
                    stroke: '#ff0000'
                },
                listeners: {
                  itemmouseup: function(item) {
                     //alert(item.value[1]+'<br />'+item.value[0]);
                      Ext.example.msg('Item Selected', item.value[1] + ' visits on ' + item.value[0]);
                  }  
                },
                tips: {
                    trackMouse: true,
                    width: 580,
                    height: 170,
                    layout: 'fit',
                    items: {
                        xtype: 'container',
                        layout: 'fit',
                        items: [panTipETTR]
                    },
                    renderer: function(klass, item) {
                        var storeItem = item.storeItem;
                        var srt_month=storeItem.get('month');
                        var dat_DateToCompute = new Date(srt_month.split('/')[2],(parseInt(srt_month.split('/')[0])-1).toString(),srt_month.split('/')[1]); 
                        var month=computeMonth(dat_DateToCompute.getMonth());
                        var year=dat_DateToCompute.getFullYear();    
                        this.setTitle("Information for " + month + " " + year);
                        Comment.setRawValue(storeItem.get('ETTR ventilation comment'));
                    }
                },
                markerConfig: {
                    type: 'circle',
                    size: 3,
                    radius: 3,
                    'stroke-width': 0,
                    'fill':'#ff0000'
                }
            },
            {
                type: 'line',
                 fill: true,
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                xField: 'month',
                yField: '3rd Party products',
                smooth: false,
                style: {
                    stroke: '#0000ff'
                },
                tips: {
                    trackMouse: true,
                    width: 80,
                    height: 40,
                    renderer: function(storeItem, item) {
                        this.setTitle(storeItem.get('month') + '<br />' + storeItem.get('3rd Party products'));
                    }
                },           
                markerConfig: {
                    type: 'circle',
                    size: 3,
                    radius: 3,
                    'stroke-width': 0,
                    'fill':'#0000ff'
                }
            },
            {
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                xField: 'month',
                yField: 'ETTR OSA target',
                showMarkers: false,
                showInLegend: true,
                style: {
                    stroke: '#00ff00'
                }
            },
            {
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                xField: 'month',
                yField: 'ETTR ventilation target',
                showInLegend: true,           
                showMarkers: false,
                style: {
                    stroke: '#ff0000'
                }
            },
            {
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                xField: 'month',
                yField: 'ETTR 3PP target',
                showInLegend: true,
                showMarkers: false,
                style: {
                    stroke: '#0000ff'
                }
            }              
        ]});
        
        var winETTR = Ext.create('Ext.Window', {
            width: 800,
            height: 600,
            minHeight: 400,
            minWidth: 550,
            hidden: false,
            shadow: false,
            maximizable: true,
            title: 'ETTR Chart',
            closeAction: 'hide',
            renderTo: Ext.getBody(),
            layout: 'fit',
    //        tbar: [{
    //            text: 'Reload Data',
    //            handler: function() {
    //                store1.loadData(generateData());
    //            }
    //        }, {
    //            enableToggle: true,
    //            pressed: true,
    //            text: 'Animate',
    //            toggleHandler: function(btn, pressed) {
    //                var chart = Ext.getCmp('chartCmp');
    //                chart.animate = pressed ? { easing: 'ease', duration: 500 } : false;
    //            }
    //        }],
            items: ETTRChartWin
            });
    I tried to make some screenshot but it is hard to render on a capture.

  2. #2
    Sencha User
    Join Date
    Dec 2009
    Posts
    37
    Vote Rating
    0
    feanor91 is on a distinguished road

      0  

    Default


    Don't worry, it's good...The listeners was misplaced, I though it mus be attached to mask property, but in facts, it is a chart listeners....Shame on me.

    Besides that, first problem still here, if window is small, the mask is not draw in the right place.

  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


    Hi,

    I'm getting the problem regarding firing the 'select' event. I'm not getting any mask element! I'm using Ext-4.1-RC3. The following is the code which I'm using as config for the Chart (copying the code from api doc):

    Code:
    mask : true,
    listeners : {
        select : {
            fn : function(me, selection) {
                  me.setZoom(selection);
                  me.mask.hide();
            }
        }
    }
    Is there any problem in my code? Can you please send me any working code for zooming the chart?

  4. #4
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    3,261
    Vote Rating
    63
    Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough

      0  

    Default


    You might need to set 'enableMask: true'.

Thread Participants: 2

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."