当前位置:网站首页>(super detailed II) detailed visualization of onenet data, how to plot with intercepted data flow
(super detailed II) detailed visualization of onenet data, how to plot with intercepted data flow
2022-07-06 13:20:00 【Lunan wind】
Catalog
Dashboard segment ( Get and upload the last set of data )
Preface
In the last article, we used sensors to access onenet platform , Upload the collected data in real time . When we turn on the device , Open the data flow and look at the rows of refreshed data , Is there any more intuitive method ? For example, intercept the data stream for visual processing , Draw a curve with data points , Or use instruments to feel the changes of collected data ?
Hardware construction
https://blog.csdn.net/qq_45998204/article/details/124686714
See the previous chapter
onenet Platform preparation
Create a new panel
Add regular charts in the required format by yourself
Data flow import
Open the data , Manage data sources
In this way, when we open the data source selection , We can find the data stream we uploaded
How to control the dashboard , Open the private filter , Make changes , Look at the value changes
data----- Selected data flow value
rootdata---- All data flow values under the device
OneNET View Filters are provided to personalize data sources , Users can write by themselves JavaScript Code , Realize data structure transformation 、 Screening and some simple calculations
Input data, We can observe that , The dashboard changes with the returned data flow value
Open the data processing result , You can intuitively observe the information returned by the data flow , We set the refresh interval 5 second , Data points 100, In so many data processing results , We need to intercept The latest set of data Application dashboard display
Next is how to intercept the data values we need to plot
Open the private filter , Make changes , Let it return the last set of data
call function last(arr)
take last(data) Assign to value
Open the data processing result , The latest set of data shows the same
Dashboard segment ( Get and upload the last set of data )
// last([1, 2]); // -> 2
function last(arr) {
var len = arr ? arr.length : 0;
if (len) return arr[len - 1];
}
return [{
value: last(data).value,
name: ' temperature '
}]
After modifying the program, be sure to save
Observing a single data cannot express the overall situation well
So we introduce the graph
Select the defined graph , After adding data sources , Modify private filter , Return the data stream data( preservation !)
Then open the data processing results , There are many groups of data , We need to select useful data to help draw , such as Upload time , The uploaded Sampling value ( temperature )
Usually, the results returned by the data source are mostly array types , Each element can be processed through iteration .
Open the private filter
Curve code segment
data.forEach((item, index) => {
// console.log(' Elements :', item, '; Subscript :', index);
item.x = item.update_at
item.y = item.value
});
return data
The same is true for uploading multiple devices and data streams
link
( The personal visualization was later redone for the project , Temporarily close access )
Be careful
After reading the comments, I found that some people did not draw , There is no problem with the process , There is a small detail to pay attention to
When importing general charts, there are three series , After copying the program, only x Axis update , It's because of here y The axis field name is y1, And the program assignment is y, Just modify here
I'll do it again when I'm free rootdata Use
Welcome to exchange
边栏推荐
- 10 minutes pour maîtriser complètement la rupture du cache, la pénétration du cache, l'avalanche du cache
- How to ensure data consistency between MySQL and redis?
- 阿里云微服务(三)Sentinel开源流控熔断降级组件
- 面试必备:聊聊分布式锁的多种实现!
- 记录:newInstance()过时的代替方法
- GNSS positioning accuracy index calculation
- Ten minutes to thoroughly master cache breakdown, cache penetration, cache avalanche
- TYUT太原理工大学2022数据库考试题型大纲
- 抽象类和接口
- Introduction and use of redis
猜你喜欢
Interview Essentials: talk about the various implementations of distributed locks!
Implementation of Excel import and export functions
Novatel board oem617d configuration step record
Code example of MATLAB reading GNSS observation value o file
String类
13 power map
《软件测试》习题答案:第一章
View UI Plus 发布 1.3.0 版本,新增 Space、$ImagePreview 组件
Alibaba cloud microservices (III) sentinel open source flow control fuse degradation component
2022 National Games RE1 baby_ tree
随机推荐
Iterable、Collection、List 的常见方法签名以及含义
继承和多态(上)
All in one 1405: sum and product of prime numbers
13 power map
[GNSS data processing] Helmert variance component estimation analysis and code implementation
记录:初次cmd启动MySQL拒接访问之解决
View UI Plus 发布 1.1.0 版本,支持 SSR、支持 Nuxt、增加 TS 声明文件
Wechat applet development experience
系统设计学习(一)Design Pastebin.com (or Bit.ly)
Record: the solution of MySQL denial of access when CMD starts for the first time
Introduction and use of redis
Basic DOS commands
2年经验总结,告诉你如何做好项目管理
TYUT太原理工大学2022数据库大题之分解关系模式
【快趁你舍友打游戏,来看道题吧】
System design learning (III) design Amazon's sales rank by category feature
[while your roommate plays games, let's see a problem]
Summary of multiple choice questions in the 2022 database of tyut Taiyuan University of Technology
[rtklib] preliminary practice of using robust adaptive Kalman filter under RTK
Tyut Taiyuan University of technology 2022 introduction to software engineering