Showing Server Load As A Graph With PHP

Along side yesterdays blog post regarding Tweeting out your server status, there are more proactive ways of keeping an eye on whats happening. One of my favorites is showing the server load as a graph/progress bar thing.

Showing the server load alone is pretty nice, however with a little help from jQuery, we can make it bloody epic! – Showing it in real time.

index.php

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script language="javascript" src="http://paulor.net/inc/uploads/3263timer.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	   var j = jQuery.noConflict();
		j(document).ready(function(){
			j(".refresh").everyTime(100,function(i){
				j.ajax({
				  url: "load.php",
				  cache: false,
				  success: function(html){
					j(".refresh").html(html);
				  }
				})
			})
		});
	   j('.refresh').css({color:"black"});
	});
</script>
<style>
p.load-p {
	font-size: 10px;
	font-family: Verdana;
	margin: 0;
	padding: 5px 0 0;
}
img.percent {
	background: transparent url(percent1.png) no-repeat scroll 1px 0pt;
	margin: 5px 0pt 0pt;
	padding: 0pt;
}
img.percent.green {
	background-image: url(percent1.png);
}
img.percent.orange {
	background-image: url(percent2.png);
}
img.percent.red {
	background-image: url(percent3.png);
}
</style>
<div class="refresh"></div>

load.php

<?php
preg_match('/([\d]+\.[\d]+), ([\d]+\.[\d]+), ([\d]+\.[\d]+)$/', exec('uptime'), $matches);
$total_width = 121;
list(,$status['one'],$status['five'],$status['fifteen'])=$matches;
foreach ($status as $k=>$int)
	$status_i[$k]=(($int<0.25)?'green':(($int<0.75)?'orange':'red'));
?>
<div id="serverload">
	<p class="load-p">Current Load: <?=ceil($status['one']*100)?>%</p>
	<img class="percent <?=$status_i['one'];?>" style="background-position: <?=ceil(($status['one']*$total_width)-120)?>px 0pt;" src="percentImage.png">
</div>

Very simple, the results however are amazing :]

With thanks to Arkin aswell :]