What is this?

This knowledgebase contains questions and answers about PRTG Network Monitor and network monitoring in general.

Learn more

PRTG Network Monitor

Intuitive to Use. Easy to manage.
More than 500,000 users rely on Paessler PRTG every day. Find out how you can reduce cost, increase QoS and ease planning, as well.

Free Download

Top Tags


View all Tags

Clock on PRTG Dashboard

Votes:

0

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.

clock dashboard prtg

Created on Aug 20, 2013 6:18:44 PM



Best Answer

Accepted Answer

Votes:

0

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]

Created on Sep 23, 2021 7:27:36 AM by  Luciano Lingnau [Paessler]

Last change on Sep 23, 2021 7:30:23 AM by  Luciano Lingnau [Paessler]



7 Replies

Votes:

2

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>

Created on Aug 21, 2013 12:47:17 PM by  Greg Campion [Paessler Support]

Last change on Apr 24, 2015 1:32:25 PM by  Luciano Lingnau [Paessler]



Votes:

0

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!

Created on Jun 29, 2015 1:25:26 PM



Votes:

0

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.

Created on Jul 2, 2015 2:37:24 PM by  Greg Campion [Paessler Support]



Votes:

0

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>

Created on Jul 20, 2016 11:58:40 AM

Last change on Jul 20, 2016 2:00:28 PM by  Torsten Lindner [Paessler Support]



Accepted Answer

Votes:

0

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]

Created on Sep 23, 2021 7:27:36 AM by  Luciano Lingnau [Paessler]

Last change on Sep 23, 2021 7:30:23 AM by  Luciano Lingnau [Paessler]



Votes:

0

Is therer a chance zu disable the seconds on the clock

Created on Nov 29, 2021 1:42:49 PM



Votes:

0

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

Created on Nov 30, 2021 7:33:03 AM by  Timo Dambach [Paessler Support]




Disclaimer: The information in the Paessler Knowledge Base comes without warranty of any kind. Use at your own risk. Before applying any instructions please exercise proper system administrator housekeeping. You must make sure that a proper backup of all your data is available.