Need Help with Real-Time Graphs in Node-RED? Seeking Advice!

[Ayoub]

Hello,

I hope you're doing well. I am currently working on a real-time weather application with Node-RED and I have a question regarding data visualization on graphs, for example, temperature.

I'm facing an issue with how the data is displayed over time. As new data is collected, the origin of the time axis (for example, 5:00 PM for an initial temperature of 10°C) shifts. I would like to know if it's possible to fix the first value of the x-axis (for example, 5:00 PM) while dynamically adjusting the last point, so that the graph shows a rolling 24-hour period with an automatically updated interval.

Do you have any suggestions or advice on how to resolve this issue? Thank you in advance for your help.

[xx_Nexus_xx]

The chart nodes is consuming a lot of memory (and has a memory leak in D2). Therefore I'm using Grafana to setup my dashboards and showing them with iframe in Node-Red dashboard!

You can specify any timeline you want .. I have a slider at the bottom to adjust the number of hours I want to watch into the past

the method to use grafana in Node-Red is described here

[joepavitt]

@xx_Nexus_xx

(and has a memory leak in D2)

Does it? Could you clarify this please?

[xx_Nexus_xx]

Hi @joepavitt , we had the discussion already in another topic here in the forum.

I had setup several charts to display weather information. The data was read from https://api.open-meteo.com/ and than transformed into the array for the charts. When running the dashboard for 24-36 hours, the browser (Windows Chrome in my instance) is crashing and showing white-page with error message "Oups ..out of memory" .. when disabling the charts (see below) the dasboard is running for days and weeks.

chart.json (2.1 KB)

[Colin]

You have shared only one node (an http request). Please select the charts and export those. Rather than attaching a file please paste the flow text here. In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote ```)

``` 
   code goes here 
```

See this post for more details - How to share code or flow json

Also tell us how many lines are on each chart and what rate they are updated.

Have you worked out the total number of data points that the charts will hold once the charts are all full?

[xx_Nexus_xx]

yeah .. I tried that but getting the error "An error occurred: Body is limited to 32000 characters; you entered 41388." when adding the code with the ```

sorry can only upload again .. this time not just the http
chart_code.json (39.8 KB)

[Ayoub]

@jbudd

Welcome to the forum @Ayoub.

You can store the data as an array in a context variable, preferably using a filesystem store.
A function like this should work

const recordsin24hours = 6   // Or however many!
let data = context.get("weatherdata") ?? []

const newdata = { "timestamp": new Date(), "temperature": msg.payload } // construct new element
data.push(newdata)     // add it to the array
if (data.length > recordsin24hours) {
    data.shift()        //Throw away the oldest element
}
context.set("weatherdata", data)
msg.payload = data
return msg;

Thank you very much for your response! I’m currently going through it as I'm a beginner with Node-RED. I really appreciate your help

[Ayoub]

@xx_Nexus_xx Thank you very much for your response. I'm still a beginner with Node-RED, so I will try to fully understand your answer, and if I have any questions, I will ask them, if that's alright with you. Once again, thank you for your response and your help

[xx_Nexus_xx]

You are welcome.... as this is Node-Red there are plenty of ways to achieve an outcome .. it really depends on you personal preference ... but thats the fun of it

[Buckskin]

If you set the x-Axis limit to 24 hours you should get a graph (after 24 hrs) that runs from current time on the right to 24 hrs ago on the left. This one is a simple chart using the incoming data as sent by sensor

[Colin]

Can you provide an inject node configured with sample data so that we can test it please?

You did not answer the questions:

@Colin

Also tell us how many lines are on each chart and what rate they are updated.

Have you worked out the total number of data points that the charts will hold once the charts are all full?

[xx_Nexus_xx]

Hi Colin, thx for the follow up I really missed that point

1. I have updated the sample flow with an inject node holding the METEO data. This data set is usually updated every 60min
   Weather_chart.json (79.4 KB)

2. in my function node ("to graph") I'm reducing the data array for the chart-graph and only using the hourly data for next 3 days

3. Each chart-graph can hold upto 5 arrays or lines ==> 365 data points max per chart
   
   

   

4. in this example I have 6 chart-graphs with upto 2190 datapoints ... should not be a problem

5. the chart-graph is configure to "replace" the data every time a new set arrives .. therefore there should not be any increase in buffer usage (so my understanding) .. the above charts are getting updated every hour

6. unfortunately, when running this flow over 24-36 hous, the browser (Chrome in my case) is crashing with ""Oups ..out of memory" message .. it works well after a normal refresh (F5).. but is a bit "wife-unfriendly" when running on my wall-mounted control dashboard in the living-room

7. since I disabled the chart nodes about 6 weeks ago, the browser did not crash at all. The flow till the function node "to graph" is still running as I'm using the data for further automation

I think this is now getting off-topic of this thread .. but I'm happy to provide more input in this or another thread

Screen sample:

PS: I have reactivated my chart-graphs so I can capture the browser error and will post when it happens

[Colin]

I think probably you should submit an issue report at Issues · FlowFuse/node-red-dashboard · GitHub giving the details that you have posted here. Your use case is unusual and perhaps there is a memory leak in the browser code. Though if you are only updating once an hour it seems surprising as not much data will have been transferred. Are you sure it only sends data to the charts once an hour? To confirm this, add debug nodes showing the data going to the chart.
When you replace existing data points will they have exactly the same timestamps as before?

I presume you are using the latest version of the dashboard (1.18.1).