Rickshaw is a JavaScript toolkit for creating interactive time series graphs

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

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

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...., which demonstrates some of Rickshaw's interactions.

[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!