I need help creating a stacked bar chart similar to the one shown in this example: http://jsfiddle.net/fct1p8j8/4/
While the hard-coded data works perfectly fine, I'm struggling to extract and format the data from my database structure.
My data is organized as follows:
[
{
"invDept": "Due Diligence",
"programs": {
"data": [
{
"program": "Brand Risk Management",
"total": "1847"
},
{
"program": "Due Diligence",
"total": "2718"
},
{
"program": "SAR",
"total": "17858"
}
]
}
},
{
"invDept": "Sanctions",
"programs": {
"data": [
{
"program": "Brand Risk Management",
"total": "500"
},
{
"program": "Due Diligence",
"total": "2100"
},
{
"program": "SAR",
"total": "16593"
}
]
}
}
]
The x-axis values will be based on the invDepartment, while the series data needs to be formatted correctly for the chart.
I am attempting to organize the data into an array format where each program's value corresponds to both the Due Diligence and Sanctions departments.
Currently, I have started by initializing a loop to create the necessary structure:
// Obtain department values for X Axis
$.each(data.data, function (key, value) {
d = value;
xAxis.push(value.invDept);
// Create array if it does not exist
if (typeof res[d.invDept] == "undefined" || !(res[d.invDept] instanceof Array)) {
res[d.invDept] = [];
}
});
At this point, I have:
res['Due Diligence'] = []
However, I am unsure of how to proceed further in structuring the loops to extract this data effectively.
The desired output should resemble:
series: [{
name: 'Brand Risk Management',
data: [1847, 500]
}, {
name: 'Due Diligence',
data: [2718, 2100]
}, {
name: 'SAR',
data: [17858, 16593]
}]