Ok, that example has a slider. That slider was hard to spot.
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.
> That smooths your data by aggregating the plots.
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).
- 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.
"I'm confused about what the smoothing is supposed to be doing"
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.
Mind you, I have only looked superficially at Dygraphs -- looked at the examples, documentation and a bit of the source code.
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.
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.