Hybrid View

  1. #1
    Sencha User
    Join Date
    Aug 2012
    Location
    Cochin
    Posts
    10
    Vote Rating
    0
    Vishnu C is on a distinguished road

      0  

    Default EXt js line chart time series step is not working properly

    EXt js line chart time series step is not working properly


    Hi All,

    When trying plot line chart with time series STEP [Ext.Date.MONTH, 1]; x axis not adjusting properly .Can any one help me....attaching the screen shot.Capture.PNG

  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


    Can you share a code example the demonstrates the issue you're seeing? Is this on ExtJS 4.2.1?
    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
    Aug 2012
    Location
    Cochin
    Posts
    10
    Vote Rating
    0
    Vishnu C is on a distinguished road

      0  

    Default


    This is my code .We are using 4.0.1 SDK
    *****************************************************
    {
    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:{
    /* rotate:{
    degrees: 315
    },*/

    font:'11px tahoma',

    renderer: function(v){

    var df = Ext.Date.getFirstDateOfMonth(Ext.getCmp('monthPickerStart').value);// IE Compactibility
    var dt = Ext.Date.getFirstDateOfMonth(Ext.getCmp('monthPickerEnd').value);

    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,
    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>');

    }
    }
    }
    }
    ]
    }
    *************************************************************

  4. #4
    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


    I wasn't able to run your test case out of the box (theme referenced but not included, store referenced but not included, etc.).
    There have been a number of fixes to the framework since 4.0.x. Have you tried your code with 4.2.1 to see if the issue you're observing 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/

  5. #5
    Sencha User
    Join Date
    Aug 2012
    Location
    Cochin
    Posts
    10
    Vote Rating
    0
    Vishnu C is on a distinguished road

      0  

    Default EXt js line chart time series step is not working properly

    EXt js line chart time series step is not working properly


    Hi all.

    Still i am not able to find solutions. can any one help me...........
    I have attached the screen shot and my code ...please check it and let me know the changes.. in this POC i am using EXT js 4.2.1.. but still i have issue...

    I am in big trouble.....
    Attached Images
    Attached Files

  6. #6
    Sencha User
    Join Date
    Aug 2012
    Location
    Cochin
    Posts
    10
    Vote Rating
    0
    Vishnu C is on a distinguished road

      0  

    Default


    Any one can help me . this is a major issue for me

    Quote Originally Posted by Vishnu C View Post
    Hi all.

    Still i am not able to find solutions. can any one help me...........
    I have attached the screen shot and my code ...please check it and let me know the changes.. in this POC i am using EXT js 4.2.1.. but still i have issue...

    I am in big trouble.....

Thread Participants: 2

Tags for this Thread