Question

PubNub的Eon Charts针对每个PubNub消息查找 一个JSON对象数据集 。请参阅git hub上的Eon-Chart pubnub-c3.js。

要了解可能出现的数据类型，您可以看到一些PubNub的示例。 PubNub传感器网络示例显示了预期的数据流格式，每条消息有一个对象：https://www.pubnub.com/developers/realtime-data-streams/sensor-network/

包含单个消息JSON的示例如下所示（请参阅上面的实时数据URL）：

{"timestamp":1466007459,"radiation_level":"202","humidity":"79.3726","ambient_temperature":"19.48","sensor_uuid":"probe-180ea910","photosensor":"857.83"}

当你每隔100ms左右发布一次数据时这很有用，但是当你处理更快的采样率（每10到20ms采样一次）时，形成一个对象数组然后发送许多数据对象有时更有利。在一个PubNub消息中。

我的问题在于能够在单个PubNub消息中发送多个JSON对象的数组，然后由eon-charts解析然后呈现，每个JSON数组对象包含它自己的数据键/值对和它们自己的时间戳。

对于那些之前没有使用过PubNub Eon-Chart库的人来说，这是PubNub建议使用上述实时数据流的示例客户端代码：

<html>
  <head>

    <script type="text/javascript" src="http://pubnub.github.io/eon/v/eon/0.0.11/eon.js"></script>
    <link type="text/css" rel="stylesheet" href="http://pubnub.github.io/eon/v/eon/0.0.11/eon.css" />

  </head>
  <body>
    <div id="chart"></div>
    <script>
    // using the example stream from 
    // http://www.pubnub.com/developers/data-streams/sensor-network
    var pubnub = PUBNUB.init({
        subscribe_key: 'sub-c-5f1b7c8e-fbee-11e3-aa40-02ee2ddab7fe',
        ssl: true
    });
    eon.chart({
        pubnub: pubnub,
        history: false,
        channel: 'pubnub-sensor-network',
        limit: 100,
        rate: 10,
        ssl: true,
        debug: true,
        generate: {
            transition: {
                duration: 3
            },
            bindto: '#chart',
            data: {
                x: 'x'
            },
            axis: {
                x: {
                    type: 'timeseries',
                    tick: {
                        format: '%H:%m:%S'
                    }
                }
            }
        },
        transform: function(m) {
            return {
                eon: {
                    'Humidy': m.humidity,
                    'Temperature': m.ambient_temperature,
                    'Light': m.photosensor
                }
            }
        }
    });
    </script>
  </body>
</html>

在上面的例子中，调用eon.chart（带有列出的选项）使用提供的订阅密钥订阅列出的频道（'pubnub-sensor-network'）。在该pubnub订阅上收到新消息后，它将使用转换函数转换数据：

transform: function(m) {
            return {
                eon: {
                    'Humidy': m.humidity,
                    'Temperature': m.ambient_temperature,
                    'Light': m.photosensor
                }
            }
        }

这会将任何可能不是Eon-chart所期望的JSON转换为它可以理解的格式，并在处理/用于更新图表之前调用它。

我的感觉/猜测是我想用来遍历每个JSON对象（其中多个将包含在每个PubNub消息中）的迭代代码应该添加到每次调用的transform函数中。收到新的PubNub消息。

pubnub-c3.js中包含的eon-chart主要功能还包括检索历史记录的pubnub消息数组的选项（假设您已为pubnub键/通道启用了历史记录）。

这很重要的原因是因为启用历史记录选项会触发导致PubNub发送对象数组的功能，然后eon-chart客户端会遍历它们，随着它们填充图表。

这几乎就是我们要做的事情。 唯一的区别是我们正在尝试迭代每个PubNub消息的结果，而不是专门迭代通过历史记录的消息然后（完成时）交换以从新的传入消息中呈现数据。

目标是结合两个概念（转换函数和历史迭代概念）。

与历史功能相关的代码（在pubnub_c3.js中）看起来像这样：

self.pubnub.history({
          count: options.limit,
          channel: options.channel,
          end: timetoken,
          include_token: true,
          callback: function(payload) {

            var msgs = payload[0]; //data is here
            var start = payload[1]; 
            var end = payload[2];

            clog('History:', msgs.length + ' messages found');

            clog('History:', 'Complete... Rendering');

            i = 0;
            while (i < msgs.length) {

              var a = msgs[i];
              a.message = options.transform(a.message);

              if(a.message && a.message.eon) {
                a = appendDate(a.message.eon, a.timetoken);
                storeData(a, true); 
              } else {
                clog('Rejecting history message as improper format supplied.');
              }

              i++;

            }

            if (msgs.length > 1 && object.json.length < options.limit - 1) {
              page(end);
            } else {
              loadData(object);
              done();
            }

因此。所有这些背景（对不起！）我认为这个问题有两个问题：

正确格式化传出的PubNub JSON数据。
在当前pubnub_c3.js函数中正确放置解析/迭代代码。

为了回答这个问题，我在hyperdev.space上创建了一个实例，你可以在这里访问（我的所有代码都已构建完毕）：https://hyperdev.com/#!/project/coal-weaver

我的转换代码目前如下所示：

transform : function(data) { //I believe any code to itterate through data will happen here
      jsonTimeStampTest.innerText = data[0].vibeTimeStamp; //we properly get the time stamp
      jsonTimeStampTest.innerText = data[0].vibeValue; //we properly get the reading: 12
      jsonLength.innerText = data.length;  //we properly get 10

        var z = 0;
        for(z=0; z<10; z++)
          {
          return { columns : [
              ['x', data[z].vibeTimeStamp,
              'Value', data[z].vibeValue]
            ]};
          }
    }

...但我最终在控制台中出现错误： eon.js：8015 Eon消息必须采用适当的格式。例如：对象{eon：Array [3]} EON：数组[3]

尝试了许多不同的品种，似乎无法获得转换代码以正确地将值添加到eon-chart。希望你们能帮忙。

Answer 1

每次有效负载多点

可以为每个有效负载发布多个绘图点。而不是使用对象名称eon，而是使用名称eons并提供Array。因为您使用eons属性名称，所以库将知道循环遍历数组并绘制每个点。

请注意，如果每个有效负载发布多个点，必须使用x_type: "custom"并提供x_id 。

eons: [
  {
    x: new Date().getTime(),
    value: 1
  },
  {
    x: new Date().getTime(),
    value: 2
  }
]

以下是以100毫秒为增量收集的数据示例，但每1,000ms仅发布一次。每个有效载荷包括10个点，分辨率为100ms。 See a full example here

setInterval(function(){

  var data = [];
  var date = new Date().getTime();

  for(var i = 0; i < 10; i++) {
      data.push({
          'pub_time': date + (100 * i),
          'Austin': Math.floor(Math.random() * 99)
      });
  }

  pubnub.publish({
    channel: channel,
    message: {
      eons: data
    }
  });

}, 1000);

每个PubNub消息使用多个JSON数据对象呈现PubNub / Eon Chart LiveStream

1 个答案:

每次有效负载多点