How to conditionally format the background colour of an Indicator in Operations Dashboard

2320
7
04-16-2019 10:30 PM
tomhughson
New Contributor III

Hi, 

Is it possible to conditionally format the background colour of an Indicator in Operations Dashboard? 

I am trying to use the Indicator to live update and change background colour (like a traffic light system) i.e. over a certain value, the background colour will change to yellow, or below a certain value will change to red. 

Below is an example of the type of indicators and the traffic light system. 

Indicator Dashboard Live Background Colour Change

Thanks for the help!

7 Replies
DavidNyenhuis1
Esri Contributor

Hi Tom,

Good question. Yes, it is possible to do what you are describing. I suggest you check out the following blog article. It describes how to do this.

https://www.esri.com/arcgis-blog/products/ops-dashboard/real-time/provide-context-to-indicators/

The documentation on Indicators also provides information about conditional formatting.

https://doc.arcgis.com/en/operations-dashboard/help/indicator.htm

tomhughson
New Contributor III

Hi David, 

Thanks for the reply. I was able to add a fixed value reference and conditionally format it so that the background colour changed. However, I am trying to create a threshold for a range of values rather than an individual value. 

I want to apply a threshold to each Indicator where below 3 is to be coloured red, between 4 and 5 is to be yellow and between 6 and 8 is to be green. Is there any way I can apply more than one fixed value reference to each Indicator in the dashboard (a range of values)? Or can you only apply one? 

Thanks, 

Tom 

0 Kudos
DavidNyenhuis1
Esri Contributor

Hi Tom,

At this time the conditional formatting only allows for two styles (1. at/above and 2. below the reference value). I have recorded this enhancement request and use case. Thank you for the details.

NataliyaLys
Occasional Contributor II

David and Tom,

tom hughson‌, David Nyenhuis

I have the same issue. I am trying to create an Indicator widget that would show Pollen levels, for ex.: 0-4 (low) Green, 5-49 (moderate) Yellow, 50-89(high) Orange, and 90+(very high) Red. 

So if would be nice if the indicator widget allow for adding an unlimited number of reference values, and conditions. (Just like to can add more filters!)

0 Kudos
DerekLaw
Community Moderator

Hi Nataliya,

> So it would be nice if the indicator widget allow for adding an unlimited number of reference values, and conditions.

Please submit an enhancement in the ArcGIS Ideas for Ops Dashboard site.

 

Hope this helps,

0 Kudos
GregJohnson
New Contributor III

Thanks everyone for your comments on this question.

I hope someone has submitted the separate style for value at reference in the ArcGIS Ideas for Ops Dashboard.

What I am trying to do show a different style (color) for a percentage value:

The default color would be if the rate is below 50%; the next color would be for a rate that is at or above 50% but below the rate from a previous time frame; and a final color would be for the rate when it is at or above the rate from the previous time frame.

I have around 250 different areas being tracked, and each areas' rate from the previous time frame are populated in one field. Their range of values are from 55 to 85. I will receive new rate for each area every week day over a four month time period. The rate will grow over the course of this time period. Most will reach the 50% threshold, and some may even pass the area's rate from the previous time frame.

My plan is similar to Nataliya's, but has the caveat that each area will have a different previous rate. Thoughts?

0 Kudos
HeathAnderson
Occasional Contributor

Not sure if you have solved this question yet, but if not I hope this helps.  With the integration of arcade to the indicator widget it is possible to create a threshold. 

  1. First, I created a variable, "var c" that references my value from the table in which I base my color. 
  2. Next is an empty array, "var clr" that will hold the color from the if statement. 
  3. Write your if statement and set the array variable equal to the hex color for each logic criteria. 
  4. Finally I set the "backgroundColor" as the array variable.

 

 

 

var c = $datapoint.riskValue
var clr = []

if(c >= 0.00001 && c < 10){
    clr = "#1d8aff"
}else if (c >= 10 && c < 30){
    clr = "#fff70e"
}else if (c >= 30 && c < 100){
    clr = "#ff7134"
}else if (c >= 100){
    clr = "#ff0000"
}else {
    clr = "#ebebeb"
}

return {
    //textColor:'',
    backgroundColor: clr,
    topText: 'Tranmission Rate',
    //topTextColor: '',
    //topTextOutlineColor: '',
    topTextMaxSize: 'x-small',
    middleText: $datapoint["riskValue"],
    middleTextColor: '',
    middleTextOutlineColor: '',
    middleTextMaxSize: 'large',
    //bottomText: '',
    //bottomTextColor: '',
    //bottomTextOutlineColor: '',
    //bottomTextMaxSize: 'medium',
    //iconName:'',
    //iconAlign:'left',
    //iconColor:'',
    //iconOutlineColor:'',
    //noValue:false,
    //attributes: {
      // attribute1: '',
      // attribute2: ''
    // }
  }

 

 

 

HeathAnderson_0-1627661021489.png

See website for great examples

https://www.esri.com/arcgis-blog/products/ops-dashboard/real-time/pushing-the-limits-of-arcade-in-da...

Cheers,

Heath