PubNub EON Graph

时间：2016-11-05 13:27:27

标签： iot pubnub

我的传感器数据包括温度和湿度。我可以使用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>

2 个答案:

答案 0 :(得分：2)

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>

答案 1 :(得分：1)

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