Hybrid View

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-6236 in a recent build.
  1. #1
    Sencha Premium Member
    Join Date
    Feb 2011
    Location
    UK
    Posts
    17
    Vote Rating
    0
    leon_tang is on a distinguished road

      0  

    Exclamation the x axis is slip when you have line series and column series in one chart

    the x axis is slip when you have line series and column series in one chart


    Hi:

    I created a very simple page. if you run it, everything is fine.
    ChartWithNoProblem.png
    T
    he js file is below:
    Code:
    var store = Ext.create('Ext.data.JsonStore', {
         fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
         data: [
             {'data1':100, 'data2':12, 'data3':0, 'data4':0, 'data5':13},
             {'data1':103, 'data2':8, 'data3':0, 'data4':0, 'data5':3},
             {'data1':105, 'data2':8, 'data3':0, 'data4':0, 'data5':3},
             {'data1':110, 'data2':2, 'data3':0, 'data4':0, 'data5':7},
             {'data1':115, 'data2':2, 'data3':0, 'data4':0, 'data5':7},
             {'data1':120, 'data2':14, 'data3':10, 'data4':0, 'data5':23},
             {'data1':125, 'data2':14, 'data3':0, 'data4':0, 'data5':23},
             {'data1':128, 'data2':14, 'data3':0, 'data4':0, 'data5':23},
             {'data1':130, 'data2':38, 'data3':0, 'data4':0, 'data5':33}
         ]
    });
    
    
    Ext.create('Ext.chart.Chart', {
        renderTo: Ext.getBody(),
        width: 500,
        height: 300,
        store: store,
        axes: [{
            type: 'Numeric',
            grid: true,
            position: 'left',
            fields: ['data2', 'data3', 'data4', 'data5'],
            title: 'Sample Values',
            grid: {
                odd: {
                    opacity: 1,
                    fill: '#ddd',
                    stroke: '#bbb',
                    'stroke-width': 1
                }
            },
            minimum: 0,
            adjustMinimumByMajorUnit: 0
        }, {
            type: 'Numeric',
            position: 'bottom',
            fields: ['data1'],
            grid: true,
            label: {
                rotate: {
                    degrees: 315
                }
            },
            minimum: 100,
            adjustMinimumByMajorUnit: false,
            majorTickSteps: 5,
            
            decimals: false
        }],
        series: [{
            type: 'line',
            highlight: false,
            axis: 'left',
            xField: 'data1',
            yField: 'data2',
            smooth: true,
            showMarkers: false
        }]
    });
    but if you add a series of "column" in the page the start point of x axis is slip on the right, also the line chart is slip as well. The weird thing is the column didn't slip so the position of the line or column is not correct.
    ChartWithProblem.png

    Code:
    var store = Ext.create('Ext.data.JsonStore', {
         fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
         data: [
             {'data1':100, 'data2':12, 'data3':0, 'data4':0, 'data5':13},
             {'data1':103, 'data2':8, 'data3':0, 'data4':0, 'data5':3},
             {'data1':105, 'data2':8, 'data3':0, 'data4':0, 'data5':3},
             {'data1':110, 'data2':2, 'data3':0, 'data4':0, 'data5':7},
             {'data1':115, 'data2':2, 'data3':0, 'data4':0, 'data5':7},
             {'data1':120, 'data2':14, 'data3':10, 'data4':0, 'data5':23},
             {'data1':125, 'data2':14, 'data3':0, 'data4':0, 'data5':23},
             {'data1':128, 'data2':14, 'data3':0, 'data4':0, 'data5':23},
             {'data1':130, 'data2':38, 'data3':0, 'data4':0, 'data5':33}
         ]
    });
    
    
    Ext.create('Ext.chart.Chart', {
        renderTo: Ext.getBody(),
        width: 500,
        height: 300,
        store: store,
        axes: [{
            type: 'Numeric',
            grid: true,
            position: 'left',
            fields: ['data2', 'data3', 'data4', 'data5'],
            title: 'Sample Values',
            grid: {
                odd: {
                    opacity: 1,
                    fill: '#ddd',
                    stroke: '#bbb',
                    'stroke-width': 1
                }
            },
            minimum: 0,
            adjustMinimumByMajorUnit: 0
        }, {
            type: 'Numeric',
            position: 'bottom',
            fields: ['data1'],
            grid: true,
            label: {
                rotate: {
                    degrees: 315
                }
            },
            minimum: 100,
            adjustMinimumByMajorUnit: false,
            majorTickSteps: 5,
            
            decimals: false
        }],
        series: [{
            type: 'line',
            highlight: false,
            axis: 'left',
            xField: 'data1',
            yField: 'data2',
            smooth: true,
            showMarkers: false
        },{
            type: 'column',
            axis: ['left'],
            xField: 'data1',
            yField: 'data3',
            style: { 'width': 5},
            tips: {
                    trackMouse: true,
                    width: 140,
                    height: 28,
                    renderer: function (storeItem, item) {
                        this.setTitle(storeItem.get('data1'));
                    }
            }
        }]
    });
    I am using Ext JS 4.1. Could you know how to solved it? I attached the screen shoot for you, hope this may help.
    Thank you very much.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,927
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    What I see here is that when you added the column, it created a left and right margin to account for the 0 in the column chart data and also created a margin on the right, even though the data maxed at 130 .. basically sqeezing the chart, but the aspect of the line chart is still correct.

    If the margin on the right was omitted, then it would be correct?

    Did I miss something?

    Regards,
    Scott.

  3. #3
    Sencha Premium Member
    Join Date
    Feb 2011
    Location
    UK
    Posts
    17
    Vote Rating
    0
    leon_tang is on a distinguished road

      0  

    Default


    Hi Scott:

    Omitting the right margin will make the column in the same position of line chart. Which will be fine.

    How about the left margin? It still make a gap between 0 and 100 in x axis. Can we remove both margins?

    Thank you

    PS: I removed the duplicate post in other section. Sorry about it

  4. #4
    Sencha Premium Member
    Join Date
    Feb 2011
    Location
    UK
    Posts
    17
    Vote Rating
    0
    leon_tang is on a distinguished road

      0  

    Default


    Hi Scott:

    Any update about this issue?
    Thank you

    Tom

  5. #5
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,927
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    I have classified this as a bug and it will be reviewed soon. See ID at top for tracking reference.

    Scott.

  6. #6
    Sencha Premium Member
    Join Date
    Feb 2011
    Location
    UK
    Posts
    17
    Vote Rating
    0
    leon_tang is on a distinguished road

      0  

    Default


    oh sorry Scott, I didn't notice that.
    Thank you for your update

Thread Participants: 2