The server is returning data in the following format:
{"barData":
[
{"Accepted":[0,0,0]},
{"Rejected":[0,0,0]},
{"In_Process":[0,1,0]}]
}
On the browser, it appears as follows:
I initially thought that this was the correct structure for populating a Highcharts stacked bar chart based on this example:
Example Stacked Bar in jsFiddle
The documentation presents a fixed dataset 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 aimed to replicate. After all the efforts, I ended up with a zero plot. My JavaScript code 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
});
Where did I go wrong? I'm not seeing any plot and suspect the issue lies in either how I'm presenting the data from the server (possible) or in the JavaScript parsing of the data structure and series loading (highly likely).
Any help or insight would be greatly appreciated.