Dashboard charts won’t refresh or display new data

Dashboard
1

Hi,
I am downloading data from Darksky, then using template and tui_template to display them.

image
image.png632×617 31.5 KB

From there , no issue. I can do as many queries (town, country) requests and the data refresh right away. When I received new weather data, I saved them in a Global variable

Then, If I click on the Graph button to display line charts, the graph won't showed anything. For data, I used my Global variable with saved information.

image

If I press F5, the graph is displayed or if I use inject and I click on the Inject button, the graph is showed right away.

If I used the repeat interval on the inject, the graph is displayed, but it is refreshing the graph each x second and its blinking.

My question: Probably, I am doing something wrong and I tried to find it without success. I would like, when I click on the Graph Button on my dashboard to get the graph loading the saved global variable to display the graph without having to use the inject to trigger the display process.

If I have to use the inject, can I stop it when the graph is loaded and displayed ?

Thanks a lot

Yves

image

2

Not seeing your flow, since you didn't include it, makes it diffilcut to tell that is happening. but first off

  1. what version of NR and node.js?
  2. what platform (machine/os)?
  3. are the inject and ui-button attached to the same nex-node-in-the flow?
  4. is the data in the global an array?
  5. what does the flow look like?
3

Although it is not clear how you are triggering the chart, I would could consider to use the ui control node to force data population to the chart.

4

Thanks a lot for the prompt answer. I will include the flow later on tomorrow, at least to show the process and I will enhance the description as well
Best

Yves

5

Salut Yves, I use the same strategy as you to refresh a temperature / humidity line chart and it works pretty well (except that data is collected from a real weather station instead of Darksy API). The inject node automatically refresh the page each 15 seconds. I see no blinking / flickering at all.

Here is how the nodes are wired. Data is stored to the global variable by the change node in the right most side. The change node in the left moves stored data from global variable to msg.payload

weather-refresh-chart
weather-refresh-chart.png1055×131 10.8 KB

I will try to spare some time to try the same with Darksky (which I use only for forecast - not for historical data).

humidity-chart
humidity-chart.png1238×425 52.9 KB

6

I modified a flow to save Darksky data to a global variable Apparently it is working fine.

