5 ms·

Rickshaw is a JavaScript toolkit for creating interactive time series graphs

92 points by mars 15y ago

gourneau 15y ago
These are gorgeous!
- douglashunter 15y ago
  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!
lukeschlather 15y ago
I wrote a much more rudimentary tool with a similar bent to display temperature graphs on some microcontrollers. https://github.com/lukeschlather/holdengraph https://github.com/lukeschlather/holdengraph These microcontrollers don't have much processing power, so offloading rendering onto the browser is actually an absolute necessity.
danvk 15y ago
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 15y ago
  dygraphs is lovely, nice work there! One of the pieces that I particularly like is how you handle CSV data.
dchester 15y ago
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 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.html 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 15y ago
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 15y ago
  "A truly interactive chart would let you zoom in and out ... and so on." dchester's comment (http://news.ycombinator.com/item?id=3340609 http://news.ycombinator.com/item?id=3340609) links to http://shutterstock.github.com/rickshaw/examples/extensions.html http://shutterstock.github.com/rickshaw/examples/extensions...., which demonstrates some of Rickshaw's interactions.
  - lobster_johnson 15y ago
    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 15y ago
      "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.
BIackSwan 15y ago
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/ http://www.highcharts.com/
- synnik 15y ago
  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.
  - raju 15y ago
    When you say zoomable charts, do you mean like the one here http://www.highcharts.com/demo/dynamic-master-detail http://www.highcharts.com/demo/dynamic-master-detail ? flot.js has zooming/panning capabilities - http://people.iola.dk/olau/flot/examples/selection.html 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 :)
  - danvk 15y ago
    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 http://dygraphs.com/tests/range-selector.html
    - BIackSwan 15y ago
      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 15y ago
        Nope, it's in the top right of the chart. It shows values when you hover over the chart.
smhinsey 15y ago
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 http://shutterstock.github.com/rickshaw/examples/y_axis.html
- douglashunter 15y ago
  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!
lincolnpark 15y ago
Awesome. Maybe you can find a way to work with Mike Bostock on the Cube project. Add some interactivity to real time graphs.

92 points by mars 15y ago

gourneau 15y ago

These are gorgeous!

douglashunter 15y ago
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!

lukeschlather 15y ago

I wrote a much more rudimentary tool with a similar bent to display temperature graphs on some microcontrollers. https://github.com/lukeschlather/holdengraph https://github.com/lukeschlather/holdengraph These microcontrollers don't have much processing power, so offloading rendering onto the browser is actually an absolute necessity.

danvk 15y ago

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 15y ago
dygraphs is lovely, nice work there! One of the pieces that I particularly like is how you handle CSV data.

dchester 15y ago

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 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.html 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 15y ago

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 15y ago
"A truly interactive chart would let you zoom in and out ... and so on." dchester's comment (http://news.ycombinator.com/item?id=3340609 http://news.ycombinator.com/item?id=3340609) links to http://shutterstock.github.com/rickshaw/examples/extensions.html http://shutterstock.github.com/rickshaw/examples/extensions...., which demonstrates some of Rickshaw's interactions.
- lobster_johnson 15y ago
  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 15y ago
    "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.

BIackSwan 15y ago

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/ http://www.highcharts.com/

synnik 15y ago
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.
- raju 15y ago
  When you say zoomable charts, do you mean like the one here http://www.highcharts.com/demo/dynamic-master-detail http://www.highcharts.com/demo/dynamic-master-detail ? flot.js has zooming/panning capabilities - http://people.iola.dk/olau/flot/examples/selection.html 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 :)
- danvk 15y ago
  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 http://dygraphs.com/tests/range-selector.html
  - BIackSwan 15y ago
    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 15y ago
      Nope, it's in the top right of the chart. It shows values when you hover over the chart.

smhinsey 15y ago

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 http://shutterstock.github.com/rickshaw/examples/y_axis.html

douglashunter 15y ago
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!

lincolnpark 15y ago

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