Question

I’m trying to find examples or tools that can create a bar graph in a web browser. I’ll be sending the data from the server via a web socket and as the data is received I want the ‘height’ of each bar to change, reflecting the data received.

So the user can see the graph changing as data is received to.

I’ve seen a number of examples, but I can’t see one that will do the above. Something like D3 looks really good but seems to have a steep learning curve and there seem to be quite a few out there it’s getting quite confusing.

I’m looking for something simple and quick to do.

Thanks

Answer 1

What you really need to do is find a simple charting library which supports some form of redraw or a way of binding a data model and detecting changes to that model. The common steps are:

1. Create chart object with initial set of data
2. Draw initial chart
3. Get update over WebSocket connection
4. Update data set
5. Redraw chart

The complexity tends to come in with the libraries as the general process is pretty simple.

Some examples

A realtime charting example which just displays votes and updates in realtime can be found via .net magazine tutorial on Code a real-time survey with HTML5 WebSockets. It uses Pusher, who I work for.

There’s also an example that uses DJ, Python, Pusher and the Twitter streaming API here:
http://bieber.nixonmcinnes.co.uk/

The code can be found here:
https://github.com/nixmc/pusher-d3-demo

Blog post here:
http://www.nixonmcinnes.co.uk/2012/04/20/what-can-we-learn-from-the-real-time-web-and-justin-bieber/

The simplest example

There’s also a video of using Pusher with SmoothieCharts here:
http://www.youtube.com/watch?v=VLTsT30TZYw