PDA

View Full Version : Column chart with 2 Y axes



TrexXx
14 Feb 2012, 7:08 AM
Hi,

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 ?

Thanks

mitchellsimoens
14 Feb 2012, 8:10 AM
Instead of two series, try specifying yField as an array:


yField: ['data1', 'data2']

TrexXx
14 Feb 2012, 8:15 AM
I just tried but it doesnt work neither. The problem is when I try with 2 series, I actually have 2 series drawn, but they are drawn on top of each others, so one is hiding the other.

mitchellsimoens
14 Feb 2012, 8:18 AM
I just tried that line of code in the column example of the touch charts and it worked as I would expect it. Each month had two columns next to each other.

TrexXx
14 Feb 2012, 8:22 AM
Can you show me the full code you tried please ?

mitchellsimoens
14 Feb 2012, 8:33 AM
If you open the column example, scroll down and replace the yField with that array

TrexXx
14 Feb 2012, 8:45 AM
Yes what you said works, but what I'm trying to do is 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'
}]
});
});


Something with a right axis and a serie linked to this axis.

mitchellsimoens
14 Feb 2012, 8:48 AM
What you want is two columns side by side for one name correct? Using the yField as an array does just that.

TrexXx
14 Feb 2012, 8:50 AM
Yeah but I want one of them linked to the right axis, so I can have two different scales.

shydreamz
24 May 2012, 2:25 AM
Hi, Trexx
did you got the solution of the same as i m looking for the same thing

TrexXx
24 May 2012, 3:49 AM
I made an hack to make it works the way I wanted. Contact me if you want me to help you with it : ravey [dot] matt [at] gmail [dot] com

shydreamz
28 May 2012, 9:18 PM
here is the solution from the problem of multiple -y axis, its more like a hack but works perfectly..

http://www.thewebgoodies.com/2012/05/28/sencha-multiple-axes-column-charts/

(http://www.thewebgoodies.com/2012/05/28/sencha-multiple-axes-column-charts/)

mazhar.shaikh
19 Aug 2015, 8:54 PM
Looks as though you never got answered after that.

Yeah but I want one of them linked to the right axis, so I can have two different scales.

ShBhat
21 Mar 2017, 10:48 AM
Having the same problem with Extjs5.0.1.
Would appreciate some input regarding this @mitchellsimoens (https://www.sencha.com/forum/member.php?22216-mitchellsimoens)