Creating Charts with Rickshaw.js

I was recently introduced to Rickshaw, an open source JavaScript charting framework built on top of D3.js. Rickshaw specializes in creating timeseries graphs.

When recently integrating Rickshaw into a project, I ran into a few hurdles that weren’t terribly well documented or explained online. In this post I’ll provide an overview of Rickshaw and go into some detail on how several of the Rickshaw add-ons work, so you can tweak your graph to look just the way you want. Code for all of the below examples can be found in this Github repository.

Rickshaw Basics

Like most charting libraries, you provide Rickshaw with an HTML element to draw your graph inside of. For example, suppose that we have a div element with the id attribute value mychart.

var myGraph = new Rickshaw.Graph({
    element: document.querySelector("#mychart"),
    width: 500,
    height: 250,
    renderer: 'lineplot',
    series: [
    {
      name: "Series 1",
      color: "steelblue",
      data: [{x: 0, y:10,},{x: 1, y:3,},{x: 2, y:8,},{x: 3, y:15,},{x: 4, y:12,},
             {x: 5, y:8,},{x: 6, y:3,},{x: 7, y:5,},{x: 8, y:2,},{x: 9, y:1,},{x: 10, y:4,},
      ]
    },
    {
      name: "Series 2",
      color: "green",
      data: [{x: 0, y:5,},{x: 1, y:3,},{x: 2, y:8,},{x: 3, y:6,},{x: 4, y:3,},
             {x: 5, y:12,},{x: 6, y:13,},{x: 7, y:14,},{x: 8, y:12,},{x: 9, y:8,},{x: 10, y:9,},
      ]
    }]
  });
  myGraph.render();

The above code will produce the following Rickshaw graph:

Additional Graph Features

There are several ways to further customize and decorate a Rickshaw graph. Let’s talk about a few of the basic options.

Graph Type

The above graph was produced with the lineplot renderer. You can change the type of graph (without changing the data) by changing the renderer when creating the graph. Rickshaw supports a variety of renderers (e.g., bar, line, scatter plot, area graphs, etc.).

Hover Details

Adding mouse hover details to Rickshaw is simple.

var graphHover = new Rickshaw.Graph.HoverDetail({
  graph:myGraph
});

There are hooks that you can use when creating the HoverDetail to change the format of the hover details.

Graph Axes and Legend

Axes can be added inside of the graph, or to additional HTML elements next to the graph. For example, adding an X and Y axis to neighboring elements can be done like this:

var xTicks = new Rickshaw.Graph.Axis.X({
  graph:myGraph,
  orientation: "bottom",
  element: document.querySelector("#xaxis")
});
var yTicks = new Rickshaw.Graph.Axis.Y({
  graph:myGraph,
  orientation: "left",
  element: document.querySelector("#yaxis")
});

Similarly, a legend can be added by providing an HTML element to draw the legend in:

var myLegend = new Rickshaw.Graph.Legend({
  graph:myGraph,
  element: document.querySelector("#mylegend")
});

The above hover, axes, and legend additions look like this:

jQuery Additions

There are a few Rickshaw add-ons that require jQuery and/or jQueryUI. These features are nice because they just work when you wire them up. You can add functionality to toggle each data series on and off via:

var toggling = new Rickshaw.Graph.Behavior.Series.Toggle({
  graph: myGraph,
  legend: myLegend
});

Rickshaw also includes nice preview slider functionality to zoom in on a specific range of the graph. A simple zoom slider can be added via:

var rangeSlider = new Rickshaw.Graph.RangeSlider({
  graph: myGraph,
  element: document.querySelector("#rangeSlider")
});

A nicer looking preview slider that displays a minimap of the graph can be added via:

var previewSlider = new Rickshaw.Graph.RangeSlider.Preview({
  graph: myGraph,
  element: document.querySelector("#previewSlider")
});

Additional Resources

The best resources for learning more about Rickshaw are the Rickshaw tutorial, example gallery, and source code.