include two series from database in a highchart chart

Question

I would like to include a series to my existing chart.

daytime = new Highcharts.Chart({
                    chart: {
                        renderTo: 'daytime_div',
                        defaultSeriesType: 'areaspline',
                        events: {
                            load: getData()
                        }
                    },
                    plotOptions: {
                        series: {
                            fillOpacity: 0.1,
                            lineWidth: 4,
                            marker: {
                                radius: 5,
                                lineWidth: 1,
                                lineColor: "#FFFFFF"
                            }
                        }
                    },
                    tooltip: {
                        formatter: function () {
                            var s = [];

                            $.each(this.points, function (i, point) {
                                s.push('<span style="font-size:10px;">' + point.key + '</span><br/><strong>' + point.series.name + '</strong> : ' + point.y + '</span>');
                            });

                            return s.join('<br/>');
                        },
                        shared: true,
                        useHTML: true
                    },
                    credits: false,
                    title: false,
                    exporting: false,
                    legend: {
                        itemDistance: 50,
                        itemStyle: {
                            color: '#333'
                        }
                    },
                    xAxis: {
                        labels: {
                            staggerLines: 2
                        }
                    },
                    yAxis: {
                        gridLineColor: "#e7e7e7",
                        title: {
                            text: ''
                        },
                        labels: {
                            x: 15,
                            y: 15,
                            style: {
                                color: "#999999",
                                fontSize: "10px"
                            }
                        },
                    },
                    series: [{
                        name: 'Daily',
                        color: "#b18eda",
                        data: ddata
                    }]
                });

function getData() {
                $.ajax({
                    url: '...',
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    data: data,
                    success: function (f) {
                        var categories = [];
                        var series_data = [];
                        $.each(f.d, function (i, e) {
                            categories.push(e.hour);
                            series_data.push(parseInt(e.numa));
                        });
                        daytime.xAxis[0].setCategories(categories);
                        daytime.series[0].setData(series_data);
                    },
                    cache: false
                });
            }

The data I get from my database looks like this:

hour, numa
12 AM   1   
1 AM    0   
2 AM    0   
3 AM    0   
4 AM    0   

This shows one line in the chart which is fine. I would like to add a second line that will come from a different query. The second line data will look like:

hour, numa
12 AM   0   
1 AM    12  
2 AM    3   
3 AM    2   
4 AM    2   

Does anyone knows how could I include this into my second series? I have seen the sample in high charts on how to add more series. Static is pretty simple but getting the data dynamically make it more complicated to figure it out.

I am trying to find a way to add 2 series to my getData() function. Any idea will be appreciate it thanks.

Answer 1

It is explained clearly in the fiddle of the document which you shared on how to add multiple series.

series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]

You can pass multiple series in array and the chart can be generated.

EDIT-1

If data from different series use this fiddle.

var myComments=["First input","second comment","another comment","last comment"]
var dataValues = [29.9, 71.5, 194.1, 129.2];
var dataValues2 = [194.1, 95.6, 194.1, 29.9];
var categories = ['Jan', 'Feb', 'Mar', 'Apr'];
var n=['tooltip1','tooltip2','tooltip3','tooltip4'];
$(function () {
    $('#container').highcharts({
        chart: {},

        tooltip: {
            formatter: function () {
                var serieI = this.series.index;
                var index = categories.indexOf(this.x);
                var comment = myComments[index];
                return '-->'+comment;
            }
        },

        xAxis: {
            categories: categories
        },

        series: [{
            data: dataValues
        }, {
            data: dataValues2
        }]
    });
});

which results in the below graph

Answer 2

Well you can use $.when() and load there all your ajax and in $.then() initialise chart. Second solution is prepare your query to database and return all data in single json.