Hi everyone,
I’m trying to build a Stacked Bar chart in UI Builder using now-vis-bar-wrapper in data resource . My data comes from a Script Include that returns a hierarchical structure with these keys for each node:
{
"value": "{SYS_ID}", // sys_id of the user
"label": "User Name A", //-> manager Display name for the chart axis
"directCost": 16, // This person's own license cost
"totalCost": 49.83, // directCost + all descendants' costs
"licenseBreakdown": { // Self allocations only
"Miro": 16
},
"rolledUpLicenseBreakdown": { // Allocations from reportees only
"Autodesk": 33.83
},
"rolledUpLicenseUserCount": { // Count of reportees using each license
"Arnold-Autodesk": 1
},
"children": [
{
"value": "{SYS_ID}",
"label": "User Name B",
"directCost": 0,
"totalCost": 0,
"licenseBreakdown": {}, // No self allocations
"rolledUpLicenseBreakdown": {}, // No reportees
"rolledUpLicenseUserCount": {}, // No reportees
"children": []
},
{
"value": "{SYS_ID}",
"label": "Sharique Azim",
"directCost": 33.83,
"totalCost": 33.83,
"licenseBreakdown": {
"Autodesk": 33.83
},
"rolledUpLicenseBreakdown": {},
"rolledUpLicenseUserCount": {},
"children": []
}
]
}
My data binding script
console.log("chart0");
// 1️⃣ Get the Script Include output
const rawOutput = api.data.licensecostdata_1.output || {};
const jsonPayload = rawOutput.children : {};
console.log('[STACKED-BAR] Starting transform, nodes:', jsonPayload.length);
// 2️⃣ Collect all license types from rolledUpLicenseBreakdown
const licenseTypesMap = {};
jsonPayload.forEach(node => {
Object.keys(node.rolledUpLicenseBreakdown || {}).forEach(type => {
licenseTypesMap[type] = true;
});
});
const licenseList = Object.keys(licenseTypesMap);
console.log('[STACKED-BAR] License types:', licenseList);
// 3️⃣ Build chartData rows and elements array
const chartData = [];
const elements = [];
jsonPayload.forEach(node => {
// Row for this user
const row = { label: node.label };
licenseList.forEach(type => {
const cost = (node.rolledUpLicenseBreakdown && node.rolledUpLicenseBreakdown[type]) || 0;
row[type] = String(cost);
});
chartData.push(row);
// Element for this user
elements.push({
id: node.value,
label: node.label,
eventData: { query: String(node.value) }
});
});
// 4️⃣ Build series array for metadata
const seriesArray = licenseList.map(type => ({
id: type,
type: 'value',
label: type
}));
// 5️⃣ Build metadata object
const metadata = {
dataSourceLabel: 'Reportee Cost by License Type',
eventData: { table: 'u_sw_license_user_alloc_archive' },
groupBy: [{
id: 'label',
fieldType: 'string',
label: 'User',
elements: elements,
series: seriesArray
}],
format: { unitFormat: '$ {0}' },
aggregateBy: 0
};
return [{
data: chartData,
metadata: metadata
}];
What I want:
X‑axis: each person in the hierarchy (name shown, unique internally to avoid duplicate label errors).
Stacks: one segment per license type,can have multiple licenses, using values from rolledUpLicenseBreakdown.
If a node has no applicable breakdown, the bar should be not present(obviously).
Managers should not have their own allocations included in rolledUpLicenseBreakdown — only their reportees’ totals. Therefore no bar them.
What I’ve tried:
Built licenseList from all keys in rolledUpLicenseBreakdown across the payload.
Created chartData rows with label and value array
Built elements array with matching labels and unique IDs.
Built metadata.groupBy[0].series from licenseList.
- All this are done via script of data section of data visualization component.
Set the component’s Stacked property to true.
The issue:
The chart renders only the background, but it’s not showing the bar or stacking as expected.
I’ve confirmed elements.length matches chartData.length (say 49 entries), and labels are unique.
All rows have all series columns, even if zero.
Question: Has anyone successfully built a stacked bar in from hierarchical data like this? Is there anything special about how script must be formatted for stacking to work? Any working example or script to generate a stacked bar would be greatly appreciated.
Also find reference images.
Thanks in advance!
Shariq
Hello @IronPotato Thank you for your response. I am aware of the sample json available on the bar chart component. But this json would not populate stacked bar chart, which is my requirement. For reference i am already able to generate a chart like this via script and json format similar to this.
