Results 1 to 8 of 8

Thread: EXt js line chart time series step is not working properly

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Aug 2012
    Location
    Cochin
    Posts
    14
    Vote Rating
    1
      0  

    Default 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 - Documentation Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,162
    Vote Rating
    257
      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 human resources manager: fabienne.bell@sencha.com

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Location
    Cochin
    Posts
    14
    Vote Rating
    1
      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 - Documentation Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,162
    Vote Rating
    257
      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 human resources manager: fabienne.bell@sencha.com

  5. #5
    Sencha User
    Join Date
    Aug 2012
    Location
    Cochin
    Posts
    14
    Vote Rating
    1
      0  

    Default 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 Images
    Attached Files Attached Files

  6. #6
    Sencha User
    Join Date
    Aug 2012
    Location
    Cochin
    Posts
    14
    Vote Rating
    1
      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.....

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •