views:

14

answers:

1

Afternoon all,

I'm looking for a way of presenting near realtime data using line charts within my web application. Specifically, my requirements are as follows:

  1. It should support zooming (with the mouse wheel too!), scrolling, selecting different time ranges, etc.
  2. It should support presenting data at multiple resolutions within a single chart. The default view would be the past 24 hours (using data at one minute resolution), but if the user zoomed out or browsed back further in time then lower resolution data would be used. On the daily view, we'll have 1440 points per line (there'll be at least two). If we lower this to hourly averages when zoomed out further, we're looking at 720 points per month per line. We can lower the resolution further after that too.
  3. Ideally, if the user zoomed into a historical date the graph would poll a server to see if high resolution data was available for that period, and if so, fetch it and update the graph area.
  4. Streaming data support. Namely, the graph would fetch deltas every X minutes and append them to the graph.
  5. We're open to using Flash, Java, Silverlight or pure Javascript for the presentation layer, although Flash would probably be the strongest preference.

I've spent a fair bit of time looking around for something that would fit the bill here and have (surprisingly) not found much. Here's some brief notes from my research:

a) Google Finance charts are pretty much exactly what I want to achieve, but it seems that their public version of these charts (the Annotated Timeline Chart) is comparatively very limited. It does not allow for streaming data, and if you want to redraw graph data (e.g. when changing the selected date range) you get a nasty flicker as the chart area reloads with the new data. b) Timepedia Chronoscope charts sound promising at first glance, with support for incremental data loading. However, there seems to be no documentation or examples of this (all examples use a static dataset from .js files) c) We've seen charts such as Open Flash Chart and others like this, but they don't have the "wow factor" that Google Finance charts do.

Any suggestions welcome!

A: 

I would suggest Highcharts - very neat SVG and javascript-based charts. There's also an example called Live Random Data which updates a spline ever second - this would be useful for your streaming requirements. The zooming and scrolling is available: Master Detail Chart, but everything depends on how much data you'll be pointing out.

In my experiments earlier this year, I managed to have around 20 graphs with over 40 plots each running smoothly in Firefox, but more than that could give out tiny delays, so in that sense yeah, you'll be better off with Flash, although I doubt that anybody would be able to read 20 splines at a time ;)

Hope that helped. Cheers!

kovshenin
Thanks, that looks interesting, I'll definitely give that a shot!
SamC