PubNub EON 图

Question

我的传感器数据包括温度和湿度。我已经可以使用 pubnub 提供的简单示例将这些数据的温度和湿度控制到单个图形中。现在我决定将温度和湿度分成 2 个不同的图表，顶部的温度图和底部的湿度图，以便由于分辨率可以更好、更清晰地查看它。我如何使用 eon sdk 实现它？发送的格式化 json 数据是，

"eon":{"tpr":%.1f,"hum":%.1f}

这是我正在关注的代码，

<body>
    <h1>Getting Started with EON</h1>
    <p>Create real-time charts and maps.</p>
    <div id="chart12"></div>
    <div id="chart13"></div>
    <script>
          var pubnub = PUBNUB.init({
            publish_key:   'pub-c-3d6b4414-redacted', // replace with your own pub-key
            subscribe_key: 'sub-c-0d045036-redacted' // replace with your own sub-key
          });

          eon.chart({
            pubnub: pubnub,         
            channel: "birdpeek", // the pubnub channel for real time data
            limit:20,
            flow:true,
            generate: {           // c3 chart object
              bindto: '#chart12',
              data: {
                type: 'spline',
                labels: true
              }
            }
          });
        </script>
</body>

Answer 1

PubNub EON 图表 - 两个图表，同一页面

发布此数据：{"eon":{"tpr":"%.1f","hum":"%.1f"}}

两个频道

如果发布到两个不同的渠道，您可以这样做：

<div id="chart-temp"></div>
<div id="chart-humid"></div>
<script>
  var pubnub = new PubNub({
    publishKey:   'your-pub-key', 
    subscribeKey: 'your-sub-key'
  });
  var charTemp = eon.chart({
    pubnub: pubnub,
    channels: ["temperature"],
    generate: {
      bindto: '#chart-temp',
      data: {
        labels: true
      }
    }
  });
  var chartHumid = eon.chart({
    pubnub: pubnub,
    channels: ["humidity"],
    generate: {
      bindto: '#chart-humid',
      data: {
        labels: true
      }
    }
  });
</script>

一个频道

如果您必须发布到单个频道，那么每个 eon.chart 都必须使用相同的频道并改变接收到的数据以仅包含该图表的必要数据。

<div id="chart-temp"></div>
<div id="chart-humid"></div>
<script>
  var pubnub = new PubNub({
    publishKey:   'your-pub-key', 
    subscribeKey: 'your-sub-key'
  });
  var charTemp = eon.chart({
    pubnub: pubnub,
    channels: ["birdpeek"],
    generate: {
      bindto: '#chart-temp',
      data: {
        labels: true
      }
    }
    transform : function(data) {
        return {eon:{'Humidity': data.eon.hum}  }
    }
  });
  var chartHumid = eon.chart({
    pubnub: pubnub,
    channels: ["birdpeek"],
    generate: {
      bindto: '#chart-humid',
      data: {
        labels: true
      }
    }
    transform : function(data) {
        return {eon:{'Humidity': data.eon.tpr}}
    }
  });
</script>

Answer 2

<script>
          var pubnub = PUBNUB.init({
            publish_key:   'pub-c-3d6b4414-xxx', // replace with your own pub-key
            subscribe_key: 'sub-c-0d045036-xxx' // replace with your own sub-key
          });

          eon.chart({
            pubnub: pubnub,         
            channel: "birdpeek", // the pubnub channel for real time data
            limit:20,
            flow:true,
            generate: {           // c3 chart object
              bindto: '#chart12',
              data: {
                type: 'spline',
                x: 'x',
                labels: true
              },
              axis: {
                x: {
                    type: 'timeseries',
                    tick: {
                        format: '%H:%m:%S'
                    }
                }
              }
            },
            transform : function(data) {

                return {eon:{'Humidity': data.eon.hum}  }


            }
          });

          eon.chart({
            pubnub: pubnub,         
            channel: "birdpeek", // the pubnub channel for real time data
            limit:20,
            flow:true,
            generate: {           // c3 chart object
              bindto: '#chart13',
              data: {
                type: 'spline',
                x: 'x',
                labels: true
              },
              axis: {
                x: {
                    type: 'timeseries',
                    tick: {
                        format: '%H:%m:%S'
                    }
                }
              }
            },
            transform : function(data) {

                return {eon:{'Temperature': data.eon.tpr}   }


            }
          });


    </script>

PubNub EON 图

PubNub EON Graph

iot

pubnub

PubNub EON 图表 - 两个图表，同一页面

两个频道

一个频道