New Question
 
 
PRTG Network Monitor

Intuitive to Use.
Easy to manage.

300.000 administrators have chosen PRTG to monitor their network. Find out how you can reduce cost, increase QoS and ease planning, as well.

Free PRTG
Download >>

 

What is this?

This knowledgebase contains questions and answers about PRTG Network Monitor and network monitoring in general. You are invited to get involved by asking and answering questions!

Learn more

 

Top Tags


View all Tags


Clock on PRTG Dashboard

Votes:

0

Your Vote:

Up

Down

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 by  umiotoko (0) 1



4 Replies

Votes:

1

Your Vote:

Up

Down

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 Support]



Votes:

0

Your Vote:

Up

Down

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 by  marty_m (0)



Votes:

0

Your Vote:

Up

Down

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

Your Vote:

Up

Down

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 by  Gartenfrisch (0)

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



Please log in or register to enter your reply.


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.