Highcharts is one of the best graphing library I have come across. It makes all the charts interactive with zooming, auto scaling, dynamic visibility of various lines/metrics etc.
Highcharts' zoomable graphs are a killer feature at the moment. They are not difficult to use, and I use them to show 30 days worth of data (2880 points per graph) in my monitoring apps. They work on mobile and web out of the box, too.
I'm unlikely to even considerer another library until they match that feature.
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:
Looks good. I like how's it's layered on top of d3.
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.
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.
This question is kind of apropos of nothing, but I noticed that one of the example documents [1] has a weird markup structure, lacking tags like HEAD, BODY, etc. Is this just one of those weird accidental things or is this an intentional technique? It kind of reminds me of the dark old days of IE6 workarounds.
Probably a dumb question but I don't keep up on client-side technology as much as I should so I was curious.
If you like this, you may also want to check out dygraphs, an open source library which does something similar and has been around for a few years: dygraphs.com
Check it out at: http://www.highcharts.com/