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

Question

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?

possible duplicate of [Manage multiple highchart charts in a single webpage](http://stackoverflow.com/questions/8253590/manage-multiple-highchart-charts-in-a-single-webpage) — Ricardo Alvaro Lohmann, Aug 12 '13 at 20:55

Blam · Accepted Answer · 2013-08-12T21:08:21.773

1

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);
    });
});

edited Aug 12 '13 at 21:08

answered Aug 12 '13 at 20:54

Blam

2,888
3
25
39

I am geting error "unexpected token = at line on line 5, any ideas? – user1471980 Aug 12 '13 at 21:03
why a helper function when simply storing `options` as a variable would suffice? – Dave Aug 12 '13 at 22:05
You need to use $.extend() var chart = new Highcharts.StockChart($.extend({},options)); – Sebastian Bochan Aug 13 '13 at 09:47

score 0 · Answer 2 · answered Aug 13 '13 at 09:23

0

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.

answered Aug 13 '13 at 09:23

MartinOnTheNet

144
7

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

2 Answers2