Using the Rickshaw graphing library with Ember – utilising Ember's observer pattern to automatically update the Rickshaw graph when any value in the model changes, and even when models are added and/or removed from the collection.
An example of the automatic updating of graphs using Ember's observer pattern: https://dl.dropboxusercontent.com/sh/kgs9r55hguttkjf/qZ-pBUYz-a/example/dropbox/index.html.
You'll be glad to know that if you already know Rickshaw, we haven't changed anything! So how does it work? Well, instead of instantiating
Rickshaw.Graph, instead instantiate
var graph =;
If you're perceptive, you'll notice the only difference is that instead of specifying the array for the
property attribute, you're instead supplying the property name on the model – we also supply the
collection: collection of models to take the data from;
property: property name which we'll pluck from the collection;
Once you've configured the Rickshaw class, you can go ahead and manipulate your Ember models as you usually do, and
Rickshaw.Graph.Ember will update itself when necessary.
Sometimes there is not enough data to create the graph, therefore to display a message when there is insufficient data, create a node with the class name
no-data inside of your graph container (
age-distribution-graph in the example) and we'll do the rest!
Rickshaw supports plotting multiple layers, and because Rickshaw supports it, so do we! By now it should be self-evident how this works if you're familiar with Rickshaw:
var graph =;
You'll be happy to know that you can have as many groups as you like!
We make it easy for you to write unit tests for your graphs. Simply pass in the options minus the
element item, and we'll create an empty node to use for testing.