Rickshaw is a JavaScript toolkit for creating interactive time series graphs
shutterstock.github.com
shutterstock.github.com
Check it out at: http://www.highcharts.com/
I'm unlikely to even considerer another library until they match that feature.
flot.js has zooming/panning capabilities - http://people.iola.dk/olau/flot/examples/selection.html
This, assuming I understood what you were getting at.
Needless to say, HighCharts is slick - but flot.js has a nice price tag :)
There's also a "range selector" mode if you prefer the two-pane zooming interface: http://dygraphs.com/tests/range-selector.html
There's a little more info in our recent blog post about this too: http://bits.shutterstock.com/?p=103
In particular, here's an example where you can switch between stacked, percentage, and line views; toggle on and off each data series; re-order the stack with drag-and-drop; zoom in to a time slice; add smoothing; add annotations, etc:
http://shutterstock.github.com/rickshaw/examples/extensions....
It can make a difference, having this functionality around when you're trying to dig in and read your data.
But "interactive" means you can interact. These charts seem to be almost entirely passive. Sure, you can build a UI that refreshes the chart with new data or new parameters, and you can read off values corresponding to the mouse pointer position in the chart. A truly interactive chart would let you zoom in and out (ie., change the resolution of the X axis), select ranges of values and so on. To truly support the claim for interactivity you should include a few interactive examples.
One last nitpick: The technically precise word for this kind of thing is chart, not graph.
dchester's comment (http://news.ycombinator.com/item?id=3340609) links to http://shutterstock.github.com/rickshaw/examples/extensions...., which demonstrates some of Rickshaw's interactions.
Pretty awful choice of UI; wonder if the basic chart classes are designed to be extended with a better zoom UI?
Also, what about fetching of remote data of variable resolution? I might have millions of data points on the server; I want the chart to fetch a subset of the data based on the current resolution and bounding box of the axis.
It has two. There is one below the legend on the left hand side. That smooths your data by aggregating the plots.
It also has the zoom slider under the graph. Or chart, rather.
When you mouse over the series items on the top left corner, the data of the item you are mousing over is highlighted on the graph.
You can uncheck some of those series items to focus on particular data, e.g. look at New York and Tokyo and London.
You can re-order them by dragging them.
You can switch the view between stacks, percentage, stream and lines.
"Pretty awful choice of UI"
There are some nice things that come with the slider across the bottom of the graph. When I grab an end of the slider and move it, I can see exactly what is happening to the data as I move it, and I can let my eye determine where I should settle.
The question of "how do I get back" isn't on my mind. I know how to do that.
I can pin the left hand side somewhere and watch new data come into view, or pin the right hand side somewhere to make the view momentarily static.
"Also, what about fetching of remote data of variable resolution"
You can fetch your data however you want to.
Edit: I forgot to mention that the zoom slider there is just a DOM element. You can dress it up any which way.
I'm confused about what the smoothing is supposed to be doing, since it's changing the X axis. I would have expected it maintain the X axis and simply choose fewer points (and use an averaging algorithm to produce smooth curves).
When aggregating, can one easily insert a "rug" plot (see http://www.cl.cam.ac.uk/~sjm217/projects/graphics/faithful.h...) to indicate sample frequency?
The slider, though, has several problems:
- Lacks labels. The slider operates on some unknown scale of values. So I can't use it to zoom in/out to a specific time range, for exampel.
- Once I have found a zoomed subset, the slider does not let me scroll within it. Clicking on the "filled" part of the slider should modify the subset.
- In fact, there's no way to scroll at all.
- There's no single mechanism to zoom out. Zooming out requires two drag operations.
Yes, I'm sure this is just an example, but the main reason to use a chart library is so you don't have write one yourself, which is why I'm asking about these things. I have a specific app in mind that requires time-series charts, but I'm still looking for the right library that gives me the features I need. I looked at Dygraphs (http://dygraphs.com/) but it seems a bit limited.
If you have, for example, 300 data plots collected once a second for 5 minutes, and that looks too noisy when you paint your chart, you may choose to smooth the lines by aggregating the data into buckets that are larger than a second. For instance, you might choose to sum all the plots in a minute, and divide that sum by the number of plots that were in that minute, thus reducing 60 plots to one while retaining an accurate representation of your data.
When you drag that slider, you are aggregating data into larger buckets.
Good luck in your travels finding a chart library that works for your application, and if you try Rickshaw and hit any stumbling blocks, hit us up on github.
Cheers!
My main issue is that Dygraphs is (as far as I can see) a monolithic chart renderer. Everything is built into a single renderer that takes a huge amount of options. It does not seem to be possible to add more axes, add custom extensions (like "rug" plots) or behaviours (like selections), because of its monolithic nature.
My favourite plotting system is R, which essentially divides the rendering into a large set of drawing operations that can be tweaked and combined in all sorts of ways. R is not a model I would want anyone to follow in a charting library (it's much too "free form" and does not have an underlying drawing model beyond vectors), but it's a model to follow in terms of extensiblity.
Some stuff I miss in Dygraphs:
- I want the user to be able to select a range of X axis using the mouse (Dygraphs uses this for zooming), and keep zooming separate.
- I want the user to be able to select a chart line/bar by clicking on it with the mouse.
- I want to be able to scroll the X axis programatically.
- I want to fetch remote data at varying resolutions matching the chart zoom level. From what I can see, this is not trivial with Dygraphs.
- Rug plots, histograms (bar charts) and error bar support.
- Stacked area plots.
In a well-architected chart system I would be able to add new graphical components (the Google Maps API is a good example) and override behaviour by adding event handlers that interacted with the chart API. I don't see how to do this with Dygraphs.
Probably a dumb question but I don't keep up on client-side technology as much as I should so I was curious.
http://shutterstock.github.com/rickshaw/examples/y_axis.html
We'll fix that, thanks!
https://github.com/lukeschlather/holdengraph
These microcontrollers don't have much processing power, so offloading rendering onto the browser is actually an absolute necessity.
But I'm louder on the internet and have been working with Rickshaw for a while, so I get to say "thanks" [grin].
Let us know of any roadblocks you hit if you take it for a spin!