HighChart with multple JSON api data

Question

I am creating a linechart which contain data from different JSON files, and the codes below is working but i'd like to know how may i group up these JSON data from different apis into one by a for each loop to shorter the codes.

//consider the vol1- vol10 looks like var vol1 = ['1123', '1234','5436'];
//because i have other method the convert it to an arrray
//Xvol1 is just something like Xvol1=["Jan","Feb","Mar"]

        $('#trendChart').highcharts({
        chart: {
            type: 'spline'
        },
        title: {
            text: false
        },
        xAxis: {        
            categories : Xvol1
        },
        yAxis: {
            title: {
                text: 'Volume',
            },
            min: 0
        },

        plotOptions: {
            spline: {
                marker: {
                    enabled: true
                }
            }
        },

        series: [{
            name: $(".profileName0").html(),

            data: vol1
            },
            {
            name: $(".profileName1").html(),

            data: vol2
            },
            {
            name: $(".profileName3").html(),

            data: vol3
            },
            {
            name: $(".profileName2").html(),

            data: vol4
            },

            {
            name: $(".profileName4").html(),

            data: vol5
            },
            {
            name: $(".profileName5").html(),
            data: vol6
            },
            {
            name: $(".profileName6").html(),

            data: vol7
            },
            {
            name: $(".profileName7").html(),
            data: vol8
            },
            {
            name: $(".profileName8").html(),
            data: vol9
            },
            {
            name: $(".profileName9").html(),
            data: vol10
            },

]
    });

UPDATE 1: I have tried but it doesn't seem like working.

var series = [];
                        for(i = 0; i < 10; i++){
                         series.push({name: $('.profileName'+i+'"').html(),, data: vol[i]});
                        }


                        $('#trendChart').highcharts({
                        chart: {
                            type: 'spline'
                        },
                        title: {
                            text: false
                        },
                        xAxis: {        
                            categories : Xvol1
                        },
                        yAxis: {
                            title: {
                                text: 'Volume',
                            },
                            min: 0
                        },

                        plotOptions: {
                            spline: {
                                marker: {
                                    enabled: true
                                }
                            }
                        },

                        series: [series]
                                });
                            });

After i generate the data by a for loop successfully, i am now struggle about how to update the data, i tried to update it using setData() but seem it needs so adjustment in order to work.

                        var seriesData = [vol1, vol2, vol3, vol4, vol5, vol6 , vol7, vol8, vol9, vol10]; // add all the vols. I have used 2 for example


                        var series = [];
                        for(i = 0; i < 5; i++){
                         series.push({name: names[i], data: seriesData[i]});
                        }

                        var trendChart12w = $('#trendChart').highcharts();
                        trendChart12w.series[0].setData(series); 

Solution :

var dataCounting = $(".DataCount").last().html();
                        var seriesData = [vol1, vol2, vol3, vol4, vol5, vol6 , vol7, vol8, vol9, vol10]; // add all the vols. I have used 2 for example

                        var trendChart1y = $('#trendChart').highcharts();
                        trendChart1y.xAxis[0].setCategories(Xvol1);

                        for(i = 0; i < dataCounting; i++){
                        trendChart1y.series[i].setData(seriesData[i]);
                        }

Answer 1

You can an array of the names like var names = [all the names] and an array of your data like var seriesData = [vol1, vol2...] And then do

var series = [];
for(i = 0; i < names.length; i++){
 series.push({name: names[i], data: seriesData[i]});
}

And then set this as your chart series.

UPDATE Do this outside of your chart.

var seriesData = [vol1, vol2]; // add all the vols. I have used 2 for example
var names = [$(".profileName0").html(), $(".profileName1").html()] // add all names

var series = [];
for(i = 0; i < names.length; i++){
 series.push({name: names[i], data: seriesData[i]});
}

And then in your chart, where you set the series, just do series: series