Problem show point-label with using line chart

avestan · 16 January 2022 07:19

Hi
My chart point label is not show correct value !

[{"id":"41ce43a480e30540","type":"inject","z":"39e52d6a371e3442","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"series\":\"Temp\",\"data\":[[-5,37,35]],\"labels\":[\"1015-18:20\",\"1015-18:20\",\"1015-18:20\"]}]","payloadType":"json","x":180,"y":180,"wires":[["90499ece9d451f07"]]},{"id":"90499ece9d451f07","type":"ui_chart","z":"39e52d6a371e3442","name":"","group":"5eaca1a3.15e28","order":0,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"MMDD-HHmm","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"x":460,"y":200,"wires":[[]]},{"id":"5eaca1a3.15e28","type":"ui_group","name":"SERVERS","tab":"4c764eaa7bb3a3a6","order":1,"disp":false,"width":"4","collapse":false},{"id":"4c764eaa7bb3a3a6","type":"ui_tab","name":"Main","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

zenofmud · 16 January 2022 10:54

works fine for me. Please stop and restart Node-RED and copy the startup log (up to where is says node red has started) and paste it to a reply.

what platform are you running NR on?

avestan · 16 January 2022 13:01

Thanx for your reply
I use armbian on Nanopi board

Starting as root systemd service.
Journal file /var/log/journal/50bea5a2341c40588d32c8103dea6e71/system@0005d37b1c702b9c-dd0ba2857fe63dcd.journal~ is truncated, ignoring file.
16 Jan 16:26:42 - [info]
Welcome to Node-RED
===================
16 Jan 16:26:42 - [info] Node-RED version: v2.1.3
16 Jan 16:26:42 - [info] Node.js  version: v14.18.1
16 Jan 16:26:42 - [info] Linux 5.10.60-sunxi64 arm64 LE
16 Jan 16:26:44 - [info] Loading palette nodes
16 Jan 16:26:50 - [info] Dashboard version 3.1.2 started at /ui
16 Jan 16:26:51 - [info] Settings file  : /root/.node-red/settings.js
16 Jan 16:26:51 - [info] Context store  : 'default' [module=memory]
16 Jan 16:26:51 - [info] User directory : /root/.node-red
16 Jan 16:26:51 - [warn] Projects disabled : editorTheme.projects.enabled=false
16 Jan 16:26:51 - [info] Flows file     : /root/.node-red/flows.json
16 Jan 16:26:51 - [info] Server now running at http://127.0.0.1:1880/
16 Jan 16:26:51 - [warn]
---------------------------------------------------------------------
Your flow credentials file is encrypted using a system-generated key.
If the system-generated key is lost for any reason, your credentials
file will not be recoverable, you will have to delete it and re-enter
your credentials.
You should set your own key using the 'credentialSecret' option in
your settings file. Node-RED will then re-encrypt your credentials
file using your chosen key the next time you deploy a change.
---------------------------------------------------------------------
16 Jan 16:26:51 - [info] Starting flows
16 Jan 16:26:52 - [info] Started flows
16 Jan 16:26:52 - [info] [serialconfig:29e570f287e9e3f3] serial port /dev/ttyS1 opened at 57600 baud 8N1

Steve-Mcl · 16 January 2022 13:12

The code sees 1015-18:20 as a date and is showing you the epoch.

Try it in a node repl...

If you change the labels to something non date-like (e.g. "1015 T18:20") then this will not occur.

zenofmud · 16 January 2022 13:24

Steve, it's not the "1015-18:20" on the x-axis, it is the 30136871144000 at the point. Running the his flow I get this:

@avestan I'm running NR v2.1.5 and dashboard v3.1.3 so I would suggest by (1) update the dashboard and see what happens. the (2) update Node-RED and see what happens.

avestan · 16 January 2022 13:27

how can i set date with MMDD-HH:mm format?
I have X-axis Label correctly but same value at the point not true !

Steve-Mcl · 16 January 2022 13:28

Yes, I know.

Its partly down to the timezone of your server. For example, in GMT it interprets that value "1015-18:20" as a date - as shown below...

So the solution is to either make the X-Axis a string or make it a proper date.

avestan · 16 January 2022 13:32

How can do it ?

Steve-Mcl · 16 January 2022 13:37

Use a proper date or epoch for the x-axis data/labels then send a control message to the chart e.g...


msg.ui_control = {
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    unit: 'day',
                    displayFormats: {
                        day: "MMDD-HH:mm"
                    }
                }
            }]
        }
    }
}

