plot - 实时数据和检索绘图

Question

所以我的问题如下：我正在开发一个移动应用程序，该应用程序从生命体征传感器获取数据并发送到远程医疗服务器，以便医生能够以绘制曲线的形式实时从服务器检索数据.

由于我对此的背景非常薄弱，我的问题分为两部分：a）我如何从服务器实时检索数据，b）我可以使用 HTML5 库或类似的东西，如 HighCharts 或 Meteor 图表或 ZingCharts他们有计划还是不可能？请非常具体，因为我对此的背景很薄弱:)

Answer 1

在 ZingChart 中，您可以通过两种方式做到这一点：

方法 1 - 通过 Websockets - 例如：http ://www.zingchart.com/dataweek/presentation/feed.html

websocket 传输是 refresh/feed 部分的一部分，它的属性可以在这里找到：ZingChart JSON 文档的 Graph >> Refresh 部分。此外，还需要一个服务器套接字组件，它必须遵循一些标准协议才能允许与客户端套接字的连接和传输。

要具体：

    ###############################
# 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
}

方法 2 - 通过 API - 例如：http ://www.zingchart.com/dataweek/presentation/api.html

在您描述的情况下，这将涉及设置您希望从服务器检索数据的时间间隔，然后通过 API 传递该数据。查看 ZingChart 文档的 API-Methods 部分中的“Feed”部分。