Thursday, May 22, 2014

Hooking HighCharts Into My House

If you prowl around this blog very long you'll run into a bunch of charts.  I've experimented with several cloud services for storing data and shown examples of my own data using their charting provisions.  All of them are cool, but some of them leave a little bit to be desired.  For example, Xively uses Rickshaw <link>, and it's a nice package, but the Xively implementation is too darn complex for my taste.  If you look at the various cloud providers, they all have their favorites.

Up until now I've been using the Google graph API for my own stuff, but the problem is that Google Graph uses Flash.  Cell phones don't like Flash very much.  That means my home graphs don't work on my phone.  I absolutely can't let that continue any longer, and since my favorite cloud provider, Grovestreams <link>, uses HighCharts <link>, I stole their example and developed my own graph using the same library.

Hey, they stole my idea for the SteelSeries gauges, turn about is only fair play.

But, as usual, it was an exercise in patience.  The documentation on HighCharts is voluminous; it goes on forever and ever with tons of examples and links into JFiddle <link> so the ideas and stuff can be experimented with; talk about information overload.  It's also tough to figure out how the set the various properties in the right place to get things done, and none of the examples did exactly what I needed.  That's why patience was required.  I didn't want to get disgusted with it and just give up.

I finally got one working.  If you put your pointer inside the chart, you can get the actual reading of any point.  If you click, drag across the chart, you can zoom in and see it closer.  If you have a touch screen, you can use the 'pinch' and 'expand' to zoom in and out; when your zoomed in, you can slide the chart right and left to see the data.  By clicking on the labels at the bottom, you can turn off one of the series to make the remaining one more clear.  I could put up a lot of things to examine and choose which one by turning the others off.  I'm not sure I like the colors yet, but they're easy to change.

The beauty of this chart is that it's totally javascript.  That means it works on the phone, so I can add it to the Android app I have:

OK, the chart looks silly.  But look what happens when you turn the phone into portrait mode:

Is that slick or what?  Using the touchscreen I can zoom around it and select points to my hearts content.

The data shown is taken from my legacy feed on Xively and was reasonably easy to grab.  The only real problems I had getting it going was prowling through the documentation on HighCharts; it was all there, but like finding a needle in a haystack.

If you want to steal my example and modify it for your own use, it's on GitHub, drop a comment here and I'll post the link.


  1. Hi Dave, I would like to teach myself a bit in HighCharts, so I have stolen your code in the frame, pasted it into file and run it in Chrome. But I get the empty window with background color and nothing more. I'm lama in html, so can you give me some advice what may be wrong ?? It seems that the chart script is not loaded or something like this ... Thanks in advance. Vladimir

    1. There are some strange things that can happen when you do a 'view source', 'save'. The way I do it is to put the mouse inside the frame, 'view source', highlight the entire text showing and copy-paste into a file. Save the file as html and give it a try.

      However, I suspect you've already looked at the source to see if it was OK several times, so it's very likely that, for some obscure reason, you're not pulling down data. There's a couple of comments inside the text that you can enable to see what is going on. Look for the // in there and remove those to see the things I looked at when putting it together.

      You can also put some more debugging into the file to check things. To see the console output in the Chrome browser (the one I use) you right-click, and select 'inspect element'. This will bring up a tool on the bottom of the screen that you can choose 'console' and stuff shows up there. Then, once you get a little information, Google is your best friend.