We run several Dashboards from a dedicated workstation, of which one is PRTG. On occasion the browser automatic refresh fails, so the display goes stale. There is a very very small refresh countdown timer and current time display on the bottom of the browser window, but this is hard to see and usually cut off because the browser window is not maximized on the desktop.

Is there a way to create a "clock" that would display current time on the PRTG dashboard? If we see this clock display get out of date, we'd know browser refreshes have failed. Since the page updates every 30 seconds, the clock would ideally show the time of the last refresh. To be clear, I don't want a javascript clock showing current time, I want to know whether the PRTG dashboard, as displayed, contains current information.

FYI, we have tried IE, Firefox and Chrome and found the browser occasionally hangs with all three. To date, Chrome has worked the best.

I'm doing this on my MS SQL reporting dashboards, don't know how to do it on PRTG.


Article Comments

You should be able to add a clock onto the page using the following code and adding this as a new map object. This will display the current time in a picture that will only update when the refresh happens.

Here is an article on how to add map objects - Add Map Objects

<!--Added Objects: Refresh Time-->

<div class="map_object map_icon2 map_icon_large" id="<@itemid>" objectid="<@objectid>" subid="<@subid>" style="<#mapobject type="coordinates" subid="<@subid>" mode="<@editmode>">;

	background:-moz-linear-gradient(top, #e0e0e0 0%,#cccccc 100%)!important; /* FF3.6+ */
	background:-webkit-linear-gradient(top, #e0e0e0 0%,#cccccc 100%)!important; /* Chrome 10+, Safari 5.1+ */
	background:-ms-linear-gradient(top, #e0e0e0 0%,#cccccc 100%)!important; /* IE10+ */
	background:linear-gradient(top, #e0e0e0 0%,#cccccc 100%)!important; /* W3C */
	border:1px solid #888;
	height:80px;

">
	<#mapobject type="objectgrip" mode="<@editmode>">
	<#mapobject type="htmlbefore" subid="<@subid>">
	<span>
		Time:
		<br><span style="font-size:35px"><#system type="time"></span>

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


Aug, 2013 - Permalink

Hello,

How would I edit the above code to not show the seconds on the clock? I'd prefer to just show hour:minute format.

Thanks!


Jun, 2015 - Permalink

It's not possible to exclude the seconds from our time element in PRTG but you could use Javascript to create a clock for PRTG and then exclude the seconds from it.


Jul, 2015 - Permalink

Hi there, found a way to add an analog clock by adding a new object. Refresh time set to 60 sec - voila.

<!--Added Objects: Clock-->

<div class="map_object map_icon2 map_icon_large" id="<@itemid>" objectid="<@objectid>" subid="<@subid>" style="<#mapobject type="coordinates" subid="<@subid>" mode="<@editmode>">;

	background:-moz-linear-gradient(top, #e0e0e0 0%,#cccccc 100%)!important; /* FF3.6+ */
	background:-webkit-linear-gradient(top, #e0e0e0 0%,#cccccc 100%)!important; /* Chrome 10+, Safari 5.1+ */
	background:-ms-linear-gradient(top, #e0e0e0 0%,#cccccc 100%)!important; /* IE10+ */
	background:linear-gradient(top, #e0e0e0 0%,#cccccc 100%)!important; /* W3C */
	border:1px solid #888;

">
	<#mapobject type="objectgrip" mode="<@editmode>">
	<#mapobject type="htmlbefore" subid="<@subid>">
		<canvas id="canvas" width="200" height="200" style="background-color:#FFF"></canvas>

		<script>
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var radius = canvas.height / 2;
		 ctx.translate(radius, radius);
		 radius = radius * 0.90
		 drawClock();

		function drawClock() {
			drawFace(ctx, radius);
			drawNumbers(ctx, radius);
			drawTime(ctx, radius);
		}

		function drawFace(ctx, radius) {
			var grad;
		 
			ctx.beginPath();
			ctx.arc(0, 0, radius, 0, 2*Math.PI);
			ctx.fillStyle = 'white';
			ctx.fill();
		 
			grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
			grad.addColorStop(0, '#333');
			grad.addColorStop(0.5, 'white');
			grad.addColorStop(1, '#333');
			ctx.strokeStyle = grad;
			ctx.lineWidth = radius*0.1;
			ctx.stroke();
			ctx.beginPath();
			ctx.arc(0, 0, radius*0.05, 0, 2*Math.PI);
			ctx.fillStyle = '#333';
			ctx.fill();
		}

		function drawNumbers(ctx, radius) {
			var ang;
			var num;
			ctx.font = radius*0.15 + "px arial";
			ctx.textBaseline="middle";
			ctx.textAlign="center";
			for(num= 1; num < 13; num++){
				ang = num * Math.PI / 6;
				ctx.rotate(ang);
				ctx.translate(0, -radius*0.85);
				ctx.rotate(-ang);
				ctx.fillText(num.toString(), 0, 0);
				ctx.rotate(ang);
				ctx.translate(0, radius*0.85);
				ctx.rotate(-ang);
			}
		}

		function drawTime(ctx, radius){
			var now = new Date();
			var hour = now.getHours();
			var minute = now.getMinutes();
			var second = now.getSeconds();
			// hour
			hour=hour%12;
			hour=(hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
			drawHand(ctx, hour, radius*0.6, radius*0.1);
			// minute
			minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
			drawHand(ctx, minute, radius*0.8, radius*0.1);
			// second
//			second=(second*Math.PI/30);
//			drawHand(ctx, second,  radius*0.9, radius*0.02);
		}

		function drawHand(ctx,  pos, length, width) {
			ctx.beginPath();
			ctx.lineWidth = width;
			ctx.lineCap = "round";
			ctx.moveTo(0,0);
			ctx.rotate(pos);
			ctx.lineTo(0, -length);
			ctx.stroke();
			ctx.rotate(-pos);
		}

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

Jul, 2016 - Permalink

Here's another variant of what my colleague Greg Campion had shared in 2013. With less code and also showing the timezone of the PRTG Core Server, to avoid any confusion about the time shown:

<!--Added Objects: Clock with Timezone-->
<div class="map_object map_icon2 map_icon_large" id="<@itemid>" objectid="<@objectid>" subid="<@subid>" style="<#mapobject type="coordinates" subid="<@subid>" mode="<@editmode>">;
   border:1px solid #888;
   height:92px;
   ">
   <#mapobject type="objectgrip" mode="<@editmode>">
   <#mapobject type="htmlbefore" subid="<@subid>">
   <span>
   <br><span style="font-size:35px"><#system type="time"> <#system type="timezone"></span>
   </span>
   <#mapobject type="htmlafter" subid="<@subid>">
</div>

Best Regards,
Luciano Lingnau [Paessler]


Sep, 2021 - Permalink

Is therer a chance zu disable the seconds on the clock


Nov, 2021 - Permalink

I'm afraid this is only possible by creating a different map object using javascript for example.


Nov, 2021 - Permalink