[{"id":"44ca6704.5ad738","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"599cbfd5.c3513","type":"ui_chart","z":"44ca6704.5ad738","name":"Darksky currently","group":"c8171f73.4b8c5","order":36,"width":28,"height":7,"label":"","chartType":"line","legend":"true","xformat":"YYYY-MM-DD HH-mm-ss","interpolate":"bezier","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"2","removeOlderPoints":"1000","removeOlderUnit":"86400","cutout":0,"useOneColor":false,"colors":["#00ffff","#008000","#00ffff","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":690,"y":340,"wires":[["2985ad3a.fb4772"]]},{"id":"1229ac6f.acc444","type":"change","z":"44ca6704.5ad738","name":"","rules":[{"t":"set","p":"yves","pt":"global","to":"payload[0]","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1060,"y":260,"wires":[[]]},{"id":"9b11a84.fea8a58","type":"inject","z":"44ca6704.5ad738","name":"","topic":"","payload":"","payloadType":"date","repeat":"19","crontab":"","once":true,"onceDelay":"2.2","x":270,"y":340,"wires":[["bd268b4d.bf3a48"]]},{"id":"bd268b4d.bf3a48","type":"change","z":"44ca6704.5ad738","name":"global.yves","rules":[{"t":"set","p":"payload","pt":"msg","to":"yves","tot":"global"}],"action":"","property":"","from":"","to":"","reg":false,"x":450,"y":340,"wires":[["599cbfd5.c3513"]]},{"id":"2985ad3a.fb4772","type":"switch","z":"44ca6704.5ad738","name":"","property":"payload","propertyType":"msg","rules":[{"t":"istype","v":"undefined","vt":"undefined"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":870,"y":260,"wires":[[],["1229ac6f.acc444"]]},{"id":"5ae39b9a.580fe4","type":"function","z":"44ca6704.5ad738","name":"Temperature","func":"msg.payload = msg.data.currently.temperature;\nmsg.timestamp = 1000 * msg.data.currently.time;\nreturn msg;","outputs":1,"noerr":0,"x":450,"y":260,"wires":[["599cbfd5.c3513","d1299269.19d4a"]]},{"id":"d1299269.19d4a","type":"debug","z":"44ca6704.5ad738","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"timestamp","targetType":"msg","x":630,"y":200,"wires":[]},{"id":"c8171f73.4b8c5","type":"ui_group","z":"","name":"Darksky","tab":"896a5d61.52781","order":32,"disp":false,"width":"28","collapse":false},{"id":"896a5d61.52781","type":"ui_tab","z":"","name":"T1","icon":"fa-television","order":1,"disabled":false,"hidden":false}]

The output of Darsky node would be connected to the function node:

darksky-historical
darksky-historical.png1037×217 15 KB

7

A word of caution. Ideally you would want to setup a time based database (like influxdb) for historical data.

I don´t know what is the drawback of storing a large amount of data to the global context. Most likely it is not a good thing. For the flow where I use this method the ui_chart only keeps data for 2 days (and the Darksky would read a new measurement each if 15 minutes), so not a big amount of data to store.

Furthermore by using this method you may be chased by members of a secret organization named NUAGV - Node red Users Against Global (and flow) Variables, which is really a bad bad thing.

2 Likes
8

Is there more than one member? I thought I was all alone preaching in the wilderness.

4 Likes
9

context (global and otherwise) certainly has its place... especially now that we have persistable context so data can be saved over restarts... may be useful if this is storing data over several days, would be pain to lose it every restart and have to rebuild history.

2 Likes
10

Hi Andrei,

Thanks for salut, it is very kind, are you from Montreal ? it is very French Canadian expression !!

Device: Raspberry PI 4
OS :Desbian 10 (always up to date)
NodeRed (all nodes last update)
Ram:4 gig

the heads up. here what I am using:

image

My Btn Graph sending :

{
"group": {
"hide": [
"Meteo_Details_Temperature_heures",
"Meteo_Details_TemperatureHours",
"Meteo_Details_TodaysWeather",
"Meteo_Details_CurrentWeather",
"Meteo_Details_Weekday1",
"Meteo_Details_Weekday2",
"Meteo_Details_Weekday3",
"Meteo_Details_Weekday4",
"Meteo_Details_Weekday5",
"Meteo_Details_Weekday6",
"Meteo_Details_Weekday7"
],
"show": [
"Meteo_Details_Topicons",
"Meteo_Details_SearchWeatherLocation",
"Meteo_Details_MeteoTopRightHightlights",
"Meteo_Details_DetailWeathericons",
"Meteo_Details_CurrentWeather",
"Meteo_Details_MeteoGraphsWinds",
"Meteo_Details_BtnDays"
]
}
}

Msg.topic:Graphbtn Wanted to use it as a trigger when GrapgButton is used. Didn't work so far

On Graph button click

image
image.png887×131 11.3 KB

Set Global weather : Load the Json Global variable with the last weather search result (I should check it out for persistable, it is a very good idea). I can use as well the inject node to load the global, I'll change it)

Then Prepare Chart creating the structure for the graph data, Change rules, to change the Charts.JS options and then the graph itself.

I tried to use a template and then UITemplate as my other pages, but I find out, it wasn't displaying any data, if I was using data like {{{weather.data[0].wind}}} but only if I was using {{{weather.data.wind}}}.

Andrei, I will test your workflow, I read a lot of your forum answers and I used a lot of your suggestions.. (car battery was a very good one btw)

One comment, Guys you created a fantastic product and the Forum is great.
Thanks for all of that and your node-red passion !!

Best

Yves

1 Like