Monday, January 2, 2012

Pretty Pachube Plotting Progress

Edit: January 4, 2012. My Pretty Pachube plots seem to be showing up only part-time. I suspect that there is some throttling going that I need to get a grip on, perhaps because the feed data I am plotting is not my own. Please leave a note in the comments if you have an idea of what might be going on.

In my last post, I wrote about motivating myself for 2012.  Goals #1 and #2 had to do with working out, but I felt like a bucket of crap on the first day of the New Year and had little energy and less motivation (thank you very much, rhinopharyngitis).  I just felt like lying around like an inanimate carbon rod.
The Only Thing Keeping Me From "Employee of the Week"
But NO!  I have things I've gotta get done, so I thought I'd work a bit toward Goal #3.  Goal #3 was to get a basic home monitoring system set up, and one of the ideas I had was pushing that data out to Pachube to act as a repository for the data I would collect.  I'm not actually pushing out any data just yet, so I thought I'd dig into the presentation side of it.

Searching around on the Pachube web site, I came across the  Zoomable 30 day graph documented on the apps section of their site.  There is a nice little setup there where you can set up the graph's basic configuration online.  Give it a feed and datastream ID, a few parameters on size and color, and it spits out some code to cut and paste into a blog entry or web page.  Simple, eh?

Don't use it.  It has a couple of limitations:
  1. It can't put multiple lines on the same plot
  2. It doesn't work.
It actually does work until you try and plot more than one graph on the same web page.  The script doesn't handle multiple instances properly, and you end up wasting a bunch of time before finding this out.  Ask me how I know.

The link above does, however, include the following comment:
Note: if you are looking to combine multiple datastreams on the same graph, either by summing them or displaying them separately, see this post in the community forum for a solution
That is almost a solution, but it doesn't work with non-numeric data stream names.  What you really need to use is the script pointed to in this link.  This works great, and here is a summary of getting it to work on any web page or blog post.

First of all, you need these two lines of script before trying to show a plot:
<script src="" type="text/javascript">
<script src="" type="text/javascript">
Once you've done that, you can follow the examples in this forum post for the Javascript needed for the plots themselves (if you want to see the Javascript behind each of the examples below, just hit Control-U to see the source of this page).  These examples use data collected from a bash script from this page running on a DD-WRT powered router. 

Let's start off simple.  First, here is a plot of the uplink datarate.
Next, a plot of the downlink datarate.
Let's geta little fancier.  How about a plot of the uplink and downlink datarate on the same graph?
Or the sum of the two values plotted as a single value?
Pretty cool, I'd say.  There is one thing to be careful of here though.  The "div name" that is the first parameter to the script needs to be different for each of the plots you use.  This keeps the data behind each of them separate.  Weird things will happen if you don't.

There are other ways to present Pachube data.  I could just look at the data right off the Pachube web site.  Look here for the Pachube version of the plots I presented above.  Nothing fancy, but not bad.  There is yet another method of plotting data out there using the iGoogle Pachube Gadget and the associated method of publishing to a web page discussed here, but I found that to be a lot less flexible.

Despite taking a little longer to sort out than I anticipated, I'm pretty happy with the flexibility of this presentation. But wait, there's more!  There are more apps, such as ones that will send SMS alerts or Twitter messages when a particular condition is reached.  I haven't dug into these yet, but it is on my list of things to do once I've got my own data going in.


  1. Hmmm. Your examples don't appear...

  2. @Anonymous: I saw your comment and checked for myself and, indeed, no plots. Then I previewed my post in the Blogger editor and they were there. Now I see them as part of the normal post. Weird. I think Pachube must be throttling me somehow.