Real time data and retrieval plotting

Question

So my question is as follows: I'm working on a mobile application that takes data from a vital sign sensor and sends to a telehealth server, so that a physician is able to retrieve the data from the server in real time as a plotted curve.

As I have a very weak background on this, my question is of two parts: a) how do I retrieve the data from the server in real time and b) can I use HTML5 libs or anything similar like HighCharts or Meteor charts or ZingCharts to have them plotted or is it impossible? Please be very specific as again I have a weak background on this :)

Merrily Merrily · Accepted Answer · 2014-05-27T17:49:16

In ZingChart, you can do this in two ways:

Method 1 - Via Websockets - EX: http://www.zingchart.com/dataweek/presentation/feed.html

The websocket transport is part of the refresh/feed section, its attribute can be found here: Graph >> Refresh section of the ZingChart JSON docs. In addition, a server socket component is required and it has to follow some standard protocol in order to allow connectivity and transport with the client socket.

To get specific:

    ###############################
# NodeJS code
###############################

#!/usr/bin/env node

var WebSocketServer = require('websocket').server;
var http = require('http');

var server = http.createServer(function(request, response) {
  response.writeHead(404);
  response.end();
});
server.listen(8888, function() {
  console.log((new Date()) + ' Server is listening on port 8888');
});

wsServer = new WebSocketServer({
  httpServer: server,
  autoAcceptConnections: false
});

function originIsAllowed(origin) {
  return true;
}

wsServer.on('request', function(request) {
  if (!originIsAllowed(request.origin)) {
    request.reject();
    console.log((new Date()) + ' Connection from origin ' + request.origin + ' rejected.');
    return;
  }

  var type = '',
    method = '',
    status = 0;

  var connection = request.accept('zingchart', request.origin);

  connection.on('message', function(message) {

    function startFeed() {
      console.log('start feed');
      status = 1;
      if (method == 'push') {
        sendFeedData();
      }
    }

    function stopFeed() {
      console.log('stop feed');
      status = 0;
    }

    function sendFeedData() {
      if (method == 'push') {
        var ts = (new Date()).getTime();
        var data = {
          "scale-x": ts,
          "plot0": [ts, parseInt(10 + 100 * Math.random(), 10)]
        };
        console.log('sending feed data (push)');
        connection.sendUTF(JSON.stringify(data));
        if (status == 1) {
          iFeedTick = setTimeout(sendFeedData, 500);
        }
      } else if (method == 'pull') {
        var data = [];
        var ts = (new Date()).getTime();
        for (var i = -5; i <= 0; i++) {

          data.push({
            "scale-x": ts + i * 500,
            "plot0": [ts + i * 500, parseInt(10 + 100 * Math.random(), 10)]
          });
        }
        console.log('sending feed data (pull)');
        connection.sendUTF(JSON.stringify(data));
      }
    }

    function sendFullData() {
      var data = {
        type: "bar",
        series: [{
          values: [
            [(new Date()).getTime(), parseInt(10 + 100 * Math.random(), 10)]
          ]
        }]
      };
      console.log('sending full data');
      connection.sendUTF(JSON.stringify(data));
      if (status == 1) {
        if (method == 'push') {
          setTimeout(sendFullData, 2000);
        }
      }
    }

    if (message.type === 'utf8') {
      console.log('************************ ' + message.utf8Data);
      switch (message.utf8Data) {
      case 'zingchart.full':
        type = 'full';
        break;
      case 'zingchart.feed':
        type = 'feed';
        break;
      case 'zingchart.push':
        method = 'push';
        break;
      case 'zingchart.pull':
        method = 'pull';
        break;
      case 'zingchart.startfeed':
        startFeed();
        break;
      case 'zingchart.stopfeed':
        stopFeed();
        break;
      case 'zingchart.getdata':
        status = 1;
        if (type == 'full') {
          sendFullData();
        } else if (type == 'feed') {
          sendFeedData();
        }
        break;
      }

    }
  });

  connection.on('close', function(reasonCode, description) {
    status = 0;
    console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.');
  });
});

###############################################
# Sample JSON settings for socket transport
###############################################

refresh: {
    type: "feed",
    transport: "websockets",
    url: "ws://198.101.197.138:8888/",
    method: "push",
    maxTicks: 120,
    resetTimeout: 2400
}

or

refresh: {
    type: "feed",
    transport: "websockets",
    url: "ws://198.101.197.138:8888/",
    method: "pull",
    interval: 3000,
    maxTicks: 120,
    resetTimeout: 2400
}

Method 2 - Via API - EX: http://www.zingchart.com/dataweek/presentation/api.html

In the case you described, this would involve setting intervals of time at which you would like to retrieve data from your server, and then pass that data via the API. Check out the "Feed" section in API-Methods section of the ZingChart docs.

Real time data and retrieval plotting

1 Answers