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
    5,446
    Vote Rating
    113
    Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice

      0  

    Default


    You might need to set 'enableMask: true'.

Thread Participants: 2