Chart.Funnel.js
Chart.Funnel.js copied to clipboard
Option to disable sort?
Hi, when showing a funnel with a predetermined order, like that of a defined sequence of stages, is there a way to disable the sort all together? As far as I can tell, the sort option checking is not strict. If it's not === asc, then it's sorted descending regardless of what's passed including false.
In my case, my stages are predetermined and the funnel needs to show the number of tickets at each stage. Showing "New" tickets label anywhere but the top of the funnel is confusing. Likewise, Closed tickets must be the bottom of the funnel as the end stage. (New -> Requesting Info -> Resolved -> Closed)
Hello guys, anyway we can disable sorting?
As a temporary solution, I've implemented the following (I've tried to edit as little as possible, so it's by no means the best solution, but it seems to work).
Line 204 to 213 on Chart.Funnel.js i've changed to:
var dwRatio = bottomWidth / dMax;
var sortedDataAndLabels;
if(sort === 'keep'){
sortedDataAndLabels = valAndLabels
} else {
sortedDataAndLabels = valAndLabels.sort(
sort === 'asc' ?
function (a, b) {
return a.val - b.val;
} :
function (a, b) {
return b.val - a.val;
}
);
}
Then when initialising the chart, I add sort: 'keep'
as an option
To expand on the work of @AaronF:
I would also change line 289 from:
bottomWidth = nextElement ? nextElement.val * dwRatio : me.topWidth;
to:
bottomWidth = elementData.val * dwRatio;
That way it looks more like a pyramid with stacked bars:
I then customized the fork from YetiForce (V1.1.2) since it's the one I've been using.
Commented lines 188 to 190 on Chart.Funnel.js (I only need the keep option so faster this way):
dataPositions.sort(function (a, b) {
return chart.options.sort === 'asc' ? a.value - b.value : b.value - a.value;
});
Added right after line 320:
else if (sort === 'keep' || sort === 'data-keep') {
upperWidth = elementData.val * dwRatio;
bottomWidth = elementData.val * dwRatio;
}
You can see it here: https://codepen.io/egouy/pen/yLeNwpN