1. #1
    Sencha User
    Join Date
    May 2012
    Location
    Bangalore
    Posts
    95
    Vote Rating
    1
    Rameshlamani is on a distinguished road

      0  

    Default Why line graph not plotting completely in extjs?

    Why line graph not plotting completely in extjs?


    I have done application using Extjs 4.1. In this app implemented many charts working nicely. But one issue is facing in line chart, not able resolve it. Line chart is not plotting completely till end of the month.Json contains complete month data, no doubt at all. On mouse hover on line graph data will shows particular month and date. For more reference have attached two images (Dec-Jan and Dec-Feb). I have tried lot but not able to resolve. Find the image and code let me know. From where i am getting this issue. How can i resolve? Great appreciated. Thank you.
    Code Here:

    Code:
        {
                    xtype:'chart',
                    id: 'productionAnalysis',
                    animate:false,            
                    flex : 1,
                    legend:{
                        position: 'float',
                        x: -120,
                        y: 1,
                        boxZIndex :0,
                        boxStrokeWidth:0            
                    },
        
                    theme:'VolumesLargeChartTheme',
                    store : 'ProdAnalysisChartStore',
                    axes: [
                    {
                        type: 'Numeric',
                        position: 'left',
                        fields:['Gas'],
                        labelTitle: {
                            font: 'bold 12px tahoma'
                        },
                        title: 'MCFpd',
                        label: {
                            renderer: function(v) {
                                if(v>999 || v<-999)
                                    return v.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                                else if(v%1 != 0 )
                                    return Ext.util.Format.number(v, '0.0');
                                else
                                    return v;
                            }
                        },
                        grid:true
                  
                    }, 
                    {
                        type: 'Numeric' ,
                        position:'right',
                        fields: ['Oil','Water','NGL'],
                        labelTitle: {   
                            font: 'bold 12px tahoma'
                        },
                        title: 'BBLpd',
                        label: {
                            renderer: function(v) {
                                if(v>999 || v<-999)
                                    return v.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                                else if(v%1 != 0 )
                                    return Ext.util.Format.number(v, '0.0');
                                else
                                    return v;
                            }
                        }
        
                    } ,
        {
                        type: 'Category',
                        position:'top',
                        dashSize:0
                    },
                    {
                        type:'Time',
                        step: [Ext.Date.MONTH,1] ,
                        position:'bottom',
                        fields:['Month'],   
                        grid:true,
                        label:{                                       
                            font:'11px tahoma',                
                            renderer: function(v){                        
                                // var df = new Date(Date.parse(OpsConstants.fromDate.replace('/', "-")));// IE Compactibility
                                //var dt = new Date(Date.parse(OpsConstants.toDate.replace('/', "-")));                         
                                var df = Ext.Date.getFirstDateOfMonth(Ext.getCmp('monthPickerStart').value);// IE Compactibility
                                var dt =  Ext.Date.getFirstDateOfMonth(Ext.getCmp('monthPickerEnd').value);
                                //                         var df = OpsConstants.globalObject.getController('WellVolumeController').dateUnitConverter('start');
                                //                        var dt = OpsConstants.globalObject.getController('WellVolumeController').dateUnitConverter('end');
                                // var d = new Date();
                                var d = Ext.Date.add(dt,Ext.Date.MONTH,1);   
                                
                                if(new Date(v)>=d){
                                                          
                                    return "";
                                }
                                
                                var monDiff= dt.getMonth() - df.getMonth() + (12 * (dt.getFullYear() - df.getFullYear()))+1;
                                
                                if (monDiff < 3)
                                    return Ext.Date.format(new Date(v),'d M Y');
                                    
                                else if(monDiff >= 3 && monDiff < 60 )
                                    return Ext.Date.format(new Date(v),'M Y');
                                    
                                else
                                    return (Ext.Date.format(new Date(v),'Y'));
        
                            }
                        }
                    }
                    ],
                    series:[
                    {
                        type: 'line',
                        axis:['left', 'bottom'],
                        xField: 'Month',
                        yField: 'Gas',
                        selectionTolerance:5,               
                        showMarkers:false,
                        style: {
                            'stroke-width': 2
                        },
                        tips: {
                            trackMouse: true,
                            width:260,
                            height:85,
                            baseCls: 'tips',
                            renderer: function(storeItem, item) {
        
                                if(storeItem.get('ProductionLossAsStr') == ''){
                                    storeItem.data.ProductionLossAsStr = 0;
                                }
                                else if(storeItem.get('GasAsStr') == ''){
                                    storeItem.data.GasAsStr = 0;
                                }else if(storeItem.get('OilAsStr') == ''){
                                    storeItem.data.OilAsStr = 0;
                                }
                                else if(storeItem.get('NGLAsStr') == ''){
                                    storeItem.data.NGLAsStr = 0;
                                }
                                else if(storeItem.get('WaterAsStr') == ''){
                                    storeItem.data.WaterAsStr = 0;
                                }
        
                                if(OpsConstants.netButtonText == 'Net'){
                                    
                                    this.setTitle('<div class="burnUpTipsHeader"><center>'+Ext.Date.format(storeItem.get('Month'),'m/d/Y')+'</center></div><div class="burnUpTipsContent"><p>Residue Gas(MCFpd): ' +storeItem.get('GasAsStr')+'</p><p>Oil(BBLpd): ' + storeItem.get('OilAsStr')+'</p><p>NGL(BBLpd): ' + storeItem.get('NGLAsStr')+
                                        '</p></br></br></div>');
        
                                }
                                else{
                                    this.setTitle('<div class="burnUpTipsHeader"><center>'+Ext.Date.format(storeItem.get('Month'),'m/d/Y')+'</center></div><div class="burnUpTipsContent"><p>'+Ext.getCmp('prodVolumeLegendCombo').getRawValue()+'(MCFpd): ' +storeItem.get('GasAsStr')+'</p><p>Oil(BBLpd): ' + storeItem.get('OilAsStr')+'</p><p>Water(BBLpd): ' + storeItem.get('WaterAsStr')+
                                        '</p></br></br></div>');
        
                                }
                            }
                        }
                    },{
                        type: 'line',
                        xField: 'Month',
                        yField: 'Oil',
                        axis:['right', 'bottom'],
                        selectionTolerance:5,               
                        showMarkers: false,
                        style: {    
                            'stroke-width': 2
                        },
                        tips: {
                            trackMouse: true,
                            width:260,
                            height:85,
                            baseCls: 'tips',
        
                            renderer: function(storeItem, item) {
                                if(storeItem.get('ProductionLossAsStr') == ''){
                                    storeItem.data.ProductionLossAsStr = 0;
                                }
                                if(OpsConstants.netButtonText == 'Net'){
                                    this.setTitle('<div class="burnUpTipsHeader"><center>'+Ext.Date.format(storeItem.get('Month'),'m/d/Y')+'</center></div><div class="burnUpTipsContent"><p>Residue Gas(MCFpd): ' +storeItem.get('GasAsStr')+'</p><p>Oil(BBLpd): ' + storeItem.get('OilAsStr')+'</p><p>NGL(BBLpd): ' + storeItem.get('NGLAsStr')+
                                        '</p></br></br></div>');
                        
                                }
                                else{
                                    this.setTitle('<div class="burnUpTipsHeader"><center>'+Ext.Date.format(storeItem.get('Month'),'m/d/Y')+'</center></div><div class="burnUpTipsContent"><p>'+Ext.getCmp('prodVolumeLegendCombo').getRawValue()+'(MCFpd): '+storeItem.get('GasAsStr')+'</p><p>Oil(BBLpd): ' + storeItem.get('OilAsStr')+'</p><p>Water(BBLpd): ' + storeItem.get('WaterAsStr')+
                                        '</p></br></br></div>');
                     
                                }
                            }
                        }
                    },
                    {
                        type: 'line',
                        xField: 'Month',
                        yField: 'Water',
                        axis:['right', 'bottom'],
                        selectionTolerance:5,
                        //smooth:true,
                        showMarkers:false,
                        style: {
                            'stroke-width': 2
                       
                        },
                        tips: {
                            trackMouse: true,
                            width:260,
                            height:85,
                            baseCls: 'tips',
                            renderer: function(storeItem, item) {
                                if(storeItem.get('ProductionLossAsStr') == ''){
                                    storeItem.data.ProductionLossAsStr = 0;
                                } 
                                if(OpsConstants.netButtonText == 'Net'){
                                    this.setTitle('<div class="burnUpTipsHeader"><center>'+Ext.Date.format(storeItem.get('Month'),'m/d/Y')+'</center></div><div class="burnUpTipsContent"><p>Residue Gas(MCFpd): ' +storeItem.get('GasAsStr')+'</p><p>Oil(BBLpd): ' + storeItem.get('OilAsStr')+'</p><p>NGL(BBLpd): ' + storeItem.get('NGLAsStr')+
                                        '</p></br></br></div>');
                        
                                }
                                else{
                                    this.setTitle('<div class="burnUpTipsHeader"><center>'+Ext.Date.format(storeItem.get('Month'),'m/d/Y')+'</center></div><div class="burnUpTipsContent"><p>'+Ext.getCmp('prodVolumeLegendCombo').getRawValue()+'(MCFpd): '+storeItem.get('GasAsStr')+'</p><p>Oil(BBLpd): ' + storeItem.get('OilAsStr')+'</p><p>Water(BBLpd): ' + storeItem.get('WaterAsStr')+
                                        '</p></br></br></div>');
                     
                                }
                            }
                        }
                    },
                    {
                        type: 'line',
                        xField: 'Month',
                        yField: 'NGL',
                        axis:['right', 'bottom'],
                        selectionTolerance:5,               
                        showMarkers: false,
                        style: {    
                            'stroke-width': 2,
                            fill : 'rgb( 133, 36,133)',
                            stroke: 'rgb( 133, 36,133)'
                        },
                        tips: {
                            trackMouse: true,
                            width:260,
                            height:85,
                            baseCls: 'tips',
                            renderer: function(storeItem, item) {
                                if(storeItem.get('ProductionLossAsStr') == ''){
                                    storeItem.data.ProductionLossAsStr = 0;
                                }
                                if(OpsConstants.netButtonText == 'Net'){
                                    this.setTitle('<div class="burnUpTipsHeader"><center>'+Ext.Date.format(storeItem.get('Month'),'m/d/Y')+'</center></div><div class="burnUpTipsContent"><p>Residue Gas(MCFpd): ' +storeItem.get('GasAsStr')+'</p><p>Oil(BBLpd): ' + storeItem.get('OilAsStr')+'</p><p>NGL(BBLpd): ' + storeItem.get('NGLAsStr')+
                                        '</p></br></br></div>');
                        
                                }
                                else{
                                    this.setTitle('<div class="burnUpTipsHeader"><center>'+Ext.Date.format(storeItem.get('Month'),'m/d/Y')+'</center></div><div class="burnUpTipsContent"><p>'+Ext.getCmp('prodVolumeLegendCombo').getRawValue()+'(MCFpd): '+storeItem.get('GasAsStr')+'</p><p>Oil(BBLpd): ' + storeItem.get('OilAsStr')+'</p><p>Water(BBLpd): ' + storeItem.get('WaterAsStr')+
                                        '</p></br></br></div>');
                     
                                }
                            }
                        }
                    }
                    ]
                }
    Dec-Feb.png
    Dec-Jan.png

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,770
    Vote Rating
    165
    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


    Have you tried the same code using version 4.2.1 of the framework to see if there was a rendering bug between 4.1 and 4.2.1 that has been fixed?
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

  3. #3
    Sencha User
    Join Date
    May 2012
    Location
    Bangalore
    Posts
    95
    Vote Rating
    1
    Rameshlamani is on a distinguished road

      0  

    Default


    Hi, Thank you for your reply. Already my team member is tried in 4.2.1 but still have the same issue. Find the link . http://www.sencha.com/forum/showthre...rking-properly . still have bug in Extjs 4.2.1. This issue very headache not able to resolve. customers are pointing to this issue only . How to resolve this issue ?. Great appreciated. Thank you.

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,770
    Vote Rating
    165
    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


    Can you post a complete test case with data that demonstrates the issue? Thus far I've not been able to create a test case that reproduces the issue you're seeing.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

Thread Participants: 1

Tags for this Thread

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