Multiple y-axis with line chart

[AshNathan]

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/examp...-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]

Any thoughts anyone???

[sword-it]

HI!

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

http://www.sencha.com/forum/showthre...-chart-example
http://www.thewebgoodies.com/2012/05...column-charts/

[AshNathan]

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.