Pass Ajax data in highcharts Combination chart

Question

I'm trying to pass the data(line data and pie_data) in a combination chart. I'm able to pass the pie_data but unable to pass the line data. Here is my jsFiddle Link

Please suggest where I'm going wrong?

Here is my code.

$(function () {
    var line_data = [{ // this is AJAX returned line_data.
    'data': [
        [1383741000000, 1608.3000000000002],
        [1383741900000, 1611.9999999999973],
        [1383742800000, 1612.299999999997]
    ],
        'name': 'Bangalore'
}, {
    'data': [
        [1383741000000, 54.2],
        [1383741900000, 54.300000000000004],
        [1383742800000, 54.300000000000004]
    ],
        'name': 'New Delhi'
}];
// this is AJAX returned pie_data. 
// I'm able to get the pie chart, but not the line chart.
var pie_data = [['Jane',13], ['Jnanae',33] , ['Jasvdwdne',113]];

        $('#container').highcharts({
            chart: {
            },
            title: {
                text: 'Combination chart'
            },
            xAxis: {
                type: 'datetime'
            },

            series: [{
                type: 'spline',
                name: 'Average',
                data: line_data,
                marker: {
                    lineWidth: 2,
                    lineColor: Highcharts.getOptions().colors[3],
                    fillColor: 'white'
                }
            }, {
                type: 'pie',
                name: 'Total consumption',
                data: pie_data,

                center: [100, 80],
                size: 100,
                showInLegend: false,
                dataLabels: {
                    enabled: false
                }
            }]
        });
    });

Answer 1

Try this out:- http://jsfiddle.net/5yzb2/6/

JS:-

$(function () {
    var seriesOptions = [];

    var line_data = [{ // this is AJAX returned line_data.
        data: [
            [1383741000000, 1608.3000000000002],
            [1383741900000, 1611.9999999999973],
            [1383742800000, 1612.299999999997]
        ],
        name: 'Bangalore'
    }, {
        data: [
            [1383741000000, 54.2],
            [1383741900000, 54.300000000000004],
            [1383742800000, 54.300000000000004]
        ],
        name: 'New Delhi'
    }];


    // this is AJAX returned pie_data. 
    // I'm able to get the pie chart, but not the line chart.
    var pie_data = [
        ['Jane', 13],
        ['Jnanae', 33],
        ['Jasvdwdne', 113]
    ];

    //Adding all data seriesOptions
    $.each(line_data, function (i, name) {
        seriesOptions[i] = {
            type: 'spline',
            name: this.name,
            data: this.data
        };
    });

    seriesOptions[seriesOptions.length] = {
        type: 'pie',
        name: 'Total consumption',
        data: pie_data,

        center: [100, 80],
        size: 100,
        showInLegend: false,
        dataLabels: {
            enabled: false
        }
    };

    $('#container').highcharts({
        chart: {},
        title: {
            text: 'Combination chart'
        },
        xAxis: {
            type: 'datetime'
        },
        tooltip: {
            formatter: function () {
                var s;
                if (this.point.name) { // the pie chart
                    s = '' + this.point.name + ': ' + this.y + ' fruits';
                } else {
                    s = '' + this.x + ': ' + this.y;
                }
                return s;
            }
        },
        labels: {
            items: [{
                html: 'Total fruit consumption',
                style: {
                    left: '40px',
                    top: '8px',
                    color: 'black'
                }
            }]
        },
        series: seriesOptions
    });
});