Rickshaw Examples

Getting Started

Bare minimum to get a graph on the page with a couple of points.

Lines & Toggling

Basic lines with a legend and x-axis ticks and labels. Toggle lines on and off by clicking checkmarks.

Interactive Real-Time Data

Dig into continously updating data. Change line interpolations, zoom in on the x-axis, apply smoothing, stack and un-stack, drag and drop to re-order the stack, toggle data on and off.

Scatter Plot with Multiple Series

Basic scatter plot with two overlapping series.

Stacked Bars with Deterministic Colors

Requests per second by HTTP status as stacked bars. Colors come from a deterministic palette that can carry across graphs.

Color Schemes

A number of color schemes are built in. You can specify your own too.

Data via AJAX / JSONP

Ask Rickshaw to fetch data via AJAX, rather than specifying in the constructor. There's a JSONP impelementation too.

Y-Axis Tick Marks and Grid Lines

Draw Y-Axis tick marks and grid lines with abbreviated numbers.

Fixed Window Series for Streaming Data

Fixed-size time window, useful for real-time graphs with socket.io.

Hover Details Custom Formatting

Send a custom formatter callback for finer control in hover details.

Subclassed Hover Behavior + Bottom Legend

Subclass hovers to provide an alternate legend at the bottom of the graph.