About Xively

Xively is a platform for managing connected products. It allows you to connect products to the rest of the world by providing secured communication channels into which products can publish data (time-series for example) and from which consumers (e.g. mobile apps) can read. Xively uses MQTT as the main protocol to interact with the channels and it also lets you read from the latter through a REST API.

How Xively and scriptr.io collaborate?

Obtaining data from devices is the first step to the implementation of an IoT application and Xively is extremely efficient at this. Turning that data into actionable information to take decisions or trigger business processes is the role of scriptr.io. Therefore, in order to facilitate the way you can leverage product data from within your scripts, we provide you with a connector that wraps the communication with Xively’s API.

In the other way around, it is also possible to use scriptr.io’s MQTT bridge to publish data from your scripts to a Xively topic. Note though that this bridge is not part of the numerous out-of-the-box features you get when signing-up to a scriptr.io fremium account.

You can try the online demo or continue reading to see how to implement a sample application in the next paragraphs.

Sample application: inventory monitor

In the remainder of this post, we’ll see how simple it is to read time-series data from a Xively topic using our connector. We’ll build on the sample “vending machine” scenario that was used in a preceding post.In this post, we’ll specifically elaborate on how to use Xively to read time-series data that are published by the vending machine to a Xively topic. The published data relates to the remaining quantity of the different items that are stored in the machine. We’ll use our Xively connector to read the data from a script where we aggregate and transform the data into a format that can be used to display the evolution of the inventory in a simple dashboard in real-time, using a Google chart script.

Pre-requisites

Note: creating an Xively account automatically provides you with default topics and more specifically a time-series topic from which you write/read time-series data. We’ll use the latter in this example.

Deploy the Xively connector

From your workspace import the Xively connector by clicking in the lower left corner of the screen on “+New Script” > “Import Modules”. Scroll the list of available connectors down to “Xively” and click on “Import”

Connect to Xively

In a new script, import the xclient module

var xclient = require("modules/xively/xivelyclient.js");

Then create an instance of the Xively client, passing your Xively credentials

var xivelyCredentials = {
  
  "emailAddress": "your_email",  
  "password": "your_xively_password",  
  "accountId": "your_xively_account_id"
};

var xively = new xclient.Xively(xivelyCredentials);

Read from time-series

Using your Xively client, just call the retrieveLatestTimeSeries() method, specifying how many records you need to be returned:

var data = xively.retrieveLatestTimeSeries(80);

That’s it. You’ve just read 80 records from the time-series topic in your Xively account (we assume some data is being publish to the topic).

Transform time-series data into actionable data

We’ll use scriptr.io to transform the time-series data into a data structure that can be displayed as a line chart, i.e. we need to turn the received structure:

[{"time": "timestamp", "category": "some_category", "numericValue": some_number}, ... // 79 more of these]

into the following:

"cols":[
{"id":"","label":"some_category","pattern":"","type":"string_or_number"},
... // as many columns as there are categories
],
"rows":{"c":[
{"v": value_for_first_category}, {"v": value_for_second_category}, ...},
... // as many rows as there are time-stamps
]}

First step is to group time-series data by date-time: this is done by looping through the received time series and grouping all time-series that were issued at the same time into a same object:

var sortedData = {};
for (var i = 0; data && i < data.length; i++) {
  
  var time = data[i].time; // time is used as a key
  if (!sortedData[time]) {      
    sortedData[time] = {}; // if key does not exist in sortedData add it
  }
    
  sortedData[time][data[i].category] = data[i].numericValue; // add time-series as property of object related to the time key
}

Second step is to loop through the sorted data and create the line-chart structure

var rowList = [];
for (var item in sortedData) {
    
  var dateTime = new Date(item);
  var values = [{"v":dateTime.getHours() + ":" + dateTime.getMinutes()}];
  values.push(sortedData[item]["temperature"] ? {"v":sortedData[item]["temperature"]} : {});
  values.push(sortedData[item]["coke"] ? {"v":sortedData[item]["coke"]} : {});
  values.push(sortedData[item]["coke-light"] ? {"v":sortedData[item]["coke-light"]} : {});
  values.push(sortedData[item]["kitkat-milk"] ? {"v":sortedData[item]["kitkat-milk"]} : {});
  values.push(sortedData[item]["kitkat-dark"] ? {"v":sortedData[item]["kitkat-dark"]} : {});
  rowList.push({"c": values});
}
 
// our vending machine contains items of type "coke", "coke-light", "kitkat-dark" and "kitkat-milk"
// we also need to display the variation of the temperature, to correlate it to the evolution of the inventory
var lineChart =  { 
  "cols":[
    {"id":"","label":"dateTime","pattern":"","type":"string"},
    {"id":"","label":"temperature","pattern":"","type":"number"},
    {"id":"","label":"coke","pattern":"","type":"number"},
    {"id":"","label":"coke-light","pattern":"","type":"number"},
    {"id":"","label":"kitkat-milk","pattern":"","type":"number"},
    {"id":"","label":"kitkat-dark","pattern":"","type":"number"}
  ],
  "rows":rowList
};

return lineChart;

Display the evolution of the inventory in a line chart

As mentioned, we’ll use scriptr.io’s very efficient Google chart scripts to display the transformed data. Save the above code into a script – let’s call it “timeseries” – and create a new Google chart script by clicking on “+New Script” > “Google Chart”. Select the “timeseries” script as a data source script:
timeseries-datasouce
Click on the “Charts” tab and select “lines”. Scriptr.io automatically invokes the “timeseries” script and usese data it returns to build the line chart.
timeseries-linechart

Get the code

You can import the code of the sample application from Github

Try it!

We’re exposing an online version of the sample application, with real data (updated every 30 minutes).