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

Interpolated Colors

Interpolate color schemes for graphs with many series.

Data via AJAX / JSONP

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

Y-Axis Tick Marks and Grid Lines

Draw y-axis tick marks and grid lines with abbreviated numbers.

Custom Values on the X-Axis

Add custom values and custom formatting along the x-axis.

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.

Scaled Series

Two series normalized with different scales, with two different scaled Y-axis.

Log and Absolute Scale

One series drawn using log and absolute scale on one graph.

Multiple Renderers

Bars, lines, area, and scatterplot graphs all in one setting.