I've been fairly pleased with the performance of my new Pi-based blog, even though the amount of traffic it's received has been fairly small.  I found myself with a PuTTY SSH window open most of the day running a "top" command to see what the CPU usage was.  I wanted to know how much those quad-core ARM cores were getting tickled.

I still don't know how long I'll leave my Pi set up with this blog, but all of a sudden it seemed like a real cool idea to add a live CPU load graph to the top of the site just so other people could see how well it was humming along and whether it was breaking a sweat or not.

Getting The CPU Load

There are ways to get the CPU usage at the current time, but I wanted to have a rolling window of an hour.  I enlisted the help of a small shell script and a cron job to grab the current CPU load every minute and write it to a file.  The shell script uses the top command to grab the CPU load averaged over a 10 second window.  I'm averaging all 4 cores together to simplify. After appending it to a file, I use tail to trim off all but the last 60 records (1 hour's worth of data).

#!/bin/sh

# Get current CPU usage (10-second average, actually)
top -bn 2 -d 10 | grep '^%Cpu' | tail -n 1 | gawk '{print $2+$4+$6}' >> ~/stats.txt

# Keep last 60 lines
cat ~/stats.txt > ~/_stats.txt
cat ~/_stats.txt | tail -n 60 > ~/stats.txt
rm ~/_stats.txt

Then I used "crontab -e" to configure a new cron job:

# m h  dom mon dow   command
*/1   *    *    *    *    ~/get_stats.sh

And if anyone is curious, I'm using Raspbian (Debian Wheezy).  I did need to install "apt-get gawk" first for the script to work.  I'm not positive if awk would have worked.

Creating A Graph

Now back in ContentBox-land, I created a new widget via the admin interface called "CPU Load".  It reads in the file of CPU load times and spits out some HTML and JavaScript using the Flot graphing library.  I removed the formatting options for brevity.  View source on this page to see them :)

any function renderIt(){
	var stats = fileRead( '/root/stats.txt' );
	stats = listToArray( stats, chr(10) );
	var series = [];
	var i = 0;
	for ( var data in stats ) {
		series.append( [ i++, data ]  );
	}
	savecontent variable="local.results" {
	writeOutput( "		
		<div style='width:300px;text-align:center'>CPU Usage for last hour</div>
		<div id='placeholder' style='width:300px;height:75px'></div>
		<script language='javascript'>
			$( document ).ready(function() {
				$.plot(
					$('##placeholder'),
					[ #serializeJSON( series )# ]					
				);
			});
		</script>
	");
	}
	return local.results;
}

This created a nice ContentBox widget for me to add in via CKEditor.

Outputting It

Finally, I added the JS library into my layout and then added this snippet to the header view:

<div style="float:right;">
	#cb.widget("cpu-load")#
</div>

And there you have it!  The latest CPU load data is read and output as a nice little graph on the top of my site.

Even though the data updates every minute, I have content caching enabled in ContentBox and set to 5 minutes, so the graph may be up to 5 minutes old depending on what page you're on.  The fix for that, short of disabling caching, would be for me to ajax in the data on page load.  

Next, I think I might try to add a simple counter that shows the number of page requests in the last hour too just so people can see the load.  And by people, I mean me :)