当前位置:网站首页>(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

Preface

Hardware construction

onenet Platform preparation

Data flow import

  Dashboard segment ( Get and upload the last set of data )

Curve code segment

Be careful



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

原网站

版权声明
本文为[Lunan wind]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/187/202207060916073631.html