3

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

user94628
  • 3,641
  • 17
  • 51
  • 88

4 Answers4

6

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

Drew Noakes
  • 300,895
  • 165
  • 679
  • 742
leggetter
  • 15,248
  • 1
  • 55
  • 61
3

You might want to look at d3.js for the client-side drawing of the "live" chart. It works really well, and doing things like live bar (or other type) charts is really easy, with syntax similar to JQuery. As for getting the data over the WebSocket, the various websocket packages (full disclosure--I work for Kaazing, that pioneered WebSockets) can pretty much all do this.

Dave Combs
  • 281
  • 2
  • 17
1

Have a look at XSockets.NET, there is an Nuget-Package available for setting up a WebSockets/Realtime service, the JavaScript API is easy to get started with. You can also use the hosted version , where you run JavaScript "only" , More info regarding XSockets.NET will be found on http://xsockets.net

The hosted service on http://live.xsockets.net for "javascript" version, A playground for JavaScript developers found on http://xfiddle.net/

Regarding Graph's, there is an example on jsfiddle, it contains an Wijmo chart (bar), that reacts on user input's in realtime. There is an link to that example in xfiddle.net

dathor
  • 174
  • 1
  • 3
1

For new visitors to this old question, the following is currently one of the simplest and most straightforward examples of websocket use to change a plot in real-time (implemented using google charts paired with either python or perl):

https://github.com/albertobeta/UberSimpleWebsockets

Albz
  • 1,982
  • 2
  • 21
  • 33