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


xively.setKey( "YOUR API KEY HERE" );
var startOfYesterday = moment().subtract("day", 1).startOf('day');
var endOfYesterday = moment().startOf('day');
console.log(startOfYesterday);
console.log(endOfYesterday);
var query = {
start: startOfYesterday.toJSON(),
end: endOfYesterday.toJSON(),
interval: 60,
limit: 1000
};
xively.datastream.history( "106267", "NO2_00-04-a3-37-cc-cb_0", query, loadData);
function loadData(data) {
var unit = data.unit.label;
var series = [];
var filtedData = data.datapoints.filter(function(x) { return (x.value < 1000); });
for (var i=0; i < filtedData.length; i++ ) {
var date = moment(filtedData[i].at);
var value = parseInt(filtedData[i].value);
series[i] = {x: date.unix(), y: value};
}
drawGraph(series, unit);
}
function drawGraph(data, unit) {
var graph = new Rickshaw.Graph( {
element: document.querySelector("#chart"),
width: 640,
height: 400,
renderer: 'line',
series: [
{
data: data,
color: '#6060c0',
name: unit
}
]
} );
graph.render();
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
graph: graph
} );
var legend = new Rickshaw.Graph.Legend( {
graph: graph,
element: document.getElementById('legend')
} );
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
graph: graph,
legend: legend
} );
var axes = new Rickshaw.Graph.Axis.Time( {
graph: graph
});
axes.render();
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph
});
yAxis.render();
}

view raw

gistfile1.js

hosted with ❤ by GitHub

The code is also on github.

Plotting Air Quality Egg data using R

I recently got an Air Quality Egg. The Air Quality Egg is a open source hardware project to measure air quality hyper-locally. My egg is located on the balcony of my flat in Brixton, London. The Air Quality Egg device has sensors which read NO2, CO, humidity & temperature and posts the data to Cosm. You can view readings and simple graphs on the Cosm feed page.

Air Quality Egg on the balcony of my flat

Air Quality Egg on the balcony of my flat

Plotting sensor data using R

I wanted to see the trends in the data so I wrote a script in R to curl the data from the Cosm API and plot it using GGPlot.

Here is the script:

install.packages('RCurl')
install.packages("ggplot2")
library(ggplot2)
library(RCurl)
# grab an api key from cosm and put it here
api_key = 'YOUR_API_KEY'
# your feed id
feed_id = '106267'
csv_data = ""
start_date = as.POSIXct("2013/05/07","GMT")
end_date = as.POSIXct("2013/05/08","GMT")
while (start_date < end_date) {
start_date_as_str = format(start_date, format="%Y-%m-%dT%H:%M:00Z")
next_date = start_date + (3 * 60 * 60)
next_date_as_str = format(next_date, format="%Y-%m-%dT%H:%M:00Z")
cosm_url = paste("http://api.cosm.com/v2/feeds/&quot;, feed_id, "/datastreams/NO2_00-04-a3-37-cc-cb_0.csv?start=", start_date_as_str, "&end=", next_date_as_str,"&interval=0", sep="")
csv_data_for_period = getURL(cosm_url, httpheader = c('X-ApiKey' = api_key) )
csv_data = paste(csv_data, csv_data_for_period, "\n")
start_date = next_date
}
data = read.table(textConnection(csv_data), sep = ",", col.names=c("at", "value"))
data$timestamp <- strptime(data$at, "%FT%T", tz = "UTC")
# strip out outliers
data = data[which(data$value < 1000),]
#summary(data)
ggplot(data, aes(timestamp,value)) + geom_point() + geom_smooth() + xlab("Time") + ylab("NO2 PPB")
view raw gistfile1.r hosted with ❤ by GitHub

Here are some example graphs of NO2 over a single day and several days. (Note I don’t have the latest sensor updates so the readings may be a bit off)

Plot of NO2 for a single day

Plot of NO2 for a single day

Plot of NO2 for a 4 day period

Plot of NO2 for a 4 day period

The Internet of Things creates joy and happiness

I’m a member of Brixton Energy, a cooperative in South London that installs solar panels on social housing. The projects are crowd-funded by community members, with some of the profits used to support energy efficiency in the community. We are transparent about what we do and we want our investors to able to see the impact of their investments. One way we are doing this is by sharing how much electricity the panels are generating to anyone who is curious.

Opening up solar generation data

Unemotional data and graphs in solar log

Unemotional data and graphs in solar log

The solar generation data is logged to a website called solar log which came with the solar panel system. I wanted to integrate the data more closely with our website so I hacked together a really nasty script to scrape it from the solar log website and post the generation data to Cosm, the Internet of Things platform. In Cosm you can easily set up automated tweets based on changes to the data. I did just that and created a new twitter account @BES_Generation that tweets when electricity generation for the day exceeds 20, 50, 100, 150, 200 and 250kWh.

An unexpectedly emotional response

I set up the auto tweeting for my own use. First, to make sure that the data was posting successfully to Cosm and second, to get push notifications of how the solar panels were doing without having to visit the solar log website.

I was surprised by how cheerful and happy the tweets made me feel.

It might have been because it was March and winter was finally ending but the combination of sunshine, being involved in a cool environmental project and knowing my investment was doing well was a real buzz!

But then I was even more surprised that other people liked it too:

 

 

The real world causes real emotions

Real infrastructure in the real world - solar panels in Brixton

Real infrastructure in the real world – solar panels in Brixton

Usually data and websites themselves don’t produce an emotional response.

The Internet of Things seems different. It connects us to the physical world which is full of emotions.

In this case each tweet connected me to a community project that I am really proud to be part of and to the instinctive cheerfulness caused by a sunny day.