Gradient color in bar chart based on start/end text of value title

Searched and found Gradient color in bar/column/line/area chart - Sisense Community

Help always so appreciated!

Use case is having 5 levels of engagement where a customer could enter at any level and then be currently still at that level or at a deeper level. Each level has a color assigned. The values in the bar widget count the customers who entered at a given level and are currently at a given other level. The values are named {entryLevel} - {currentLevel}

For the value named "Level A - Level B" the bar would start at the color assigned for Level A and end at the color for Level B.

For a value named "Level B - Level E" the bar would start at the color for Level B and end at the color assigned for Level E.

Thanks in advance!

Chris Wallingford

Posted 1 year ago·Last reply 1 year ago

16 comments

DRay

·1 year ago

Hi wallingfordce,

Do you still need help with this?

Chris Wallingford

OP1 year ago

Hi DRay - there wasn't a response after this comment, so I don't yet have a solution.

Chris Wallingford

OP1 year ago

I don't have a solution, but this was also a nice-to-have. I can use the UI to select the target/ending color for each bar and leave the starting color out of it, and then document that.

DRay

·1 year ago

Should we ping harikm007 to see if he can respond to your last post about the seriesName?

Chris Wallingford

OP1 year ago

:) I don't want to pester someone who is and has been so giving of their time. The community notification of my response was sent, and my personal community platform etiquette assumes they either don't have time to respond or don't have a solution.

DRay

·1 year ago

I hear that. Fortunately, I have spoken with him personally a couple of times, so I feel comfortable pinging him. 😄

DRay

·1 year ago

Hi wallingfordce,

Do you still need help with this?

harikm007

·1 year ago

Hi wallingfordce ,

Please try the below script and let me know if you are looking for something like this:

widget.on('processresult', function(se,ev){
	
	var colorMapping = {
		'Level A': 'red',
		'Level B': 'green',
		'Level C': 'blue',
		'Level D': 'yellow'
	}
	
	$.each(ev.result.series, function(seriesIndex, seriesValue){
		
		$.each(seriesValue.data, function(index, value){
			
			const categoryName = value.selectionData[0];
			first_part = categoryName.includes('-') ? categoryName.split('-')[0].trim() : categoryName;
			second_part = categoryName.includes('-') ? categoryName.split('-')[1].trim() : categoryName;
			
			value.color = {
				linearGradient: {
					x1: 0,
					y1: 0,
					x2: 0,
					y2: 1
				},
				stops: [
					[0, (first_part in colorMapping ? colorMapping[first_part] : 'gray')],
					[1, (second_part in colorMapping ? colorMapping[second_part] : 'gray')]
				]
			}
			
			
		})	
	})
})

- Hari

Chris Wallingford

OP1 year ago

Love that and looks like the right idea. Does it matter that I don't have a field on Categories or Break By, because I'm not seeing this have any effect, and throwing a console.log(categoryName) in there doesn't output anything.

harikm007

·1 year ago

The script needs to be adjusted slightly if the Categories or Breakby fields are not present. Here's the updated version.

widget.on('processresult', function(se,ev){
	
	var colorMapping = {
		'Level A': 'red',
		'Level B': 'green',
		'Level C': 'blue',
		'Level D': 'yellow'
	}
	
	$.each(ev.result.series, function(seriesIndex, seriesValue){
				
		const seriesName = seriesValue.name;
		first_part = seriesName.includes('-') ? seriesName.split('-')[0].trim() : seriesName;
		second_part = seriesName.includes('-') ? seriesName.split('-')[1].trim() : seriesName;
		
		$.each(seriesValue.data, function(index, value){
			
			value.color = {
				linearGradient: {
					x1: 0,
					y1: 0,
					x2: 0,
					y2: 1
				},
				stops: [
					[0, (first_part in colorMapping ? colorMapping[first_part] : 'gray')],
					[1, (second_part in colorMapping ? colorMapping[second_part] : 'gray')]
				]
			}
			
			
		})	
	})
})

-Hari

Chris Wallingford

OP1 year ago

Closer, and really appreciate it. Seems like it's stuck only returning the first seriesName for all series

logging seriesName to console right after it's set each time shows all the different series names, but logging it inside the seriesValue.data loop logs the first series name every time.

DRay

·1 year ago

Hi harikm007,

Thank you for your help so far. You have been great, as always! Are you able to help with this last bit?

harikm007

·1 year ago

To reproduce the same, can you share a screenshot of the left-side panel of the widget where you added categories and values?
The above script can be applied when there is only Values panel.

Chris Wallingford

OP1 year ago · Edited

harikm007

DRay

·1 year ago

harikm007, Are you able to continue assisting here? If you like I can find an internal resource to step in. We appreciate the help so far!

DRay

·1 year ago

harikm007 Are you able to continue assisting wallingfordce? If you like I can find an internal resource to step in. I appreciate the help so far!