BACK

For this tutorial you need to download the software that makes the graphs. It is called PRTG.

http://www.paessler.com/prtg/download - 10MB
Mirror: PRTG.zip - 10MB


SNMP is the service built into Windows XP and after to allow the monitoring of network traffic. We need to enable this service for the software to work.

You can do this by going to Start > Control Panel > Add/Remove Programs then click the button Add/Remove Windows Components. You will have to wait while your computer compiles the list.

Now find Management and Monitoring Tools, click it, then click Details. A new box will open where you can select the tick box for Simple Network Management Protocol. Click OK until you are asked for your Windows CD for the installation. Once it has installed we can now configure the service.


To configure the SNMP service you need to go to Start > Control Panel > Administrative Tools > Services. Now find SNMP Service and double click it. Click the Security tab and Add on Accepted Community Names.

Community Rights: READ ONLY
Community Name: public

Click OK until all the windows are closed.


You now need to install the PRTG software. Simply extract the ZIP file and execute it like you would any other program and follow the installation steps. When it is installed, run the program.

Click Use Freeware Edition on the splash screen.
Click Add your first sensor button in the middle of the screen.
Click Next THREE times leaving the values at the defaults.

You will now be presented with a screen to put in your SNMP details.

Device Name/Alias: localhost
IP Address/DNS Name: localhost

Now click Next and it will show you a list of your network adaptors. Select the one WITHOUT loopback in the name. This is your physical network adaptor/internet connection.

Now click Next and it will ask you 3 things. Change the scanning interval to 5 seconds and leave the other values at default. Click Finish and that part of configuring is complete.



Now we need to configure the built in HTTP Server so we can use PHP to get the graphs. Click the link on the right hand side Configuring the web server. A window will appear.

Change the values to the following:

USER INTERFACE:
Live Data: 5 Minutes
Custom Averages: 60 Minutes
1 Hour Averages: 24 Hours
1 Day Averages: 30 Days

WEB SERVER:
Port: (select a suitable port you would like to use (it cannot be the same as Abyss))

Now click OK on this configuration window.

By now the Live Graph should have some data displayed on it if your connection was in use.

Click the [X] to close the program and click Yes to save the changes.


Now we need to configure the PHP code to display your graphs. This is where you need to do some of your own work as it is not a case of copying and pasting and expecting this graph to work.

Go to localhost and the port you selected in the PRTG Web Server set up. Find the first graph. Right click > Properties. You need part of the URL comprised of id={random-letters-numbers-etc}&subid=0. The PHP code you will need is the following:

5 Mins Code:

<?php
header('Content-type: image/gif');
header('Cache-Control: no-cache');
header("Local-Time: ".date("l, F j, Y - H:i:s")." (EST)");
$time = date("Ymd-H");

// This script will grab the graph for the previous 5 minutes of network activity.
$minus5 = date("i") - 5;
$minus5 = sprintf("%02d", $minus5);

$file = "http://localhost:8080/graphimg?id={EF4DED9E-4398-46B2-B760-161D46C9A307}&subid=0&width=580&height=250&from=".$time.$minus5;
readfile($file);
?>

You need to replace the id={random-letters-numbers-etc}&subid=0 with the one from the properties box on your image. Save this code into a php file labelled appropriately and then do the same for the next 3 graphs. The code is slightly different for each graph, so I have supplied it below, but you will still need to copy the different id={random-letters-numbers-etc}&subid=0 from each image.


60 Mins Code:

<?php
header('Content-type: image/gif');
header('Cache-Control: no-cache');
header("Local-Time: ".date("l, F j, Y - H:i:s")." (EST)");
$time = date("Ymd-H");

// This script will grab the graph for the previous 5 minutes of network activity.
$minus5 = date("i") - 60;
$minus5 = sprintf("%02d", $minus5);

$file = "http://localhost:8080/graphimg?id={EF4DED9E-4398-46B2-B760-161D46C9A307}&subid=1&width=580&height=250&from=".$time.$minus5;
readfile($file);
?>

24 Hours Code:

<?php
header('Content-type: image/gif');
header('Cache-Control: no-cache');
header("Local-Time: ".date("l, F j, Y - H:i:s")." (EST)");
$time = date("Ymd-H");

// This script will grab the graph for the previous 5 minutes of network activity.
$minus5 = date("i") - 1440;
$minus5 = sprintf("%02d", $minus5);

//1440

$file = "http://localhost:8080/graphimg?id={EF4DED9E-4398-46B2-B760-161D46C9A307}&subid=2&width=580&height=250&from=".$time.$minus5;
readfile($file);
?>

30 Days Code:

<?php
header('Content-type: image/gif');
header('Cache-Control: no-cache');
header("Local-Time: ".date("l, F j, Y - H:i:s")." (EST)");
$time = date("Ymd-H");

// This script will grab the graph for the previous 5 minutes of network activity.
$minus5 = date("i") - 43200;
$minus5 = sprintf("%02d", $minus5);

$file = "http://localhost:8080/graphimg?id={EF4DED9E-4398-46B2-B760-161D46C9A307}&subid=3&width=580&height=250&from=".$time.$minus5;
readfile($file);
?>

If you followed this tutorial correctly you should now be able to link to your graphs as a normal image but using the .php file as an image.

EG: <img src="bandwidth-5mins.php"> will show the graph for 5 minutes. The same applies to the other 3 graphs.

Feel free to experiment with the program and the php code to make it fit into your site exactly how you like.


Because of the quoted code on this page, the page cannot be made XHTML 1.0 compliant.