Foobot is a smart air quality sensor that can monitor the levels of various toxic compounds in the environment, as well as other data such as temperature and humidity. All the data it collects gets automatically uploaded to the cloud where it’s available through their API. I used scriptr.io’s Google charts feature to create a live chart that shows the data collected by my Foobot in the past 24 hours. Let’s take a look at how I designed it.

An API key is required to use their API, so I stored mine in a scriptr.io file at foobot/config so that I wouldn’t have to commit my key to Github (see example config file here). Foobot’s API possesses a couple different methods that I utilized; one for retrieving the ID of a device, and another that lets you get the actual data from that device. The former is really useful if you’re managing a network of Foobots; since I’m only working with one, I was able to just make a request to get my device’s ID and then store it in my config file.

var http = require('http');
var config = require('./key').config;

var target = config.endpoint + '/v2/owner/' + encodeURIComponent(config.username) + '/device/'

var requestParams = {
  url: target,
  method: 'GET',
  headers: {
    'X-API-KEY-TOKEN': config.key
  }
};

return http.request(requestParams).body;

Once I had the ID of my Foobot, I used the Get Last endpoint on their API to retrieve the last 24 hours of data from my Foobot. I made a function that made the api call and returned the data, and then formatted the data so that it could be parsed by scriptr.io’s charts module into a graph.

var Foobot = require('./api');

newData = Foobot.GetLast24Hours(86400, 360);

var data = JSON.parse(newData);

 
var formattedData = [[
  'Time',
  'Volatile\nCompounds\n(ppb)',
  'CO2 (ppm)'
]];
 
data.datapoints.forEach(function(row, ind){
    formattedData.push([
      dateFormatter(row[data.sensors.indexOf('time')]),
      row[data.sensors.indexOf('voc')],
      row[data.sensors.indexOf('co2')]
    ]);
});
 
function dateFormatter(timestamp) {
  var date = new Date(timestamp*1000);
  return date.getHours() + ':00';
}
publish("foobot",{result:formattedData});
return formattedData;

Foobot offers a lot of different data about its environment to look at, but I chose to just display the CO2 and volatile compound levels. I linked my data script to a chart; thanks to the way scriptr.io charts work, everytime the chart is rendered on a webpage my script runs and gets the most recent data from my device, producing a new chart like the below. In addition, by using the wss feature on scriptr.io charts, everytime I run the script, the chart will be updated without needing to reload the page. That’s the purpose of the call to publish on the second to last line; it sends the data out on a channel called “foobot”, which the chart is linked to.

All the scripts I wrote during this project are available on Github here. If you’re planning on using scriptr.io to read information from your own Foobot, take particular note of the API script available here. It contains the generalized functions I used to interact with Foobot; if you copy paste the script into your scriptr.io IDE, you can use the functions in other requests simply by requiring it.