zecojbox

a slacker's rants

TomatoUSB + Optware + rrdtool + dygraphs = cool bandwidth monitor

04.02.2012, development, opensource, by .

I recently upgraded my Buffalo WHR-HP-G54 to an ASUS RT-N16 as I needed gigabit ethernet; and usb ports + wifi N are all welcoming upgrades to the aging buffalo. As an inevitability, I installed TomatoUSB and plugged in a 4GB USB stick. Now, TomatoUSB itself is a very good system with loads of features but you can extend even more by adding Optware. I will not go into the installation as there already is a very good guide to follow.

Once you have the USB stick mounted and Optware up and running, you can do lots of nifty things. For example, I installed zsh, screen, vim and a whole bunch of other essential stuff. A few examples can be found here.

One particular interest I had when found out about optware was the extension of tomato’s visual bandwidth log graphs. I said extension because the original one comes with tomato has a max 24 hour window. However, occasionally I want to see what happened in the previous week or even month. So first, I thought of rrdtool and rrdgraph. Now rrdtool is a good database for this purpose, however rrdgraph proved to be too resource intensive for the little cpu.

So I searched around and found dygraphs. This is a perfect solution as all you need is to feed the data in csv format and the graphing would be done on the client’s browser. Have a look at my example here (1 week window), you can click&drag the cursor to zoom in and double click to zoom out.

Cool? If you’re interested, let’s start. Assuming you already have a persistent storage (jffs,usb/sd card, etc.) setup at /opt, first, ssh to your router, then:

# ipkg update
# ipkg install perl rrdtool
# wget http://zecoj.com/files/bwg/rrdtool.txt -O /opt/bin/rrdtool.sh
# chmod +x
/opt/bin/rrdtool.sh
# cru a bwlog "*/1 * * * * /opt/bin/rrdtool.sh"

That will install rrdtool, perl and download my rrdtool collector script, put it in the crontab to be executed every 1 minute. Now, create a directory somewhere in your /opt to store the necessary files, mine is at /opt/share/www/cgi-bin.

# pwd
/opt/share/www/cgi-bin
# wget http://zecoj.com/files/bwg/bandwidth.txt -O bandwidth.cgi
# chmod 755 bandwidth.cgi
# wget http://zecoj.com/files/bwg/dygraph-combined.js
# chmod 644
dygraph-combined.js
# rm -rf /tmp/var/wwwext/cgi-bin
# ln -s /opt/share/www/cgi-bin /tmp/var/wwwext/.

You should also append the these into /opt/.autorun. This will tell tomato to run these command right after mounting my usb stick.

# echo 'cru a bwlog "*/1 * * * * /opt/bin/rrdtool.sh"' >> /opt/.autorun.
# echo 'rm -rf /tmp/var/wwwext/cgi-bin' >> /opt/.autorun
# echo '
ln -s /opt/share/www/cgi-bin /tmp/var/wwwext/.' >> /opt/.autorun

What just happened is we got the files we need, save them somewhere that will not disappear as the router restart, link them to the router’s cgi-bin directory. Now, assuming the router’s ip is 192.168.0.1, you can test everything by going to: http://192.168.0.1/ext/cgi-bin/bandwidth.cgi there you should already see a few data points collected by rrdtool.sh earlier. Download some big files, leave it running for a while (the page will auto refresh every minute) and you should see more pretty data come up :)

10 Responses to TomatoUSB + Optware + rrdtool + dygraphs = cool bandwidth monitor

  1. Great work on this! But I have a few problems with it.

    How do I get it to adjust the graph for values over 1.5M/s? I have data that is beyond the visible graph. I would also like to be able to see more of the TX info.

    Thanks.

    Reply
  2. @Neal,
    Good question, you can change the upper and lower limits of the graph by changing the “valueRange” values in the bandwidth.cgi script. Let me know if that doesn’t work.

    Reply
  3. 2012-03-21 at 06:01 Kaar3l

    I installed it on tomato, had to change the interface name in script. Now it works like charm. Very very nice work and thank you for good graphs. :)

    Reply
  4. Hi
    I installed script and rename the interface name in the script (vlan1.rrd).
    working like a charm on WL500GP TomatoUSB .

    Now I seek a way to read the digitemp rrd file and show it on the graph.
    The file that makes the temps.rrd file loks liike this:

    #!/bin/sh
    # RRD Update Script for collecting temperature from two probes

    # get a reading of the office temp, using the digitemp prefs already at /opt/etc/digitemp.conf
    reading=`/opt/bin/digitemp -c /opt/etc/digitemp.conf -a -q`

    #

    outsidetemp=`echo $reading | gawk ‘{print $2}’`
    insidetemp=`echo $reading | gawk ‘{print $3}’`

    echo $N

    echo $outsidetemp
    echo $insidetemp

    echo $reading | gawk ‘{print $2}’
    echo $reading | gawk ‘{print $3}’

    /opt/bin/rrdtool update /opt/rrdb/temps.rrd N:$outsidetemp:$insidetemp

    What should I replace in your script that could show temperatures from temps.rrd file on the graf ( i figure it out the names, but the value is hard to find) .

    WANIF=`nvram get wan_ifname`
    WANRRD=”${RRDDATA}/${WANIF}.rrd” (vlan1.rrd)

    and

    WANIN=`grep “${WANIF}” /proc/net/dev|awk -F “:” ‘{print $2}’|awk ‘{print $1}’`
    WANOUT=`grep “${WANIF}” /proc/net/dev|awk -F “:” ‘{print $2}’|awk ‘{print $9}’`

    # uncomment to debug
    #echo “WAN -> in: ${WANIN} out: ${WANOUT} ”
    # Update the Databases
    `rrdupdate “${WANRRD}” -t in:out N:”${WANIN}”:”${WANOUT}”`
    #echo “—–”

    Thank you for help.
    Regards
    Ales

    Reply
  5. Ales,
    Have a look at [1]. Toward the end is where I extract the database and feed it into the frontend. You can also look into the source of [2], where the data is dumped into the html code.

    [1] http://zecoj.com/files/bwg/bandwidth.txt
    [2] http://zecoj.com/files/bwg/rrdtool_dygraphs.html

    Reply
    • 2013-03-23 at 22:51 Kaar3l

      I am trying something like Ales. Want to display 3 temperature lines on graph. Used your scripts and only one line displays. The first in the file. How could I display the second two?

      Reply
  6. 2013-04-09 at 04:22 anonymous_coward

    I downloaded your rrdtool.sh script and found some lines where you use rrdtool to create a png. Isn’t the purpose of dygraph.js that you don’t have to generate a png on the router?

    Reply
    • AC, I’m assuming you meant the lines with “resolution” in it. “resolution” in this scenario means resolution of the data, not of an image. See rrdtool manpage.

      Reply
  7. Pingback: hermes imitation bags

  8. 2013-05-11 at 02:32 Nathan Ellsworth

    Awesome solution. Worked great on my Linksys E3000 running TomatoUSB. I also forked the entire framework and modified it to graph periodic speedtest reports as well, using a simple script which just downloads a big file from M$ patch site.

    Thanks

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>