Adding a progress bar to an Indicator with a little HTML
About
ArcGIS Dashboards is a great tool for building content for at-a-glance situational awareness. One of these features has long been the ability to add reference values to elements like an Indicator. In this example below, you'll see that I have my {value} (88) in the middle of the element, and my {reference} (159). Behind the scenes, ArcGIS is also creating a value called {percentage}.
With this percentage value, I can create some very custom elements, like this progress bar, which I've added in the "General > Description" portion of the element.
How to build it
Short story: We're making an HTML table that has the same width as the {percentage} value.
Step one is to simply add a new Indicator to your dashboard by selecting + Add element > Indicator.
Next, we select the data we want to hydrate this element. This could be data from a map, a stand-alone layer, or even a data expression. Once the layer has been selected, we need to set two values in the Data section. Think of this as a fraction, having a numerator on the top and denominator on the bottom.
- Numerator: Set the filter to only show the values that count as the top value. Maybe this is records that are marked as "complete." In my example, a volunteerCount of "2" means that a zone is complete.
- Denominator: Set the reference type to either a fixed value (if the denominator does not change) or to a statistic, like the total count of the features with no filter applied.
With these settings our indicator is looking... bland. But that is about to change.
Under General > Description > Edit, toggle the Source button and paste in the following HTML:
<table style="background-color:#f5f5f5; border-radius:25px; width:100%">
<tbody>
<tr>
<td>
<table style="width:100%">
<tbody>
<tr>
<td style="background-color:#62a662; border-radius:25px; width:{percentage}"> </td>
<td style="font-size:0px" width="0%"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Notice on line 8 that I'm expanding the width of a column of a table based on the {percentage} value. As the percentage increase, so does the width of my green progress bar. And because this is a dynamic value, it resizes to the shape of any screen.
Toss in an icon, some supporting text, and lighter colors, and you're good to go!
This solution works 99% of the time! (Seriously, when it hits 100%, there is a tiny bit of "progress" missing that I can't seem to resolve. Comment with your suggestions!). You could also use Arcade Advanced Formatting to make the color of the bar change depending on the values or add text within the progress bar.
