Using Advanced formatting with a range of values

[jkeatonthompson]

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: ''
// }
}
}

[JenniferAcunto · Accepted solution]

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: ''
    // }
  }

[jkeatonthompson]

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

[KenBuja]

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');