

Rickshaw is a JavaScript toolkit for creating interactive time series graphs - mars
http://shutterstock.github.com/rickshaw/

======
BIackSwan
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.

Check it out at: <http://www.highcharts.com/>

~~~
synnik
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.

~~~
danvk
dygraphs has had that feature for about five years :)

There's also a "range selector" mode if you prefer the two-pane zooming
interface: <http://dygraphs.com/tests/range-selector.html>

~~~
BIackSwan
I don't see the small window which shows the x & y co ordinates of the point
you are hovering at. Is it it turned off by default?

~~~
danvk
Nope, it's in the top right of the chart. It shows values when you hover over
the chart.

------
dchester
Thanks for taking a look!

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....](http://shutterstock.github.com/rickshaw/examples/extensions.html)

It can make a difference, having this functionality around when you're trying
to dig in and read your data.

------
lobster_johnson
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.

~~~
douglashunter
"A truly interactive chart would let you zoom in and out ... and so on."

dchester's comment (<http://news.ycombinator.com/item?id=3340609>) links to
[http://shutterstock.github.com/rickshaw/examples/extensions....](http://shutterstock.github.com/rickshaw/examples/extensions.html),
which demonstrates some of Rickshaw's interactions.

~~~
lobster_johnson
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.

~~~
douglashunter
"Ok, that example has a slider"

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.

~~~
lobster_johnson
> 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).

When aggregating, can one easily insert a "rug" plot (see
[http://www.cl.cam.ac.uk/~sjm217/projects/graphics/faithful.h...](http://www.cl.cam.ac.uk/~sjm217/projects/graphics/faithful.html))
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.

~~~
danvk
I'm curious what ways you found dygraphs "a bit limited". It can do quite a
bit more than people realize at first glance.

~~~
lobster_johnson
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.

------
smhinsey
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.

<http://shutterstock.github.com/rickshaw/examples/y_axis.html>

~~~
douglashunter
It isn't an intentional workaround, and is an artifact of typing the least
amount of markup possible to make something render.

We'll fix that, thanks!

------
danvk
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

~~~
douglashunter
dygraphs is lovely, nice work there! One of the pieces that I particularly
like is how you handle CSV data.

------
lukeschlather
I wrote a much more rudimentary tool with a similar bent to display
temperature graphs on some microcontrollers.

<https://github.com/lukeschlather/holdengraph>

These microcontrollers don't have much processing power, so offloading
rendering onto the browser is actually an absolute necessity.

------
lincolnpark
Awesome. Maybe you can find a way to work with Mike Bostock on the Cube
project. Add some interactivity to real time graphs.

------
gourneau
These are gorgeous!

~~~
douglashunter
Thanks! Most (read "all") the credit there, as well as the credit for the
other useful parts of the code, belongs to David Chester.

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!

