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
    4,781
    Vote Rating
    167
    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
    4,781
    Vote Rating
    167
    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.....

  7. #7
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,781
    Vote Rating
    167
    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.). Can you post a stand-alone test case to demonstrate the issue you're seeing?

  8. #8
    Sencha Premium Member
    Join Date
    Apr 2013
    Posts
    1
    Vote Rating
    0
    lucian.timar is on a distinguished road

      0  

    Default


    I faced this few weeks ago.
    There is a bug in calculations of time axis labels. Each tick is calculated based on an precalculated number of days and adding them to first day of month This probably works for most of ticks but there are case like yours or mine which by simply adding 30 days to previous tick gives the same month, or in cases like February when skips the month.

    My fix was to add a label renderer for time axis and adding 7-15 days to date that comes as input parameter. By adding 7-15 days will make the days addition to return approximate the middle of each month, therfore when the date is formatted using the specified format will get you the correct month. This should work if you don't need the day to be displayed in the label.

    Code:
     axes: [
         {
         type: 'Time',
         fields: [
         '.....'
         ],
         label: {
         rotation: {
            degrees: 30
         },
         renderer: function(v){
             return Ext.Date.add(new Date(v), Ext.Date.DAY, 7);
         }
         },
         dateFormat: 'M',
         step: [Ext.Date.MONTH,1]
         },
    ...
    I know that is an odd fix but it worked for me.
    Lucian

Thread Participants: 2

Tags for this Thread