Break by sorting in stacked column chart

Please can you guide how we can sort by break by like here 1st chart 'in' should be shown as bottom in stacked then in with risk,out with upside and then out currently it is showing reversely.Also in 2nd chart how do we sort by stages to show qualification,then solution development,proposal and then contract negotiation.I searched community and tried below script which works for column and categories

1. Stage sorting working with column and stage in categories script - var categories= ['Qualification', 'Solution Development', 'Proposal', 'Contract Negotiation'];

widget.on('processresult', function (_, ev) {
console.log(ev)
if (ev.rawResult.headers[0] === 'Opp stage') {
ev.result.series.forEach(function (breakBy) {
breakBy.data.sort(
(a, b) => (categories.indexOf(a.selectionData[0]) -
categories.indexOf(b.selectionData[0])));
});
ev.result.xAxis.categories = categories;
}
});

2. Below script works for categories and when modified by break by it shows no values

widget.on('processresult', function(widget, result) {
// Ensure necessary data exists
if (!result.result || !result.result.series || !result.result.xAxis || !result.result.xAxis.categories) {
console.error("Missing necessary data in the result.");
return;
}

// Define the desired stage order
const stageOrder = ['Qualification','Solution Development','Proposal','Contract Negotiation','Closed Won'];

// Initialize a placeholder for the reordered data
result.result.xAxis.categories = stageOrder;

// Reorder data within each series based on the stage order
result.result.series.forEach(function(series) {
// Check each data point's structure
series.data.forEach(dataPoint => {
console.log('DataPoint:', dataPoint);
});

const reorderedData = stageOrder.map(stage => {
// Log the current stage and search attempt
console.log('Checking stage:', stage);

// Find the matching data point for the current stage
const matchingDataPoint = series.data.find(dataPoint => {
console.log('DataPoint selectionData:', dataPoint.selectionData); // Debugging line
return dataPoint.selectionData && dataPoint.selectionData[0] === stage;
});

// Ensure the stage is mapped correctly, use `y: 0` if no data exists
return matchingDataPoint || { y: 0, selectionData: [stage] };
});

// Log the reordered data
console.log("Reordered Data:", reorderedData);

// Replace the series data with the correctly ordered data
series.data = reorderedData;
});

// Validate values to ensure correct totals per stage
result.result.series.forEach(series => {
let total = 0;
series.data.forEach(dataPoint => {
total += dataPoint.y; // Accumulate values
});
console.log(`Total for series ${series.name}:`, total);
});

// Debug output for verification
console.log("Final Processed Result:", JSON.stringify(result.result, null, 2));
});

jinendrarathod

Posted 1 year ago·Last reply 1 year ago

2 comments

DRay

·1 year ago

Hello jinendrarathod,

I’m following up to see if the solution offered by harikm007 worked for you.

If so, please click the 'Accept as Solution' button on the appropriate post. That way other users with the same questions can find the answer. If not, please let us know so that we can continue to help.

Thank you.

Hari KM

·1 year ago

Hi jinendrarathod ,

Check out the post below for guidance on how to manually sort categories and break-by in a column chart:
https://www.binextlevel.com/post/sort-bar-columns-breakby-manually

Let me know how it works for you!

Thanks,

Hari