Highchart limiting number of series by default

Question

I wonder is there any way to limit number of series by default ? basically I loading data through Ajax, data might contain 50 to 80 series sometimes, I know highchart supports more than 50 series even, but it takes long time to load chart, so I have planned to show 2 series by default and remaining series I would like to give dropdown list so that user can select and can add series onclick, so far I is to have 2 data array one contains 2 series which I wanted to show by default and other array is to contain n number of series, here I am interested to send one only array through ajax and limit number of series in chart option, I don't know highchart has this option or not

Here is my example fiddle

   <script src="http://code.highcharts.com/highcharts.js"></script>
   <div id="container" style="height: 400px"></div>

  $(function () {
   $('#container').highcharts({
    chart: {
        type: 'spline'
    },

    legend: {
        symbolWidth: 80
    },



    series: [{
        data: [1, 3, 2, 4, 5, 4, 6, 2, 3, 5, 6],

    }, {
        data: [2, 4, 1, 3, 4, 2, 9, 1, 2, 3, 4, 5],

    },{
        data: [8, 4, 1, 6, 4, 2, 9, 1, 2, 3, 4, 5],

    },{
        data: [0, 6, 1, 3, 9, 2,2, 1, 2, 3, 4, 5],

    },{
        data: [5, 4, 8, 3, 4, 6, 9, 4, 2, 8, 3, 5],

    },{
        data: [9, 4, 1, 2, 4, 2, 6, 1, 2, 3, 7, 3],

    }
            ]
});
});

Thank you

You should look this post : http://stackoverflow.com/questions/14166561/adding-new-highchart-series. You can use "addSeries" to add your series by user action. — Vincent Decaux, Jun 28 '14 at 19:36
I know how to add new series to existing chart I am interested in limiting series onload, suppose if specify `series : myarray` it loads all series in an array — user3637224, Jun 28 '14 at 19:37
Just don't load all your series on load, and use addSeries when user click on a button or something. What is the problem so ? — Vincent Decaux, Jun 28 '14 at 19:38
Split your array, and again use addSeries. Moreover, you can use `visible: false` property in your series to display or not the serie. But if you know how to add a serie or remove it, there is no problem. — Vincent Decaux, Jun 28 '14 at 19:41

Vincent Decaux · Accepted Answer · 2014-06-28T20:02:54.240

Using addSeries, you can control the series onLoad :

$(function () {
    var series = [
            [1, 3, 2, 4, 5, 4, 6, 2, 3, 5, 6],        
            [2, 4, 1, 3, 4, 2, 9, 1, 2, 3, 4, 5],
            [0, 6, 1, 3, 9, 2,2, 1, 2, 3, 4, 5]
        ];
    var series_loaded = [0];

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'spline'
        },        
        legend: {
            symbolWidth: 80
        },    
        series: [{
            data: series[0]           
        }]
    });

    $('#serie-change').find('a').click(function() {
        var index = $(this).parent().index();

        if ($.inArray(index, series_loaded) != -1) {
            return false;   
        }

        series_loaded.push(index);

        chart.addSeries({                        
            name: $(this).text(),
            data: series[index]
        });
    });
});

See the Fiddle : http://jsfiddle.net/e6aJW/2/

Highchart limiting number of series by default

1 Answers1