Adding Open Flash Charts to my home monitoring

Share

As mentioned previously, I’ve built a home temperature monitoring system on top of the beer fridge controller that Doug and I built over Christmas. I later added a hygrometer and whole of house power measurement using a Current Cost. There is also a simple server which provides a UI for the system, which previously used PNG graphs generated from Google’s Chart Server API.

I was checking out Jon’s car hacking the other day, and was impressed by his flash graphs. However, as best as I could tell he’s using a commercial flash charting tool, whereas I wanted something open source. I dug around and found Open Flash Charts which was exactly what I wanted.

Why flash charts by the way? I wanted a richer presentation than I could get with PNG, and I am unaware of a way of doing interactive graphs with HTML5 apart from writing massive amounts of javascript. I look forward to someone educating me about an alternative, but until then I will view flash graphing as a punishment for all those overly smug iPad users out there.

So, first off here is an example of a flash chart. This one is power usage at my house from Friday, compared with Wednesday:


Open Flash Charts is actually really simple to use. First off there is some javascript to load the flash component:

    <script type="text/javascript" src="http://www.stillhq.com/local/swfobject.js"></script>
    <script type="text/javascript">>
    swfobject.embedSWF(
      "http://www.stillhq.com/local/open-flash-chart.swf", "2010_04_23_2010_04_21_Watts", "600", "400",
      "9.0.0", "expressInstall.swf",
      {"data-file":"http://www.stillhq.com/json/2010.04.23;2010.04.21/Watts"}
    );
    </script>
    

This javascript relies on a couple of resources being available on your server, which I’ve put into a directory called local. You find these files in the Open Flash Chart .zip file, although you could just snarf them from my server if you want.

Then all you need to do on the HTML side is include a div with the right id where you want the graph to go. For this post, that looks like this:

    <div id="2010_04_23_2010_04_21_Watts"></div>
    

Then you just need to write the JSON which represents the graphs content. That’s well documented on the Open Flash Charts site, but you can find the JSON for my graph at http://www.stillhq.com/json/2010.04.23;2010.04.21/Watts if you want to see it.

Share

Home power measurement

Share

I’ve been spending some quality time with a Current Cost CC128 and my existing home sensor network. So far I’ve discovered that I use quite a bit of power, and that I can remotely monitor how many times a day my wife makes a cup of tea. Some example data:

You can see that it was relatively cool compared with days a few weeks ago today. That’s more obvious in the graph showing the last two weeks though:

However, it was quite humid today:

Which is why we didn’t have the evaporative cooler on, just the fan. That doesn’t seem to really affect our power usage, which really needs more analysis:

The 500 watt minimum power draw makes me unhappy. You can see over a week it never goes away:

Share