Ok, so I made it work and I've put a subset of it here so others can see how I did it.
var starttime = moment().subtract("day", 3);
series['tempoutside']=[
{x:starttime.subtract("second",2).unix(),y:15},
{x:starttime.subtract("second",1).unix(),y:15}
];
graph = new Rickshaw.Graph({
element: document.querySelector("#chart"),
height: 400,
width: 600,
renderer: 'line',
interpolation: 'step-before',
series: new Rickshaw.Series([
{
name: 'temperature',
data: series['tempoutside'],
color: 'blue',
}
], series)
});
xively.datastream.history( "123456789", "tempoutside", query, loadData);
function loadData(data) {
//console.log('Getting ' + data.id + 'data from Xively');
if (data.datapoints != undefined){
//console.log('received ' + data.datapoints.length +' datapoints');
lastdata=data;
var filtedData = data.datapoints.filter(function(x) { return (x.value >0.005); });
for (var i=0; i < filtedData.length; i++ ) {
var date = moment(filtedData[i].at);
var value = parseFloat(filtedData[i].value+0.000001);
series[data.id].push({x: date.unix(), y: value});
}
graph.render();
}
}
In my final code I also removed the dummy initialisation values from the series['tempoutside']
array with .pop()
. I needed them in the array because the graph gets built first off before the data has been returned from xively. When the data does return, the xively.datastream.history()
function calls the loaddata()
callback which pushes the data into the series
array. Also, I'd not understood that you don't need to push data into the graph series array, because the array is passed as a reference when the graph is built. Update the array and then call graph.render()
and it replots it all. Win! This means that multiple calls can be made to Xively to get more data than is available with one API call (limited to 1000 data points). Remember to sort the data by x value before plotting....