PubNub EON图
PubNub EON图
提问于 2016-11-05 13:27:27
我的传感器数据由温度和湿度组成。我已经可以用pubnub提供的简单示例将这些数据安慰为单一的图表。现在我决定把温度和湿度分成两个不同的图，顶部的温度图和底部的湿度图，这样分辨率就可以更好、更清晰。如何使用eon实现这一点？发送的格式化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
Stack Overflow用户
回答已采纳
发布于 2016-11-08 17:28:44
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>Stack Overflow用户
发布于 2016-11-09 06:02:46
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40438773
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号