HighCharts - dynamic graph & no tick mark on the right hand side dual axis

Question

I'm new to high charts.

I'm dynamically making 2 ajax calls(inside getData() Function) and plotting the high chart with 2 series(with 2 y axis).

each ajax call with return the json data.

1st json data (sample) [{"dt":"May 15, 2000","index":"2,007.030850"},{"dt":"May 16, 2000","index":"2,025.956108"}]

2nd json data (sample) [{"dt":"May 15, 2000","nav":"145.236000"},{"dt":"May 16, 2000","nav":"146.602974"}]

I'm creating two series with 2 ajax calls. in the 2nd ajax call, i'm dynamically adding a y-axis for the 2nd series data.

$(document).ready(function() {
        function getData() {

            var chart = Highcharts.charts[0];
/* 1st Ajax Call to get the json data to plot the first series */
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: '/Six/TSServlet?file=ivv-sixIshareFundsHistoryIndex.json',
                data: '',
                async: false,
                success: function(data) {
                    var categories1 = [];
                    var seriesData1 = [];
                    var yaxis;
                    $.each(data, function(i, e) {
                        categories1.push(e.dt);
                        /* below step to remove , is not important, done for my program */
                        yaxis = parseFloat(e.index.replace(/,/g, '')); 
                        seriesData1.push(yaxis);
                    })
// add x-axis catagories
                    chart.xAxis[0].update({
                        categories: categories1,
                        tickInterval: 150
                    }, true);

    // add the 1st series
                    chart.series[0].setData(seriesData1);
                }
            });
               /* 2nd Ajax Call to get the json data to plot the second series */
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: '/Six/TSServlet?file=ivv-sixIshareFundsHistoryNav.json',
                data: '',
                async: false,
                success: function(data) {
                    var categories2 = [];
                    var seriesData2 = [];
                    var yaxis;
                    $.each(data, function(i, e) {
                        categories2.push(e.dt);
                        /* below step to remove , is not important, done for my program */

                        yaxis = parseFloat(e.nav.replace(/,/g, ''));
                        seriesData2.push(yaxis);
                    })

/* This is the problem area, dynamically adding a dual y axis for the 2nd series */

                     chart.addAxis({ // Secondary yAxis
                        id: 'NAV-Series-Axis',
                        title: {
                            text: 'NAV Series'
                        },
                        lineWidth: 2,
                        lineColor: '#08F',
                        opposite: true
                    });

// add the 2nd series chart.addSeries({name: "NAV Series",yAxis: 'NAV-Series-Axis',data: seriesData2});

                }
            });
        }  //getdata function ends here .............

        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });

        var chart;

        $('#container').highcharts({
            chart: {
                type: 'spline',
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 10,
                renderTo: 'container',
                events: {
                    load: function() {
                        var series = this.series[0];
                        getData();
                    }
                }
            },
            title: {
                text: 'Six Share Funds History'
            },
            labels: {
                formatter: function() {
                    return this.value + ' %';
                }
            },
            xAxis: {
                tickLength: 10
            },
            tooltip: {
                formatter: function() {
                    return '<b>' + this.series.name + '</b><br/>' + this.x + '<br/>' + Highcharts.numberFormat(this.y, 2);
                }
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{
                "Name": []
            }]
        });
    });
});

My issue is i'm getting 2 axis for 2 series graph, but no tick marks on the right hand side y-axis. how to solve this issue? ideally i should see 100(one tick mark), 200 (one tick mark) etc on the right hand side blue bar(just like left hand side y-axis has 500,1000 etc)

Please see the screen shot, i dont see the tick marks on the right hand side blue bar (for the 2nd series graph)

Edited to add jsp:

<div id='TimeSeriesId'>
        <div id="container" style="width: 100%; height: 600px;"></div>
    </div>

Answer 1

You can add several Y-axes simply by making yAxis an array with more than 1 element. Each can have all of the usual axis attributes (see highcharts API).

    yAxis: [{ // Primary yAxis
        labels: { ...
        },
        title: { ...
        },
        opposite: true
    }, { // Secondary yAxis
        title: { ...
        },
        labels: { ...
        }
    }, { // Tertiary yAxis
        title: { ...
        },
        labels: { ...
        },
        opposite: true
    }],
    ...

To dynamically add them, use chart.yAxis = new Array(); chart.yAxis[1].title = ... etc.