(super detailed II) detailed visualization of onenet data, how to plot with intercepted data flow

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