Chart.Funnel.js icon indicating copy to clipboard operation
Chart.Funnel.js copied to clipboard

Option to disable sort?

Open yfilali opened this issue 8 years ago • 3 comments

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)

yfilali avatar Dec 26 '16 22:12 yfilali

Hello guys, anyway we can disable sorting?

tayronsff avatar Apr 06 '18 15:04 tayronsff

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

AaronF avatar Jan 30 '19 12:01 AaronF

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:

pyramid_chart_example

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

egouy avatar Jun 07 '20 19:06 egouy