How to reduce Y references and fill up X data?

Hi, I've 2 problems with charts:


As you see the Y values are making the chart mess, I would like to reduce the number of values and round them to integer, is it possible to do with msg.ui_control?

Please look at the last chart, it was working fine, today it shows on X 3 days instead of 2, I've checked the data and there are sent 48 hours only, there are no errors there! Other charts works ok on X with the same datas, I don't know what's wrong here.. I've tried to change the interpolation, deleted browser cache, I've restarted NR too but it doesn't change.

immagine
Thank you!

Please show us how you have configured the chart. Are you sending it live data one sample at a time or are you filling the chart from historical data?
[Edit] Do you mean that the full extent of the X axis shown is three days? If so then there does only seem to be two days of data there.

You have already asked that question in this post. Please do not double post.

Thanks for help, these are datas sent to chart:

{"payload":[{"data":[[{"y":1.1,"x":1646236800000},{"y":1,"x":1646240400000},{"y":0.9,"x":1646244000000},{"y":0.7,"x":1646247600000},{"y":-0.2,"x":1646251200000},{"y":-1.5,"x":1646254800000},{"y":-1.9,"x":1646258400000},{"y":-4.9,"x":1646262000000},{"y":-6.1,"x":1646265600000},{"y":-5.9,"x":1646269200000},{"y":-4.9,"x":1646272800000},{"y":-4.4,"x":1646276400000},{"y":-3.3,"x":1646280000000},{"y":-2.5,"x":1646283600000},{"y":-2.4,"x":1646287200000},{"y":-2.2,"x":1646290800000},{"y":-1.8,"x":1646294400000},{"y":-1.5,"x":1646298000000},{"y":-1.1,"x":1646301600000},{"y":-0.7,"x":1646305200000},{"y":-0.3,"x":1646308800000},{"y":0,"x":1646312400000},{"y":0,"x":1646316000000},{"y":0,"x":1646319600000},{"y":-0.3,"x":1646323200000},{"y":-1.3,"x":1646326800000},{"y":-2.3,"x":1646330400000},{"y":-3.1,"x":1646334000000},{"y":-3.8,"x":1646337600000},{"y":-4.9,"x":1646341200000},{"y":-5.6,"x":1646344800000},{"y":-4.2,"x":1646348400000},{"y":-4.2,"x":1646352000000},{"y":-4.8,"x":1646355600000},{"y":-5.8,"x":1646359200000},{"y":-6.8,"x":1646362800000},{"y":-7.2,"x":1646366400000},{"y":-7.6,"x":1646370000000},{"y":-7.1,"x":1646373600000},{"y":-6.2,"x":1646377200000},{"y":-5.1,"x":1646380800000},{"y":-4.2,"x":1646384400000},{"y":-3.6,"x":1646388000000},{"y":-3.4,"x":1646391600000},{"y":-3.2,"x":1646395200000},{"y":-3.1,"x":1646398800000},{"y":-3.4,"x":1646402400000},{"y":-4.4,"x":1646406000000}],[{"y":-2.2,"x":1646236800000},{"y":-3.1,"x":1646240400000},{"y":-3.2,"x":1646244000000},{"y":-2.6,"x":1646247600000},{"y":-3.7,"x":1646251200000},{"y":-5.5,"x":1646254800000},{"y":-5.7,"x":1646258400000},{"y":-8.6,"x":1646262000000},{"y":-9.9,"x":1646265600000},{"y":-9.4,"x":1646269200000},{"y":-8.2,"x":1646272800000},{"y":-7.8,"x":1646276400000},{"y":-6.8,"x":1646280000000},{"y":-6.4,"x":1646283600000},{"y":-6.1,"x":1646287200000},{"y":-6,"x":1646290800000},{"y":-5.2,"x":1646294400000},{"y":-4.6,"x":1646298000000},{"y":-4.1,"x":1646301600000},{"y":-3.7,"x":1646305200000},{"y":-3.5,"x":1646308800000},{"y":-3.1,"x":1646312400000},{"y":-2.8,"x":1646316000000},{"y":-2.9,"x":1646319600000},{"y":-4.4,"x":1646323200000},{"y":-6,"x":1646326800000},{"y":-7.3,"x":1646330400000},{"y":-7.8,"x":1646334000000},{"y":-8.3,"x":1646337600000},{"y":-9,"x":1646341200000},{"y":-9.9,"x":1646344800000},{"y":-8.7,"x":1646348400000},{"y":-9.1,"x":1646352000000},{"y":-10,"x":1646355600000},{"y":-10.9,"x":1646359200000},{"y":-12,"x":1646362800000},{"y":-12.5,"x":1646366400000},{"y":-13,"x":1646370000000},{"y":-12.3,"x":1646373600000},{"y":-11.5,"x":1646377200000},{"y":-10.3,"x":1646380800000},{"y":-9.2,"x":1646384400000},{"y":-8.6,"x":1646388000000},{"y":-8,"x":1646391600000},{"y":-7.9,"x":1646395200000},{"y":-7.7,"x":1646398800000},{"y":-7.9,"x":1646402400000},{"y":-9,"x":1646406000000}]],"series":["Reale","Percepita"]}],"ui_control":{"ymax":3,"ymin":-14},"_msgid":"4676d044.b6e2e"}

