Hello, I want to share my work for an horizontal progress bar. Known restrictions (for the moment) : - Value must be a 0/100 range because I don't know how to get the maximum value - Object height is hard coded. I wasn't able to match the PRTG Map Editor size - Text inside the progress is not V-centered

Progress bar

Maybe only a few things is needed to acheive it :

<!--Status Icons: Progress Bar-->

<div class="map_object map_icon mapicon_status_white" id="<@itemid>" objectid="<@objectid>" subid="<@subid>" style="<#mapobject type="topleftcoordinates" subid="<@subid>" mode="<@editmode>">">
  <#mapobject type="objectgrip" mode="<@editmode>">
  <#mapobject type="htmlbefore" subid="<@subid>">
  <#checkobjecttype objecttype="sensor" nicemessage="true" id="<@objectid>">

<style> 
.progress-bar
{
	background-color:rgb(176,176,176);
	color:rgb(255,255,255);
	font-size:14px;
	text-align:center;
	padding:10px 5px 8px 5px;
	border-radius: 3px;
	width: 150px;
}
	
.progress-bar-inner 
{  
    display: block;  
	font-weight: bold;
	margin : 2px;
	padding : 2px;
    border-radius: 3px;
    position: relative;
	vertical-align: 20%;
} 
</style>     
  
	<!-- list des name : https://www.paessler.com/manuals/prtg/live_single_object_status -->
	<div class='progress-bar'>
		  <span id="myspan<@objectid>" class='progress-bar-inner'>VALUE</span>
	</div> 

	<script>
	var str = "<#objectstatus name="lastvalue" id="<@objectid>">";
	var res = str.split(" ", 1);
	var prtgValue = parseInt(res);
	document.getElementById("myspan<@objectid>").textContent="<#objectstatus name="lastvalue" id="<@objectid>">";
	document.getElementById("myspan<@objectid>").style.width=res[0]+"%";
	if (prtgValue < 15)
	{
		document.getElementById("myspan<@objectid>").style.background="rgb(227,6,19)";
	}
	else if (prtgValue < 25)
	{
		document.getElementById("myspan<@objectid>").style.background="rgb(245,197, 0)";
	}
	else {
		document.getElementById("myspan<@objectid>").style.background="rgb(184,196,25)";
	}
	</script>

  <#mapobject type="htmlafter" subid="<@subid>">
</div>

Article Comments

Hello there,

Thank you for sharing this. If possible a screenshot of the map object would be nice.


Kind regards

Felix Wiesneth - Team Tech Support


Apr, 2021 - Permalink

@Felix Wiesneth : screenshot updated.

Is it possible to get object max value (like we have for lastvalue) ? Thanks


Apr, 2021 - Permalink

Hi there,

Thank you for the screenshots.
I'm afraid it is not possible to get the max value of a sensor/channel.


Kind regards

Felix Wiesneth - Team Tech Support


Apr, 2021 - Permalink

:( so how does the jauge is able to ? Does the dev team can add this variable to improve the control ( I don't think that's difficult because it already work with lastvalue )?


Apr, 2021 - Permalink

Hi there,

I can't get into detail here. If you want to propose this as a new feature, please take a look here how to open a feature request. Since we are working on a new API at the moment, this request won't be added in the old API. On our roadmap you can take a look about our progress.


Felix Wiesneth - Team Tech Support


Apr, 2021 - Permalink