Computing stuff tied to the physical world

Graphics, oh là là!

In Software on Dec 20, 2012 at 00:01

Graphs used to be made with gnuplot or RRDtool. Both generated on the server and then presented as images in the browser. This used to be called state of the art!

But that sooo last-century …

Then came JavaScript libraries such as Flot, which uses the HTML5 Canvas, allowing you to draw the graph in the browser. The key benefit is that these graphs can be made dynamic (updating through real-time data feeds) and interactive (so you can zoom in and show details).

But that sooo last-decade …

Now there is this, using the latest HTML5 capabilities and resolution-independent SVG:

Screen Shot 2012-12-18 at 22.15.15

See (click through on each one to get details).

That picture doesn’t really do justice to the way some of these tools adjust dynamically and animate on change. All in the web browser. Stunning – in features and in variety!

I’ve been zooming in a bit (heh) on tools such as Rickshaw and NVD3 – both with lots of fascinating examples. Some parts are just window dressing, but the dynamics and real-time behaviour will definitely help gain more insight into the underlying datasets. Which is what all the visualisation should be about, of course.

For an interesting project using SocketStream, Flot, and DataTables, see DaisyCentral. There’s a great write-up on the Architectural Overview, and another page on graphically setting up automation rules:

Screen Shot 2012-12-18 at 22.48.27

This editor is based on jsPlumb for drawing.

Another interesting project is Dashku, based on SocketStream and Raphaël. It’s a way to build a live dashboard – the essence only became clear to me after seeing this YouTube video. As you build and adjust it in edit mode, you can keep a second view open which shows the final result. Things automatically get synced, due to SocketStream.

Now, if only I knew how to build up my fu-level and find a way into all this magic…

  1. Now there is “this”… …and… See (click through on each one to get details).

    (I’d expect a link).

  2. At work, we use Highcharts. It doesn’t provide any statistical features, but for us, it is a good and stable JavaScript-powered graph solution. The graphs are based on SVG and look quite good.

  3. What is your “real-time” need ? 1 Hz ? 10 Hz ? 100 Hz ?

    Thanks for all these informations !

    • I suspect that for home automation, sub-second is enough, i.e. 10 Hz will be plenty. But I do want to keep my options open for considerably faster response times for other projects (given the proper hardware, evidently).

  4. I doubt that you can find a javascript plotting library able to refresh a graph (from live date) at 10 Hz or faster. But if you do, please tell us !

    Thanks !

    • Oh sorry, didn’t mean that. The system needs to be sub-second responsive to the UI, not the graphs.

  5. Also take a look at D3 ( Has very nice way for specifying the visualization rules.

Comments are closed.