How to reduce Y references and fill up X data?

[GiovanniG]

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.

Thank you!

[Colin]

@GiovanniG

today it shows on X 3 days instead of 2,

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.

@GiovanniG

the Y values are making the chart mess, I would like to reduce the number of values

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

How to get chart Y set on maximum value?

Hi, I'm passing by a switch node data from Openwather in this way: [{ 'series':["Media","Raffiche"], "data":[ [[payload.hourly].{'x':dt*1000,'y':wind_speed}], [[payload.hourly].{'x':dt*1000,'y':wind_gust}] ] }] But I got only half chart filled, how can I have the Y set to maximum value give into the array? Why now the maximum is only about the half of chart? Thanks [immagine] [immagine] As you see I'm using a "flat" chart to save space vertically, and this result to le…

[GiovanniG]

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

[Colin]

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

[GiovanniG]

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});

[Colin]

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/

[jbudd]

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

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

[Colin]

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.

[Colin]

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

[GiovanniG]

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

[GiovanniG]

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

[Colin]

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?

[GiovanniG]

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

Node JS Version

14.17.2

NPM Version

7.19.1

Node-RED Version

1.3.5

Operating System

Raspbian 5.10.48-v7+

[jbudd]

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

[Colin]

@GiovanniG

Yes I tested and it's the same

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

[GiovanniG]

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 so I'll keep it for now. I try to force X axis

[GiovanniG]

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

[GiovanniG]

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

[GiovanniG]

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