当前位置:网站首页>(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
边栏推荐
- 121道分布式面试题和答案
- 十分鐘徹底掌握緩存擊穿、緩存穿透、緩存雪崩
- MYSQL索引钟B-TREE ,B+TREE ,HASH索引之间的区别和应用场景
- Wechat applet development experience
- Record: newinstance() obsolete replacement method
- Alibaba cloud microservices (III) sentinel open source flow control fuse degradation component
- Atomic and nonatomic
- RTKLIB: demo5 b34f. 1 vs b33
- Abstract classes and interfaces
- Interview Essentials: talk about the various implementations of distributed locks!
猜你喜欢
国企秋招经验总结
MYSQL索引钟B-TREE ,B+TREE ,HASH索引之间的区别和应用场景
MySQL Database Constraints
西安电子科技大学22学年上学期《基础实验》试题及答案
抽象类和接口
TYUT太原理工大学2022“mao gai”必背
View UI Plus 发布 1.3.0 版本,新增 Space、$ImagePreview 组件
2-year experience summary, tell you how to do a good job in project management
Fgui project packaging and Publishing & importing unity & the way to display the UI
Tyut Taiyuan University of technology 2022 introduction to software engineering summary
随机推荐
记录:下一不小心写了个递归
Decomposition relation model of the 2022 database of tyut Taiyuan University of Technology
[while your roommate plays games, let's see a problem]
TYUT太原理工大学2022数据库之关系代数小题
继承和多态(上)
Design a key value cache to save the results of the most recent Web server queries
[rtklib 2.4.3 B34] version update introduction I
Dark chain lock (lca+ difference on tree)
Record: Navicat premium can't connect to MySQL for the first time
西安电子科技大学22学年上学期《射频电路基础》试题及答案
2-year experience summary, tell you how to do a good job in project management
How to ensure data consistency between MySQL and redis?
Implementation of Excel import and export functions
TYUT太原理工大学2022数据库考试题型大纲
Fundamentals of UD decomposition of KF UD decomposition [1]
错误: 找不到符号
Tyut outline of 2022 database examination of Taiyuan University of Technology
165. Compare version number - string
How do architects draw system architecture blueprints?
XV Function definition and call