The chart is exactly configured as others, that work.
About Y, may you tell me if it's possible or not? I won't bother more.. just need an answer ) thanks

Did you realise you are sending data for two days into the future? It does not work at all for me.

I dont understand your question, I'm using the same code for 2 different graphs but I've different results:

for (let i = 0; i < 48; i++) {
cell0.push({y:((Math.round(msg.payload.hourly[i].wind_speed*36))/10),x:msg.payload.hourly[i].dt * 1000});
cell1.push({y:((Math.round(msg.payload.hourly[i].wind_gust*36))/10),x:msg.payload.hourly[i].dt * 1000});

for (let i = 0; i < 48; i++) {
cell0.push({y:((Math.round(msg.payload.hourly[i].temp*10))/10),x:msg.payload.hourly[i].dt * 1000});
cell1.push({y:((Math.round(msg.payload.hourly[i].feels_like*10))/10),x:msg.payload.hourly[i].dt * 1000});

The last timestamp in your data is 1646406000000. The timestamp at this moment is 1646239421954. 1646406000000 is 4th March 2022 15:00 which is two days in the future.

See https://www.epochconverter.com/

With regard to y
I used the data you posted above ("Thanks for help, these are datas sent to chart:"), without the "ui_control":{"ymax":4,"ymin":-14}, bit.
It produced this graph
Untitled 1

If you must have self defined maximum and minimum, ensure that you choose a range which is divisible by 5.

1 Like

Actually it does work ok for me, and shows the correct time scale, even though the data are in the future. I had a mistake in my test flow.

@GiovanniG are you using the latest version of node-red-dashboard.

Test flow with msg.ui_control -15 to 5

[{"id":"9ec4f67db1a7b231","type":"inject","z":"bdd7be38.d3b55","name":"Test data","props":[{"p":"payload"},{"p":"ui_control","v":"{ \"ymax\": 5, \"ymin\": -15 }","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"data\":[[{\"y\":1.1,\"x\":1646236800000},{\"y\":1,\"x\":1646240400000},{\"y\":0.9,\"x\":1646244000000},{\"y\":0.7,\"x\":1646247600000},{\"y\":-0.2,\"x\":1646251200000},{\"y\":-1.5,\"x\":1646254800000},{\"y\":-1.9,\"x\":1646258400000},{\"y\":-4.9,\"x\":1646262000000},{\"y\":-6.1,\"x\":1646265600000},{\"y\":-5.9,\"x\":1646269200000},{\"y\":-4.9,\"x\":1646272800000},{\"y\":-4.4,\"x\":1646276400000},{\"y\":-3.3,\"x\":1646280000000},{\"y\":-2.5,\"x\":1646283600000},{\"y\":-2.4,\"x\":1646287200000},{\"y\":-2.2,\"x\":1646290800000},{\"y\":-1.8,\"x\":1646294400000},{\"y\":-1.5,\"x\":1646298000000},{\"y\":-1.1,\"x\":1646301600000},{\"y\":-0.7,\"x\":1646305200000},{\"y\":-0.3,\"x\":1646308800000},{\"y\":0,\"x\":1646312400000},{\"y\":0,\"x\":1646316000000},{\"y\":0,\"x\":1646319600000},{\"y\":-0.3,\"x\":1646323200000},{\"y\":-1.3,\"x\":1646326800000},{\"y\":-2.3,\"x\":1646330400000},{\"y\":-3.1,\"x\":1646334000000},{\"y\":-3.8,\"x\":1646337600000},{\"y\":-4.9,\"x\":1646341200000},{\"y\":-5.6,\"x\":1646344800000},{\"y\":-4.2,\"x\":1646348400000},{\"y\":-4.2,\"x\":1646352000000},{\"y\":-4.8,\"x\":1646355600000},{\"y\":-5.8,\"x\":1646359200000},{\"y\":-6.8,\"x\":1646362800000},{\"y\":-7.2,\"x\":1646366400000},{\"y\":-7.6,\"x\":1646370000000},{\"y\":-7.1,\"x\":1646373600000},{\"y\":-6.2,\"x\":1646377200000},{\"y\":-5.1,\"x\":1646380800000},{\"y\":-4.2,\"x\":1646384400000},{\"y\":-3.6,\"x\":1646388000000},{\"y\":-3.4,\"x\":1646391600000},{\"y\":-3.2,\"x\":1646395200000},{\"y\":-3.1,\"x\":1646398800000},{\"y\":-3.4,\"x\":1646402400000},{\"y\":-4.4,\"x\":1646406000000}],[{\"y\":-2.2,\"x\":1646236800000},{\"y\":-3.1,\"x\":1646240400000},{\"y\":-3.2,\"x\":1646244000000},{\"y\":-2.6,\"x\":1646247600000},{\"y\":-3.7,\"x\":1646251200000},{\"y\":-5.5,\"x\":1646254800000},{\"y\":-5.7,\"x\":1646258400000},{\"y\":-8.6,\"x\":1646262000000},{\"y\":-9.9,\"x\":1646265600000},{\"y\":-9.4,\"x\":1646269200000},{\"y\":-8.2,\"x\":1646272800000},{\"y\":-7.8,\"x\":1646276400000},{\"y\":-6.8,\"x\":1646280000000},{\"y\":-6.4,\"x\":1646283600000},{\"y\":-6.1,\"x\":1646287200000},{\"y\":-6,\"x\":1646290800000},{\"y\":-5.2,\"x\":1646294400000},{\"y\":-4.6,\"x\":1646298000000},{\"y\":-4.1,\"x\":1646301600000},{\"y\":-3.7,\"x\":1646305200000},{\"y\":-3.5,\"x\":1646308800000},{\"y\":-3.1,\"x\":1646312400000},{\"y\":-2.8,\"x\":1646316000000},{\"y\":-2.9,\"x\":1646319600000},{\"y\":-4.4,\"x\":1646323200000},{\"y\":-6,\"x\":1646326800000},{\"y\":-7.3,\"x\":1646330400000},{\"y\":-7.8,\"x\":1646334000000},{\"y\":-8.3,\"x\":1646337600000},{\"y\":-9,\"x\":1646341200000},{\"y\":-9.9,\"x\":1646344800000},{\"y\":-8.7,\"x\":1646348400000},{\"y\":-9.1,\"x\":1646352000000},{\"y\":-10,\"x\":1646355600000},{\"y\":-10.9,\"x\":1646359200000},{\"y\":-12,\"x\":1646362800000},{\"y\":-12.5,\"x\":1646366400000},{\"y\":-13,\"x\":1646370000000},{\"y\":-12.3,\"x\":1646373600000},{\"y\":-11.5,\"x\":1646377200000},{\"y\":-10.3,\"x\":1646380800000},{\"y\":-9.2,\"x\":1646384400000},{\"y\":-8.6,\"x\":1646388000000},{\"y\":-8,\"x\":1646391600000},{\"y\":-7.9,\"x\":1646395200000},{\"y\":-7.7,\"x\":1646398800000},{\"y\":-7.9,\"x\":1646402400000},{\"y\":-9,\"x\":1646406000000}]],\"series\":[\"Reale\",\"Percepita\"]}]","payloadType":"json","x":240,"y":1260,"wires":[["38fb24e7fcc0abea"]]},{"id":"38fb24e7fcc0abea","type":"ui_chart","z":"bdd7be38.d3b55","name":"","group":"a8e4a3.d31edb6","order":1,"width":"7","height":"4","label":"test","chartType":"line","legend":"false","xformat":"dd HH:mm","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"26","removeOlderPoints":"","removeOlderUnit":"604800","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":510,"y":1240,"wires":[[]]},{"id":"a8fb4a884e7070e5","type":"inject","z":"bdd7be38.d3b55","name":"Clear chart","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":240,"y":1220,"wires":[["38fb24e7fcc0abea"]]},{"id":"a8e4a3.d31edb6","type":"ui_group","name":"Chart","tab":"8032fe72.980b98","order":3,"disp":false,"width":"12","collapse":false},{"id":"8032fe72.980b98","type":"ui_tab","name":"PnH","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

Which gives
image

this is correct, the hourly weather data comes for the next 48h, the same object is sent to 2 functions with the codes above, they use exactly the same X data, but on wind chart I have no problems. There is no reason for such behaviour, I suppose is a bug.
The chart is rounding the X axis to 0:00 of the first day till 24:00 of the last, strange
I can't attach here the flow because it's too big (

EDIT: I've used pastebin [{"id":"7a93413e.68e918","type":"tab","label":"Meteo","disabled":false,"info":"" - Pastebin.com

thank you for your post, I'm using ui_control to use the entire Y, my chart is small and if I don't use this the Y edges are rounded too far, the result is very compressed

You didn't answer the question, are you using the latest dashboard?

Did you see my flow that uses your data and appears to display correctly?

Sorry, I didn't notice your post, Yes I tested and it's the same. Version is 3.1.6
immagine

Node JS Version

14.17.2

NPM Version

7.19.1

Node-RED Version

1.3.5

Operating System

Raspbian 5.10.48-v7+

a) Find more space.
b) Find a different chart widget. or
c) Stop fretting about the compromises forced by your own choices

Are you running with small widgets or something else non standard?

bingo! with 33x33 shows problem on your and mine chart, with 36x36 your is correct, mine requires 38x38.
Is it possible to correct it? Thanks
Strange because 2 days ago was always work with 33x33
With 38x38 my dashboard doesn't look great as 33x33 :frowning: so I'll keep it for now. I try to force X axis

Forcing X axis with msg.ui_control doesn't have effect

Today it works good, so it depends on some values of the Y, probably the delta between min and max or the differences among the 2 series. It's a bug I suppose
immagine

I've noticed another problem, in the chart setting it's specified the Y min value should be 0, but it's -0,5. This appears if I ser 36x36, if I use 33x33 it's 0, ok

immagine

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.