CODEWITHSUNDEEP
javascripthighcharts
user1471980
user1471980

Reputation: 10626

how do you create muliple charts with the same options but with different data

I like to draw multiple charts on one page with using the same options but with different json data for each chart. I like to do this with as little code as possible, I really need to omit code duplication.

Here is the example of the first chart:

$(function() {

    $.getJSON('login.php', function(data) {  
        var options= {
            chart : {
                renderTo : 'container'
            },
            rangeSelector : {
                enabled:false
            },
            series : data
        };

        var chart = new Highcharts.StockChart(options);
    });
});

How could I use this above code to create multiple charts using different getJSON data?

Upvotes: 1

Views: 264

Answers (2)

MartinOnTheNet
MartinOnTheNet

Reputation: 144

You can follow the example as @blam, but with a slight change. Make sure the chart.renderTo value is different for each chart. From the above example I notice only one container value.

Upvotes: 0

Blam
Blam

Reputation: 2965

You could create a helper function:

$(function() {

    var genOptions = function(data) {
        return {
            chart : {
                renderTo : 'container'
            },
            rangeSelector : {
                enabled:false
            },
            series : data
        };
    };

    $.getJSON('login.php', function(data) {  
        var options = genOptions(data);
        var chart = new Highcharts.StockChart(options);
    });

    $.getJSON('secondpage.php', function(data) {  
        var options = genOptions(data);
        var chart = new Highcharts.StockChart(options);
    });
});

Upvotes: 1

Related Questions