PDA

View Full Version : Multiple y-axis with line chart



AshNathan
19 Feb 2013, 11:21 AM
Hi,

I'm trying to add multiple y-axis to a line chart and I'm not very successful. I realize that ExtJS3.4 Charts is based on YUI charts and I did see an example here: http://developer.yahoo.com/yui/examples/charts/charts-dualaxes.html

I'm unable to define the yAxes specified in the above example. I do get an error: uncaught exception: "TypeError: Error #1009"

There is no other information on the error, I'm kind of stuck here, don't know how to proceed from here.

This is my code:




var testChartStore = new Ext.data.JsonStore({
fields: ['timestamp', 'frequency', 'grosskw', 'grosskvar'],
data: [
{ timestamp: 'Feb 18 2:00', frequency: '25', grosskw: '100', grosskvar: '125'},
{ timestamp: 'Feb 18 2:10', frequency: '35', grosskw: '200', grosskvar: '225'},
{ timestamp: 'Feb 18 2:20', frequency: '45', grosskw: '300', grosskvar: '325'},
{ timestamp: 'Feb 18 2:30', frequency: '55', grosskw: '400', grosskvar: '425'},
{ timestamp: 'Feb 18 2:40', frequency: '65', grosskw: '500', grosskvar: '525'},
{ timestamp: 'Feb 18 2:50', frequency: '75', grosskw: '600', grosskvar: '625'},

{ timestamp: 'Feb 18 3:00', frequency: '125', grosskw: '1100', grosskvar: '1125'},
{ timestamp: 'Feb 18 3:10', frequency: '135', grosskw: '1200', grosskvar: '1225'},
{ timestamp: 'Feb 18 3:20', frequency: '145', grosskw: '1300', grosskvar: '1325'},
{ timestamp: 'Feb 18 3:30', frequency: '155', grosskw: '1400', grosskvar: '1425'},
{ timestamp: 'Feb 18 3:40', frequency: '165', grosskw: '1500', grosskvar: '1525'},
{ timestamp: 'Feb 18 3:50', frequency: '175', grosskw: '1600', grosskvar: '1625'}
]
});

var seriesDef = [
{displayName: 'Frequency', yField: 'frequency', axis: 'secondary', style: {color:0x6238A7, size:8}},
{displayName: 'Gross kw', yField: 'grosskw', axis: 'primary', style: {color:0x00E72E, size:8}},
{displayName: 'Gross kvar', yField: 'grosskvar', axis: 'primary', style: {color:0xFFA329, size:8}}
];
var poweraxes = new Ext.chart.NumericAxis({
position: 'left',
title: 'Power',
alwaysShowZero: false
});

var poweraxes2 = new Ext.chart.NumericAxis({
position: 'right',
title: 'Frequency',
alwaysShowZero: false
});

var axes = new Array();
axes.push(poweraxes);
axes.push(poweraxes2);

{
xtype: 'linechart',
store: testChartStore,
series: seriesDef,
xField: 'timestamp',
yAxes: axes,
url: 'js/charts/charts.swf'

}



The above chart is inside a panel which is embedded inside a tab panel. Any help would be appreciated.

Thanks

AshNathan
20 Feb 2013, 7:57 AM
Any thoughts anyone???

sword-it
20 Feb 2013, 8:46 AM
HI!

check the below links, it will be helpful to you:-

http://www.sencha.com/forum/showthread.php?241951-Multiple-y-axis-for-line-chart-example
http://www.thewebgoodies.com/2012/05/28/sencha-multiple-axes-column-charts/

AshNathan
20 Feb 2013, 10:25 AM
Thanks for the response.
I got it figured, when specifying both the axis I should have specified the order for one of the axis is secondary and I missed that line.