Plotting Xively timeseries data using Rickshaw

Xively (formerly Cosm, formerly Patchube) now has a Javascript library for their API. I have been meaning to learn the Rickshaw library for awhile as it comes highly recommend from several people. It turned out to be a doddle to use. I just mixed in the moment.js library to do some date munging and was able to knock up some graphs in an hour or so.

Air Quality Egg

AirQualityEgg NO2 data

AirQualityEgg NO2 data

Current cost electricity usage


Current cost electricity data

Current cost electricity data

These two data source aren’t pumping out data anymore but you can see an example here.


The code

The code is also on github.


  1. sarfata · June 12, 2013

    Hi Jason!

    Great post! Thanks a lot for sharing! I improved a little bit on your idea and built this generic Xively feed viewer:

    Still working on it but it is already much better than Xively dashboard 😉


  2. Marty · October 7, 2013

    Hey Jason,

    I am new to Xively data retrieval and I am still trying to get my head around it. However I can’t seem to view the live versions of your graphs. Am I missing something?


  3. geekskunk · March 23, 2014

    Hi Jason,
    xively-rickshaw is awesome stuff. I am plan to use for historical data for my RPi weather station project.

    Question: Line Graph chart seem to show 0 at minimum, even if the minimal data point is 30 (for example). Is there a way to set chart minimum other than 0?


    • geekskunk · March 25, 2014

      Here is example of what I was referring to:

      Also, if there is a certain credit/link you would like on my page (since I heavily used your xively-rickshaw I am happy to do so.)

      Another oddity I noticed is if I do a pull at the interval for 3 months or 1 year I just get a graph spanning the time data points exist, just at the smaller sample size. Might be nice to represent the entire duration in the x-axis. Perhaps such a way exists, I just need to look closer at my setup. Maybe this also becomes a non-issue when my data set actually spans the time of the historical queries (which it does not yet.)

      • Jason Neylon · April 2, 2014

        Hi Jay,

        Glad it was helpful & thanks for the credit/link. You can set minimums for the graph y axis (as documented here using the min param when you initialize the graph.

        var graph = new Rickshaw.Graph( {
        element: document.querySelector("#chart"),
        width: 640,
        min: 100,
        height: 400,
        renderer: 'line',
        series: [
        data: data,
        color: '#6060c0',
        name: unit

  4. Dan · April 11, 2014

    Would it be possible to explain how to simply add more than one Channel to a single graph?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s