CODEWITHSUNDEEP
extjschartssencha-touchextjs4
mravey
mravey

Reputation: 4500

ExtJS Column Chart with 2 Y axes

I'm trying to plot a column chart with 2 series and thus 2 Y axis, one in the left side and the other in the right side. But the columns display in the same place, on top of each others and not side by side. Do you have any idea how to fix this ?

Something like that :

Ext.onReady(function () {
    var chart;


    chart = new Ext.chart.Chart({
        width: 800,
        height: 600,
        animate: true,
        store: store1,
        renderTo: Ext.getBody(),
        shadow: true,
        axes: [{
            type: 'Numeric',
            position: 'left',
            fields: ['data1'],
            label: {
                renderer: Ext.util.Format.numberRenderer('0,0')
            },
            title: 'Number of Hits',
            grid: true,
            minimum: 0
        }, {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: 'Month of the Year'
        }, {
            type: 'Numeric',
            position: 'right',
            fields: ['data2'],
            title: 'Test'
        }],
        series: [{
            type: 'column',
            axis: 'left',
            highlight: true,
            xField: 'name',
            yField: 'data1'
        }, {
            type: 'column',
            axis: 'right',
            xField: 'name',
            yField: 'data2'
        }]
    });
});

Thanks

Upvotes: 0

Views: 8072

Answers (3)

ddsh79
ddsh79

Reputation: 119

Create a zero value entry into the store and append it to the first and second series items. The number of additions depends on the length of series yField items of the other axes.

For example, creating two series items having yField respectively as below:

yField: ['data1', 'data2','data4']

and

yField: ['data4','data4','data3']

where data4 is a zero value entry in the store.

The solution worked perfectly. :)

Upvotes: 2

Triqui
Triqui

Reputation: 731

This will add two columns for the left axis and a third one for the right axis:

series: [{
    type: 'column',
    axis: 'left',
    highlight: true,
    label: {
        field: ['data1']
    },
    xField: ‘name’,
    yField: ['data1', 'data2','whateverUndefinedFieldNameYouComeUpWith'] // Use an undefined field
},{
    type: 'column',
    axis: 'right',
    highlight: true,
    label: {
        field: 'data3′
    },
    xField: 'name',
    yField: ['name','name','data3'] // or just use the same field you use for the x axis
}]

I hope you get the idea.

Upvotes: 1

Abdel Raoof Olakara
Abdel Raoof Olakara

Reputation: 19353

AFAIK, you cannot have them side-by-side. The reason is they are not in the same series. When you have two data in same series, they get displayed side-by-side. In your case, you have two series.. one configured to use the left axis and other the right. I suggest you use a different type of chart for one of your series.

series: [{
    type: 'line', // Instead of column chart I am using line chart...
    axis: 'left',
    highlight: true,
    xField: 'name',
    yField: 'data1'
}, {
    type: 'column',
    axis: 'right',
    xField: 'name',
    yField: 'data2'
}]

Upvotes: 0

Related Questions