Home, Up

Track and display your disk usage with Dygraphs

I want to track the disk usage on my personal WebDAV account and plot it along time.

Sample Screenshot (click to see the website):

Sample Screenshot

Setting up a cronjob

First, create a cronjob which logs the disk usage. The tricky part is to log the date and the output of the du command at the same time. Here is the commented bash script:

# create a temporary filename
TFILE="/tmp/dutmp.$$.tmp"; 
# dump the current date in the file
date -R > $TFILE; 
# get the current disk usage to the path of your webdav
du -sm /your/server/path/to/webdav >> $TFILE ; 
# get the contents of the tempfile, replace the newline character with
# a semicolon, skip the path from du's output and write it to my logfile
sed ':a;N;$!ba;s/\n/; /g' $TFILE | sed 's/\(.*;\s*[0-9]*\).*/\1/' >> /your/wwwroot/du/du-log.txt; 
# delete the tempfile
rm $TFILE

I put the above commands on one line in my crontab (executing every 15 mins):

*/15 * * * * TFILE="/tmp/dutmp.$$.tmp"; date -R > $TFILE; du -sm /your/server/path/to/webdav >> $TFILE ; sed ':a;N;$!ba;s/\n/; /g' $TFILE | sed 's/\(.*;\s*[0-9]*\).*/\1/' >> /your/wwwroot/du/du-log.txt; rm $TFILE

The logfile du-log.txt looks like this

Date; MByte
Fri Apr  1  2011 15:00:01 +0200; 4639   
Fri Apr  1  2011 15:15:01 +0200; 4695   
Fri Apr  1  2011 15:30:01 +0200; 4751    
[...]

Remember that initially the logfile should just consist of one line Date; MByte\n

Dygraph

Now that I have a nice logfile, I just need to display its stats in a timeseries graph. Fortunately, I can use Dygraphs, a nice JavaScript library to plot timeseries and other data. I've used Timeplot before, but Dygraphs seems lighter and easier to use.

Here is the full HTML code, (click for rendered view):

<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no" /> 
<script type="text/javascript" src="dygraph-combined.js"></script>
</head>
<body>
  <p><a href="..">WebDAV Home</a></p>
  <div id="graph" style="width:800px; height:300px;"></div>
  <script type="text/javascript">
   var g2 = new Dygraph(document.getElementById("graph"),
                        "du-log.txt", 
                        {
                          title: "Diskspace on my WebDAV",
                          delimiter: ";",
                          labelsKMB: true,
                          fillGraph: true,
                          xValueParser: function(x) { return Date.parse(x); }
                        });          // options
  </script>
 </body>
</html>

Note that you need a workaround to get this rendered in IE.

Last modification: Wed Jul 20 10:50:04 CEST 2011


Comments? Feedback?

Tweet  about it and mention my Twitter account @ping13 or send an e-mail to mail@ping13.net.
Home, Up