Arcade/Data expression to display gauge with icons or bar graph with icons (pictographs)

[Teresa_Blader]

I have a client that would like to build some graphs that use icons to represent filling in a bar graph, where each icon represents 10% and is filling out the gauge. Like in the image here. Any ideas or suggestions on how to start? Think this is something that could be accomplished with arcade and data expressions??

[JohannesLindner]

So, ideally you would have the icon url and one expression for each parameter that returns repeated <img> tags. This is not possible, yet, ArcGIS wouldn't interpret the HTML but show it as plain text.

As I see it, the cleanest solution is this:

• create and upload separate images for all possible gauges (10 if you want to round to the next 10, 20 if you want to round to the next 5 like in your example)
  • ideally, use the same width
• In your popup's HTML source, use <img> tags like in the example below
• For each gauge, you need an expression to return the right image url

<table>
  <tr>
    <td>US-Born</td>
    <td><img src="{expression/expr0}"></td>
  </tr>
  <tr>
    <td>Foreign-Born</td>
    <td><img src="{expression/expr1}"></td>
  </tr>
...

  <tr>
    <td>$35,000+</td>
    <td><img src="{expression/expr5}"></td>
  </tr>
</table>

// expr0, others analogous

// calculate your percentage value
// ... your code here ...
var percentage = 38.28

// round your percentage to the next 10 (5 would be analogous)
var round_percentage = Round(percentage / 10) * 10

// define a dictionary to link rounded percentages to the gauge images
var url_dict = {
    "0": "https://.../gauge_0.png",
    "10": "https://.../gauge_10.png",
    // ...
    "100": "https://.../gauge_100.png"
}

// return the appropriate image url
return url_dict[Text(round_percentage)]

[JohannesLindner]

Wait, wait, wait! This solution is much better. Cleaner, less work, and you don't have to round:

• create and upload the full 100% gauge
• use the HTML and Arcade expression below

This makes use of the relative and absolute positioning in CSS. Basically, you can tell an element where exactly it shall be placed (absolute) inside its parent element. This only works if the parent's positioning is relative. So we make the <td>s relative, show the full gauge and overlay that with an absolutely positioned <div> that has the same background color as the table.

<table style="background: white;">
  <tr>
    <td>US-Born</td>
    <td style="position: relative;">
      <img src="https://.../gauge.png">
      <div style="{expression/expr0}"></div>
    </td>
  </tr>
  <tr>
    <td>Foreign-Born</td>
    <td style="position: relative;">
      <img src="https://.../gauge.png">
      <div style="{expression/expr1}"></div>
    </td>
  </tr>
</table>

// expr0, others analogous

// calculate percentage
// ... your code here ...
var percentage = 68

// return the styling of the blocking bar
// absolute positioning at the right of the parent element
// left border is at (percentage)% of the parent element's width
// background is the same color as the table's
return "position: absolute; top: 0; bottom: 0; right: 0; left: " + percentage + "%; background: white"

[Teresa_Blader]

Thank you very much!! Exactly what I was thinking!! 

I'll give it a try!

[Teresa_Blader]

@JohannesLindner I'm having a wee bit of trouble getting the div style with the expression to work. Seems to just ignore it. Do you add another "white block" img src and connect the div style expression to that? Expressions did return as expected. 

Here's what I've got going on:

This is my base... but still trying to get the cover based on the percentage.

In the popup HTML:

<table style="background: white;">
 <tbody><tr>
    <td>Olmsted County Four Year Graduates</td>
    <td>{expression/expr3}</td>
    <td style="position:relative;">
             <img alt="Pictogram" src="https://gweb01.co.olmsted.mn.us/Resources/GISResources/WebGraphics/Person%20Pictogram.png" /> <div style="{expression/expr0}">
         </div>
    </td>
  </tr>
  <tr>
    <td>MN Four Year Graduates</td>
<td>{expression/expr2}<br /></td>
    <td style="position:relative;">
             <img alt="Pictogram" src="https://gweb01.co.olmsted.mn.us/Resources/GISResources/WebGraphics/Person%20Pictogram.png" /> <div style="{expression/expr1}">
             </div>
  </td></tr>
</tbody></table>

Data Expressions:

expression/expr0

var percentage = $feature["olmsted_county_4_year_grad_rate"]
return "position: absolute; top: 0; bottom: 0; right: 0; left: " + percentage + "%; background: white;"

expression/expr1

var percentage = $feature["minnesota_4_year_grad_rate"]
return "position: absolute; top: 0; bottom: 0; right: 0; left: "+ percentage + "%; background: white;"

expression/expr2

$feature["minnesota_4_year_grad_rate"]+"%"

expression/expr3

$feature["olmsted_county_4_year_grad_rate"]+"%"

[Teresa_Blader · Accepted solution]

Turns out I can put the image right in the div style with the width and I don't even need to write any expressions. 

I used this as an example: Enhancing dashboard elements using data expressions – Part 2 (esri.com) and instead of background-color, I did background image; however it only worked with the .svg version not the .png url. 

Thanks for the initial idea though @JohannesLindner! 

In the List Element in Dashboard I entered this into the line item template source:

<table style="width:100%">
	<tbody>
		<tr>
			<td style="width:50%">
			<div style="background-image:url(https://gweb01.co.olmsted.mn.us/Resources/GISResources/WebGraphics/Person%20Pictogram.svg); width:{olmsted_county_4_year_grad_rate}%">&nbsp;</div>
			</td>
			<td>
			<div style="background-image:url(https://gweb01.co.olmsted.mn.us/Resources/GISResources/WebGraphics/Person%20Pictogram.svg); width:{minnesota_4_year_grad_rate}%">&nbsp;</div>
			</td>
		</tr>
		<tr>
			<td style="text-align:left"><span style="color:#004c73"><strong><span style="font-size:11px">{olmsted_county_4_year_grad_rate}%</span></strong></span></td>
			<td style="text-align:left"><span style="color:#00a9e6"><span style="font-size:11px"><strong>{minnesota_4_year_grad_rate}%</strong></span></span></td>
		</tr>
	</tbody>
</table>

[JohannesLindner]

Oooh, that's a clever way to do it.