AGOL Dashboard Indicator Widget Advanced Settings

Christopher_Spadi

Greetings,

I have a feature with various string and numeric values. I just want the value to 5 decimals places and medium black (Before I had advanced formatting that changed the color to light green, light red, medium black, and dark grey depending on certain value ranges in if statements via Arcade and it worked but given each subset of features having different ranges its not feasible).

 

What I would like to do is use a string field that has Increasing, Decreasing, No Change, or Insufficient Samples as the options. I would like to display on the bottom part of Indicator widget and have the change color based off string value (Light Green Decreasing, Light Red Increasing, Medium Black No Change, and Medium Grey Insufficient Samples). 

Is it possible to achieve this? I would also like to use the icons from ESRI on the left of the text bottom or top possibly if that looks better by adding the up triangle (Increasing), down triangle (Decreasing), circle (No Change), and square (Insufficient Samples) and have them change colors too.

I couldn't get it to work in advance formatting via Arcade. Is it possible to use a string field that is in the same map feature the calculated value is using in the middle of the indicator and data settings?

Thanks.

JA7

You can do this using Advanced Formatting. The only tricky part is the icon. Dashboard icons will display next to the middle text and there's no way to change that. The easiest solution would be to move your decimal value to the top line and your string value to the middle line so that the icon displays next to that. 

Then set up 2 When statements to control the color and icon name based on your string values. 

 

var tcolor = When($datapoint.MEASUREMENT == 'Estimated', '#00A1E4', $datapoint.MEASUREMENT == 'Not Available', '#E0ACD5', $datapoint.MEASUREMENT == 'Measured', '#04E762', '#274C77')

var icon = When($datapoint.MEASUREMENT == 'Estimated', 'up', $datapoint.MEASUREMENT == 'Not Available', 'down', $datapoint.MEASUREMENT == 'Measured', 'square', 'circle')


return {
  textColor:'',
  backgroundColor:'',
  topText: $datapoint.MAGNITUDE,
  topTextColor: '',
  topTextOutlineColor: '',
  topTextMaxSize: 'medium',
  middleText: $datapoint.MEASUREMENT,
  middleTextColor: tcolor,
  middleTextOutlineColor: '',
  middleTextMaxSize: 'medium',
  // bottomText: ,
  // bottomTextColor: ,
  // bottomTextOutlineColor: '',
  // bottomTextMaxSize: 'medium',
  iconName: icon,
  iconAlign:'left',
  iconColor: tcolor,
  iconOutlineColor:'',
  //noValue:false,
  //attributes: {
    // attribute1: '',
    // attribute2: ''
  // }
}

 

 

Make sure the icon name matches the names you give the icons when selecting them. 

 

 

 

This assumes you are using the Feature value type.

 

If you are using the Statistic value type, then you will need to look at the third method in this blog, Dashboards That Pop: Indicator Hacks