Question

I am constructing a combination chart from an ajax json object consisting of a ‘spline’ and ‘pie’.

The problem I have is only the pie chart renders, its as though the pie overrides the spline. If i remove the pie chart the spline renders correctly.

Here is my code.

$(document).ready(function () {
var options = {
    chart: {
        renderTo: 'container'
    },
    title: {
        text: 'The Planning Process'
    },
    xAxis: {
        title: {
            text: 'Time'
        },
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: 'Turn Over'
        }
    },
    plotOptions: {
        series: {}
    },
    series: []
};

$.ajax({
    type: "POST",
    dataType: "json",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    url: "_services/ScriptService.asmx/getData",
    success: function (items) {

        var obj = jsonParse(items.d);
        var series = { data: [] };

        $.each(obj, function (itemNo, item) {
            if (itemNo == 0) {
                series.data = item.data;
                series.name = item.name;
                series.type = item.type;
            } else if (itemNo == 1) {
                series.type = item.type;
                series.data = item.data;
           series.name = item.name;
                series.center = item.center;
                series.size = item.size;
                series.showInLegend = item.showInLegend;
            }
        });

        options.series.push(series);

        chart = new Highcharts.Chart(options);
        console.log(options);

    },
    cache: false,
    error: function (XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); }
});  
});

And my json;

[{
    "name": "Projection",
    "type": "spline",
    "data": [
        [
            634420512000000000,
            100000
        ],
        [
            634421376000000000,
            100086
        ],
        [
            634422240000000000,
            100171
        ],
        [
            634423104000000000,
            100257
        ]
    ]
},
{
    "name": "Where you where",
    "type": "pie",
    "center": [
        100,
        80
    ],
    "size": 100,
    "showInLegend": false,
    "data": [
        {
            "name": "Client Based Adviser Charged As Percent",
            "color": "#4572A7",
            "y": 8
        },
        {
            "name": "Provider Commission Based As Percent",
            "color": "#AA4643",
            "y": 92
        }
    ]
}]

Could anyone point me as to where im going wrong?

Answer 1

success: function (items) {

    var obj = jsonParse(items.d);

    $.each(obj, function (itemNo, item) {
        series = new Array();
        if (itemNo == 0) {
            series.data = item.data;
            series.name = item.name;
            series.type = item.type;
        } else if (itemNo == 1) {
            series.type = item.type;
            series.data = item.data;
            series.name = item.name;
            series.center = item.center;
            series.size = item.size;
            series.showInLegend = item.showInLegend;
        }
        options.series.push(series);
    });

    chart = new Highcharts.Chart(options);
    console.log(options);

},

This loop never adds a second series, you are only getting the last one in the loop because it is over writing the one before.

My changes may solve the problem, I am not near a computer at the moment to check.