Loading Javascript Highcharts series data issues

Question

Server is sending back data like this:

{"barData":
    [
        {"Accepted":[0,0,0]},
        {"Rejected":[0,0,0]},
        {"In_Process":[0,1,0]}]
}

In the browser, it shows up as such:

My perhaps (and very likely) incorrect belief was that this was the correct structure to populate a Highcharts stacked bar chart as seen here:

Example Stacked Bar in jsFiddle

The example in the documentation shows a fixed data set that appears like this:

series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]

This is what I was attempting to emulate. So, at the end of all that, I get a zero plot. My Javascript looks like this:

$.ajax({
url : 'http://localhost:8080/afta/report/transfersbynetwork',
success : function(point) {
    data = [];
    $.each(point.barData, function(itemNo, item) {
        data.push([ item[0], parseInt(item[1][0]), parseInt(item[1][1]), parseInt(item[1][2])]);
    });
    barchart = new Highcharts.Chart(baroptions);
    baroptions.series[0].data = data;
},
cache : false
});

So where did I bone this up? I'm getting no plot and am quite convinced the problem is either in my presentation of the data from the server (possible) or in the javascript that's parsing the data structure and loading the series (highly likely).

Any insight would be appreciated.

Answer 1

Based on your structure, you need to change your function to process the data:

$(function () {
    var point = {
        "barData": [{
            "Accepted": [1, 2, 3]
        }, {
            "Rejected": [3, 4, 5]
        }, {
            "In_Process": [0, 1, 0]
        }]
    },
    data = [];

    $.each(point.barData, function (itemNo, item) {
        for (var prop in item) {
            data.push({
                name: prop,
                data: [parseInt(item[prop][0]), parseInt(item[prop][1]), parseInt(item[prop][2])]
            });
        }
    });
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Stacked bar chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            }
        },
        legend: {
            backgroundColor: '#FFFFFF',
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: data
    });
});

http://jsfiddle.net/9jVJb/