CODEWITHSUNDEEP
javascriptjqueryjsonhighcharts
Fastidious
Fastidious

Reputation: 1329

How do I add secondary axis to highstock charts?

I'm still pretty wet behind the ears when it comes to javascript. I need some help adding a secondary axis that is something like revenue to a highstock chart that also uses $.getJSON (JSONP) to snag a json file to populate the data.

Check out the JSFiddle example here. And here is the sample data set to play with. And finally, an example of secondary axis in Highcharts.

$(function () {
    var seriesOptions = [],
        seriesCounter = 0,
        names = ['MSFT', 'AAPL', 'GOOG'],
        // create the chart when all data is loaded
        createChart = function () {

            $('#container').highcharts('StockChart', {

                rangeSelector: {
                    selected: 4
                },

                yAxis: {
                    labels: {
                        formatter: function () {
                            return (this.value > 0 ? ' + ' : '') + this.value + '%';
                        }
                    },
                    plotLines: [{
                        value: 0,
                        width: 2,
                        color: 'silver'
                    }]
                },

                yAxis: {
                floor: 0
            },

                plotOptions: {
                    series: {
                        compare: 'value'
                    }
                },

                tooltip: {
                    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
                    valueDecimals: 2
                },

                series: seriesOptions
            });
        };

    $.each(names, function (i, name) {

        $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?',    function (data) {

            seriesOptions[i] = {
                name: name,
                data: data
            };

            // As we're loading the data asynchronously, we don't know what order it will arrive. So
            // we keep a counter and create the chart when all the data is loaded.
            seriesCounter += 1;

            if (seriesCounter === names.length) {
                createChart();
            }
        });
    });
});

Any help and explanations (so I can learn) is much appreciated. I'm still trying to learn how to tie jsonp and charting together, especially multiple series of data and json files.

Upvotes: 1

Views: 1220

Answers (1)

Raein Hashemi
Raein Hashemi

Reputation: 3384

Write it like this:

yAxis: [{
    labels: { ... },
    title: { ... },
    ...
},
{
    labels: { ... },
    title: { ... },
    ...
}]

http://jsfiddle.net/5eem7a2a/1/

Upvotes: 1

Related Questions