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,994
    Vote Rating
    456
    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,994
    Vote Rating
    456
    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

  7. #7
    Sencha User
    Join Date
    Mar 2012
    Posts
    50
    Vote Rating
    2
    pierresas is on a distinguished road

      0  

    Default


    It doesn't appear to be a bug to me. Margins were added on both sides to draw the columns. If you remove the config "style: { 'width': 5}", it's clear what is happening.

  8. #8
    Sencha User
    Join Date
    Mar 2012
    Posts
    50
    Vote Rating
    2
    pierresas is on a distinguished road

      0  

    Default


    There is still a bug that's revealed by your test case: the columns are not displayed at the correct location on the x-axis, but that's independent from displaying a 'line' series at the same time.

    To see it better, remove the 'line' series and modify the 'column' series to display 'data2' (instead of 'data3') in the 'yField' config.

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

      0  

    Default pierresas

    pierresas


    Thank you pierresas for reply. Unfortunately the business requirement of my project needs to show "line" and column together and both their location should based on x-axis.

  10. #10
    Sencha User
    Join Date
    Mar 2012
    Posts
    50
    Vote Rating
    2
    pierresas is on a distinguished road

      0  

    Default


    @leon_tang

    The framework does support lines and columns in one chart; this is not the issue. The problem I see is: in the example you provided, the columns are always slightly off. It doesn't matter whether the lines are displayed or not.

    It is possible that the bug is revealed by this particular data set, which is a good thing because it can be reproduced consistently.

    The bug EXTJSIV-6236 has been renamed "Columns are not displayed at the exact location on the x-axis". It is scheduled to be fixed in version 4.1.2. As a Sencha Premium Member, you will have early access to the fix.

    Again, thank you for your detailed bug report.

Thread Participants: 2