where the displayFormats are described here: Time Cartesian Axis | Chart.js

You can test this out live here: Edit fiddle - JSFiddle - Code Playground - try setting displayFormats to MMDD-HH:mm

zenofmud · 16 January 2022 13:40

Ohh, I thought the issue was with the value not the time. Now that I look closer I see the red oval covering up most of the T.37

avestan · 16 January 2022 14:02

Steve-Mcl:

msg.ui_control = {
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    unit: 'day',
                    displayFormats: {
                        day: "MMDD-HH:mm"
                    }
                }
            }]
        }
    }
}

I change my data input format to proper date and use my chart x-axes to MMDD-HHmm

and it work correctly on point ! thanx

But now my x-axes show full date and time how can i change it to MMDD-HHmm format ?

Steve-Mcl · 16 January 2022 14:05

As I said, send a control message to the chart node.

Did you try the live demo?

avestan · 16 January 2022 14:09

avestan · 16 January 2022 14:24

I send it and it worked by Gregorian date correctly
as you see on last pic i send

[{"id":"41ce43a480e30540","type":"inject","z":"39e52d6a371e3442","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"series\":\"Temp\",\"data\":[[-5,37,35]],\"labels\":[\"2020-10-15 18:20\",\"2020-10-15 18:21\",\"2020-10-15 18:22\"]}]","payloadType":"json","x":270,"y":200,"wires":[["90499ece9d451f07"]]},{"id":"90499ece9d451f07","type":"ui_chart","z":"39e52d6a371e3442","name":"","group":"a61c1d23.04fe3","order":0,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"MMDD-HHmm","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"x":490,"y":200,"wires":[[]]},{"id":"a61c1d23.04fe3","type":"ui_group","name":"Latency Guage","tab":"4c764eaa7bb3a3a6","order":2,"disp":true,"width":"12","collapse":false},{"id":"4c764eaa7bb3a3a6","type":"ui_tab","name":"Main","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

But if i use Persian date like "1400-10-15 18:20" i have same problem

[{"id":"41ce43a480e30540","type":"inject","z":"39e52d6a371e3442","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"series\":\"Temp\",\"data\":[[-5,37,35]],\"labels\":[\"1400-10-15 18:20\",\"1400-10-15 18:21\",\"1400-10-15 18:22\"]}]","payloadType":"json","x":270,"y":200,"wires":[["90499ece9d451f07"]]},{"id":"90499ece9d451f07","type":"ui_chart","z":"39e52d6a371e3442","name":"","group":"a61c1d23.04fe3","order":0,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"MMDD-HHmm","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"x":490,"y":200,"wires":[[]]},{"id":"a61c1d23.04fe3","type":"ui_group","name":"Latency Guage","tab":"4c764eaa7bb3a3a6","order":2,"disp":true,"width":"12","collapse":false},{"id":"4c764eaa7bb3a3a6","type":"ui_tab","name":"Main","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

Steve-Mcl · 16 January 2022 16:01

Sorry, I didn't click the label you were using was a non Gregorian date - might have been helpful to include this info at the start.

For chart js, you can use a "date adaptor" as described here: Time · Chart.js documentation

Unfortunately, I've never done this. At a guess, you'd have to make moment or luxon available in the dashboard then setup the control message to use the data adaptor.

There are some posts around the Web. I suggest you search for "chart.js date adaptor luxon" - see if you can work it out.

Failing that, post a question in the issues in the chart.js repository.

system · 15 February 2022 16:02

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

Topic		Replies	Views
Problem with X/Y graph with ui_graph Dashboard	9	1572	9 July 2021
Dashboard line chart not working Dashboard	3	1633	1 June 2020
Can not get a simple graph to show Dashboard	14	1204	7 January 2021
Retrieving JSON data to make a chart Dashboard	8	3456	23 February 2021
Line chart not working :'( Dashboard node-red-dashboard	19	1213	30 October 2021

Problem show point-label with using line chart

Related topics