Rickshaw is a JavaScript toolkit for creating interactive time series graphs.
Rickshaw on GitHub
Graphing Toolkit
Rickshaw provides the elements you need to create interactive graphs: renderers, legends, hovers, range selectors, etc. You put the pieces together. See Demo →
Built on d3.js
It's all based on d3 underneath, so graphs are drawn with standard SVG and styled with CSS. Customize all you like with techniques you already know.
Open Source
Rickshaw is free and open source, available under the MIT license. Developed at Shutterstock. We're Hiring!
Getting Started
Here's a minimal but complete working example. We start by pulling in dependencies. A few extensions require jQuery, but here all we need is d3 and the Rickshaw library itself. Instantiate a graph, and then render it. For more along this path, check out the tutorial and also see our examples listing.
Area Graphs
Area
standalone exampleStacked Area
standalone exampleMultiple Area
standalone exampleLines
Line
standalone exampleMultiple Line
standalone exampleBars
Bars
standalone example
var graph = new Rickshaw.Graph({
element: document.querySelector("#chart"),
renderer: 'bar',
series: [{
data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, ...
color: 'steelblue'
}]
});
graph.render();
Stacked Bars
standalone example
var graph = new Rickshaw.Graph( {
element: document.querySelector("#chart"),
renderer: 'bar',
series: [{
data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, ...
color: 'steelblue'
}, {
data: [ { x: 0, y: 20 }, { x: 1, y: 24 }, ...
color: 'lightblue'
}]
});
graph.render();
Multiple Bars
standalone example
var graph = new Rickshaw.Graph( {
element: document.querySelector("#chart"),
renderer: 'bar',
stack: false,
series: [{
data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, ...
color: 'steelblue'
}, {
data: [ { x: 0, y: 20 }, { x: 1, y: 24 }, ...
color: 'lightblue'
}]
});
graph.render();
Scatterplot
Scatterplot
standalone exampleInteractive Legend
Add a basic legend:
var legend = new Rickshaw.Graph.Legend({
graph: graph,
element: document.querySelector('#graph')
});
Add functionality to toggle series' visibility on and off:
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
graph: graph,
legend: legend
});
Highlight each series on hover within the legend:
var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight({
graph: graph,
legend: legend
});
Add drag-and-drop functionality to re-order the stack (requires jQueryUI):
var order = new Rickshaw.Graph.Behavior.Series.Order({
graph: graph,
legend: legend
});
Interactive Hover Details
Show the series value and formatted date and time on hover:
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
graph: graph
} );
Specify formatting callbacks to customize output:
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
graph: graph,
xFormatter: function(x) { return x + "seconds" },
yFormatter: function(y) { return Math.floor(y) + " percent" }
} );
See the custom formatter and subclass examples for more.Annotations
Add toggleable annotations:
var annotator = new Rickshaw.Graph.Annotate({
graph: graph,
element: document.getElementById('timeline')
});
annotator.add(timestamp, message);
annotator.update();
Range Slider
Add a range selector with a slider from jQuery UI:
var slider = new Rickshaw.Graph.RangeSlider({
graph: graph,
element: document.querySelector('#slider')
});
Graphs & Data via AJAX / JSONP
Instantiate a transport to fetch the data and draw a graph:
new Rickshaw.Graph.JSONP({
element: document.querySelector('#chart'),
dataURL: 'http://example.com/data'
});
Transform the data before sending in, and then add other elements once that's done:
new Rickshaw.Graph.JSONP({
element: document.querySelector('#chart'),
dataURL: 'http://example.com/data',
onData: function(d) {
d[0].data[0].y += 1;
return d;
},
onComplete: function(transport) {
var graph = transport.graph;
var detail = new Rickshaw.Graph.HoverDetail({ graph: graph });
}
});
Axes and Tick Marks
Add a basic x-axis with time values:
var xAxis = new Rickshaw.Graph.Axis.Time({
graph: graph
});
xAxis.render();
Add a basic y-axis:
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph
});
yAxis.render();
Override time units on the x-axis:
var time = new Rickshaw.Fixtures.Time();
var seconds = time.unit('second');
var xAxis = new Rickshaw.Graph.Axis.Time({
graph: graph,
timeUnit: seconds
});
xAxis.render();
Format tick values on the y-axis:
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph,
tickFormat: Rickshaw.Fixtures.Number.formatKMBT
});
yAxis.render();
For y-axes outside the graph, specify an axis container element and an orientation:
var yAxis = new Rickshaw.Graph.Axis.Y( {
graph: graph,
orientation: 'left',
element: document.getElementById('y_axis'),
} );
yAxis.render();
For x-axes with numeric or other non-time values:
var xAxis = new Rickshaw.Graph.Axis.X( {
graph: graph
} );
