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
    2,430
    Vote Rating
    51
    Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about

      0  

    Default


    You might need to set 'enableMask: true'.

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar