topic Re: Using Advanced formatting with a range of values in ArcGIS Dashboards Questions

Using Advanced formatting with a range of values

jkeatonthompson — Mon, 06 Jun 2022 23:43:25 GMT

I am using Advanced formatting in ArcGIS Dashboard, however, the data I am trying to display is not displaying in the correct color. Anything over 4 is yellow. How do I create status colors correctly for a range of values in advanced formatting?

var green = '#2e8540'
var yellow = '#fdb81e'
var red = '#981b1e'

if($datapoint["wave_height"] < 4) {
return {
textColor:'#ffffff',
backgroundColor: green,
topText: 'Wave Height',
topTextColor: '',
topTextOutlineColor: '',
topTextMaxSize: 'medium',
middleText: Text($datapoint["wave_height"], '#.# ft'),
middleTextColor: '',
middleTextOutlineColor: '',
middleTextMaxSize: 'medium',
//bottomText: '',
//bottomTextColor: '',
//bottomTextOutlineColor: '',
//bottomTextMaxSize: 'medium',
iconName:'icon1',
iconAlign:'left',
iconColor:'#ffffff',
iconOutlineColor:''
//noValue:false,
//attributes: {
// attribute1: '',
// attribute2: ''
// }
}
}
else if($datapoint["wave_height"] >= 4) {
return {
textColor:'#ffffff',
backgroundColor: yellow,
topText: 'Wave Height',
topTextColor: '',
topTextOutlineColor: '',
topTextMaxSize: 'medium',
middleText: Text($datapoint["wave_height"], '#.# ft'),
middleTextColor: '',
middleTextOutlineColor: '',
middleTextMaxSize: 'medium',
//bottomText: '',
//bottomTextColor: '',
//bottomTextOutlineColor: '',
//bottomTextMaxSize: 'medium',
iconName:'icon1',
iconAlign:'left',
iconColor:'#ffffff',
iconOutlineColor:''
//noValue:false,
//attributes: {
// attribute1: '',
// attribute2: ''
// }
}
}
else if($datapoint["wave_height"] < 6) {
return {
textColor:'#ffffff',
backgroundColor: yellow,
topText: 'Wave Height',
topTextColor: '',
topTextOutlineColor: '',
topTextMaxSize: 'medium',
middleText: Text($datapoint["wave_height"], '#.# ft'),
middleTextColor: '',
middleTextOutlineColor: '',
middleTextMaxSize: 'medium',
//bottomText: '',
//bottomTextColor: '',
//bottomTextOutlineColor: '',
//bottomTextMaxSize: 'medium',
iconName:'icon1',
iconAlign:'left',
iconColor:'#ffffff',
iconOutlineColor:''
//noValue:false,
//attributes: {
// attribute1: '',
// attribute2: ''
// }
}
}
else if($datapoint["wave_height"] >= 6) {
return {
textColor:'#ffffff',
backgroundColor: red,
topText: 'Wave Height',
topTextColor: '',
topTextOutlineColor: '',
topTextMaxSize: 'medium',
middleText: Text($datapoint["wave_height"], '#.# ft'),
middleTextColor: '',
middleTextOutlineColor: '',
middleTextMaxSize: 'medium',
//bottomText: '',
//bottomTextColor: '',
//bottomTextOutlineColor: '',
//bottomTextMaxSize: 'medium',
iconName:'icon1',
iconAlign:'left',
iconColor:'#ffffff',
iconOutlineColor:''
//noValue:false,
//attributes: {
// attribute1: '',
// attribute2: ''
// }
}
}
else if($datapoint["wave_height"] == 100) {
return {
textColor:'#ffffff',
backgroundColor: red,
topText: 'Wave Height',
topTextColor: '',
topTextOutlineColor: '',
topTextMaxSize: 'medium',
middleText: 'No data',
middleTextColor: '',
middleTextOutlineColor: '',
middleTextMaxSize: 'medium',
//bottomText: '',
//bottomTextColor: '',
//bottomTextOutlineColor: '',
//bottomTextMaxSize: 'medium',
iconName:'icon1',
iconAlign:'left',
iconColor:'#ffffff',
iconOutlineColor:''
//noValue:false,
//attributes: {
// attribute1: '',
// attribute2: ''
// }
}
}

Re: Using Advanced formatting with a range of values

JenniferAcunto — Tue, 07 Jun 2022 14:14:42 GMT

Anything greater than 4 is yellow because that is what your second 'section' states should happen. Once it evaluates as true it stops, so 5, 7, 100, etc are all over 4 and therefore true so it stops there and doesn't check to see if it belongs to another color bucket.

If I understand your buckets correctly what you want is:

< 4 = green
>= 4 and <= 6 = yellow*
> 6 = red

*Technically 6 in your example is not assigned a color so I grouped it with the yellows.

You want your expression to match these buckets, so the yellow bucket should have a minimum and maximum value to constrain it. These values should not be included in the other buckets. Remember, any possibly value you may have should evaluate true only once.

I also find it easier to have a single return statement that uses variables:

var bcolor = When($datapoint["wave_height"] < 4, '#2e8540', $datapoint["wave_height"] >= 4 && $datapoint["wave_height"] <= 6, '#fdb81e', $datapoint["wave_height"] > 6, '#981b1e', '') var mtext = When($datapoint["wave_height"] == 100, '', Text($datapoint["wave_height"] , '#.# ft')) return { //textColor:'', backgroundColor:bcolor, //topText: '', //topTextColor: '', //topTextOutlineColor: '', //topTextMaxSize: 'medium', middleText: mtext, middleTextColor: '', middleTextOutlineColor: '', middleTextMaxSize: 'large', //bottomText: '', //bottomTextColor: '', //bottomTextOutlineColor: '', //bottomTextMaxSize: 'medium', //iconName:'', //iconAlign:'left', //iconColor:'', //iconOutlineColor:'', //noValue:false, //attributes: { // attribute1: '', // attribute2: '' // } }

Re: Using Advanced formatting with a range of values

jkeatonthompson — Tue, 07 Jun 2022 21:46:39 GMT

Thanks allot Jennifer! That was extremely helpful and so far all of my indicators have worked successfully.

Re: Using Advanced formatting with a range of values

KenBuja — Thu, 09 Jun 2022 17:11:25 GMT

You can make the expression simpler. You don't need to check in line 2 whether the value is greater than 4 since that was already done in line 1.

var bcolor = When($datapoint["wave_height"] < 4, '#2e8540', $datapoint["wave_height"] <= 6, '#fdb81e', $datapoint["wave_height"] > 6, '#981b1e', '');

You could make it even simpler, but it may not be as intuitive

var bcolor = When($datapoint["wave_height"] < 4, '#2e8540', $datapoint["wave_height"] <= 6, '#fdb81e', '#981b1e');