Adding a progress bar to an Indicator with a little HTML

[Anonymous User]

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.

1. 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.
   
   
   
2. 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}">&nbsp;</td>
						<td style="font-size:0px" width="0%">&nbsp;</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.

[JakubSisak]

Hi Mike. Looks good!  Any way to use a field value in the HTML to control the width?

[neomapper]

What's the arcade code to generate a percentage % in the progress bar?

[KeithSoRelle]

For whatever reason I just can't seem to get this to work. I get a tiny short stumpy bar that doesn't resemble a progress bar of any sort. Is wonder if there is an implied step I'm missing. I've walked through it with a few different layers/values with the same issue. 

[neomapper]

@KeithSoRelle  -  I am receiving the same issues now after the latest updates. 

[SamGatter]

Hiya,

I don't know if this will be of any use to anyone still but I have managed to reproduce this in a list element instead of a indicator - 

There are a couple of things I have found to make this work within list elements rather than an indicator element, however I believe some issue might arise from the missing '%' mark at the end of the {percentage} value in the original post's HTML code. 

function overallBar(score){
  var html = '';
  html += '<table style="background-color:#f0f0f0; border-radius:25px; width:100%">';
  html += '<tbody>';
  html += '<tr>';
  html += '<td>';
  html += '<table style="width:100%">';
  html += '<tbody>';
  html += '<tr>';
  html += '<td style="background-color:#00CC99; border-radius:25px;color:#fafafa;text-align:center;width:'+score+'%"><b>'+score+'%</b></td>';
  html += '<td style="font-size:0px; padding:0.1px; width=0%" ></td>';
  html += '</tr>';
  html += '</tbody>';
  html += '</table>';
  html += '</td>';
  html += '</tr>';
  html += '</tbody>';
  html += '</table>';
  return html;
}

This user defined function returns the html for the progress bar by outputting the HTML with the 'score' parameter as the width of the progress bar - I also overlay the score metric in the middle of the progress bar as text. This way each item in the list with have it's own progress bar (if this doesn't suit your needs you can potentially group the values using a data expression and then only show one value in your list to mimic an indicator). 

Another thing to note is to make sure your variable is a numeric data type, when attempting this I was pulling through the value as a string, but had to change it to an integer to get it to work.

Also - in your arcade advanced formatting expression, you can use a calculation to make your percentage as well, i.e. make sure it's a value from 0-100 etc. In my example below my scorecompleteness value is a score from 0-100 so I don't need to do this. 

To output the function in the list use the following arcade and simply input your score value in the () brackets for the function parameters - 

return {
  textColor: '',
  backgroundColor: '',
  separatorColor:'',
  selectionColor: '',
  selectionTextColor: '',
   attributes: {
    percentageComplete: overallBar($datapoint.scorecompleteness),
  }
}

Then in your list item template - add {expression/percentageComplete} to output progress bar in your list item template.

The below screenshot is the output of the expression. 

In the original post there was a mention of a missing bit of progress at the end of the progress bar for values that are 100%, I have managed to reduce this by using padding:0.1px in the initial arcade function, which reduces the far extend of the bar. 

Hope that helps! It's a super useful metric to show in dashboards so thanks for the original poster about this piece of knowledge!