wildhoney / emberrickshaw

Rickshaw façade for Ember which allows automatic redrawing of graphs using Ember's observer pattern.

Ember Rickshaw

 

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.

Live Demo

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.

Tutorial

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 Rickshaw.Graph.Ember.

var graph = new Rickshaw.Graph.Ember({
    renderer: 'area',
    element: document.querySelector('.age-distribution-graph'),
    width: 500,
    height: 250,
    stroke: true,
    collection: this.get('controller'),
    series: [{
        color: '#cae2f7',
        property: 'age'
    }]
});

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

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

Insufficient Data

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!

Multiple Series Lines

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 = new Rickshaw.Graph.Ember({
    renderer: 'bar',
    element: document.querySelector('.age-distribution-graph'),
    unstack: true,
    width: 500,
    height: 250,
    stroke: true,
    collection: this.get('controller'),
    series: [{
        color: '#afd55e',
        name: 'Age',
        property: 'age'
    }, {
        color: '#ba5ed5',
        name: 'Caught Mice',
        property: 'caughtMice'
    }]
});

You'll be happy to know that you can have as many groups as you like!

Writing Unit Tests

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.

emberrickshaw's Issues

Add an example of ticks on the graph

Gracefully handle no data

Combine models/property attributes into one attribute

Upgrade to Ember 1.0.0

Initial commit with example

Use @each to prevent a potentially expensive iteration over the models

Fail gracefully when no collection/property attributes are defined/invalid

Add variable Y axis

Modify internal __proto__ to inherit from Rickshaw.Graph instead of using toRickshaw()

Add an example to README for multiple series

create a bower package

Add Bower

Use alternative for setting the prototype with an inner function

Host a live demo of the application

Investigate why the bar chart doesn't render

Add deletion example with updating the graph

Support more than one series data

Add example of adding a new cat