Take the 2-minute tour ×

Server is sending back data like this:


In the browser, it shows up as such:

enter image description here

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:

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.

share|improve this question

1 Answer 1

up vote 1 down vote accepted

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 = [];

        for (var prop in item) {
                name: prop,
                data: [parseInt(item[prop][0]), parseInt(item[prop][1]), parseInt(item[prop][2])]
        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


share|improve this answer
I see your jsfiddle link, but am still fuzzy on how it's working. How does your container div have a method "highcharts" to invoke? When trying to integrate your suggested function change, I get errors on that line. –  Raevik Aug 6 '13 at 13:46
Uncaught TypeError: Object [object Object] has no method 'highcharts' when invoking '.highcharts' on my div as you did on '#container'. Even the demo invokes this way...so I'm assuming I'm doing something stupid. I'll keep searching. –  Raevik Aug 6 '13 at 13:52
Do you have jquery.js and highcharts.js included? What version of highcharts are you using? The jQUery plugin was added in 3. –  Barbara Laird Aug 6 '13 at 15:27
Just had to make a few tweaks. For whatever reason, I cannot create the chart with the $('#divname').highcharts approach. I did a new Highcharts.Chart(baroptions) and it worked fine. Thanks for the assist! –  Raevik Aug 6 '13 at 15:39

Your Answer


