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

[leon_tang]

Hi:

I created a very simple page. if you run it, everything is fine.
ChartWithNoProblem.png
The js file is below:

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

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.

[scottmartin]

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.

[leon_tang]

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

[leon_tang]

Hi Scott:

Any update about this issue?
Thank you

Tom

[scottmartin]

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

Scott.

[leon_tang]

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

[pierresas]

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.

[pierresas]

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.

[leon_tang]

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.

[pierresas]

@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.