What should I do if I set the x-axis of the chart with the information entered as text?

I want to get x-axis information as text (eg 'HH: mm: ss') and set it as the x-axis of the chart. The x-axis setting item is custom and its contents are set to moment.format (msg.payload) or msg.paload. However, node-red does not treat this as a msg object, but recognizes it as:
m (month)
s (second)
g.p
a (AM, PM)
ylo
a (AM, PM)
d (date)

I'm attaching the code below.
HELP ME!!!

[{"id":"69ba6bc.2301f94","type":"tab","label":"플로우 4","disabled":false,"info":""},{"id":"1fde4623.44e68a","type":"function","z":"69ba6bc.2301f94","name":"","func":"for (var i=0;i<100;i++) {\n    node.send({payload:i})\n}\nreturn msg;","outputs":1,"noerr":0,"x":310,"y":320,"wires":[["88cc72b5.a794e"]]},{"id":"cd8a6d20.c1a8a","type":"inject","z":"69ba6bc.2301f94","name":"timestemp","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":100,"y":320,"wires":[["1fde4623.44e68a"]]},{"id":"88cc72b5.a794e","type":"delay","z":"69ba6bc.2301f94","name":"","pauseType":"rate","timeout":"1","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":490,"y":320,"wires":[["e7e95f45.76db4","aa6df58a.e771a8"]]},{"id":"e7e95f45.76db4","type":"debug","z":"69ba6bc.2301f94","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":670,"y":220,"wires":[]},{"id":"aa6df58a.e771a8","type":"ui_chart","z":"69ba6bc.2301f94","name":"chart1","group":"b9ab80ba.7fea2","order":1,"width":0,"height":0,"label":"chart1","chartType":"line","legend":"false","xformat":"moment.format(msg.payload)","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":660,"y":120,"wires":[[]]},{"id":"24c836d3.74adaa","type":"function","z":"69ba6bc.2301f94","name":"text","func":"var lastinput = context.get(\"lastinput\") || \"\";\n\nif(msg.topic == \"textinput\"){\n    lastinput = msg.payload;\n    context.set(\"lastinput\",lastinput);\n}\n\nif(msg.topic == \"save\"){\n    msg.payload = lastinput;\n    return msg;\n}\n\n\n","outputs":1,"noerr":0,"x":330,"y":180,"wires":[["e7e95f45.76db4","aa6df58a.e771a8"]]},{"id":"f651704.71c0e9","type":"ui_button","z":"69ba6bc.2301f94","name":"","group":"f2832e9.5caf2d","order":32,"width":0,"height":0,"passthru":false,"label":"save","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"save","x":90,"y":240,"wires":[["24c836d3.74adaa"]]},{"id":"28237e07.f47082","type":"ui_text_input","z":"69ba6bc.2301f94","name":"","label":"text","tooltip":"","group":"f2832e9.5caf2d","order":31,"width":0,"height":0,"passthru":true,"mode":"text","delay":300,"topic":"textinput","x":90,"y":140,"wires":[["24c836d3.74adaa"]]},{"id":"b9ab80ba.7fea2","type":"ui_group","z":"","name":"chartmain1","tab":"b7671920.3fc3d8","disp":true,"width":"6","collapse":false},{"id":"f2832e9.5caf2d","type":"ui_group","z":"","name":"inputgroup","tab":"b7671920.3fc3d8","disp":true,"width":"6","collapse":false},{"id":"b7671920.3fc3d8","type":"ui_tab","z":"","name":"tab2","icon":"dashboard","disabled":false,"hidden":false}]

Please go read this thread and then edit your post and insert your flow so it can be imported.

If I understand correctly, you want to change display-format of x-axis values dynamically.
It is possible but takes a bit more than chart configuration page offers.
I modified your flow a bit to show how it can be done. It is not complete solution but may get things going.

[{"id":"77bfdb1b.0ab394","type":"function","z":"35fb28ce.c31e68","name":"","func":"for (var i=0;i<100;i++) {\n    node.send({payload:i})\n}\nreturn msg;","outputs":1,"noerr":0,"x":310,"y":320,"wires":[["2291cfba.d779c"]]},{"id":"89d36e79.d2452","type":"inject","z":"35fb28ce.c31e68","name":"timestemp","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":330,"wires":[["77bfdb1b.0ab394"]]},{"id":"2291cfba.d779c","type":"delay","z":"35fb28ce.c31e68","name":"","pauseType":"rate","timeout":"1","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":470,"y":300,"wires":[["88975e48.22bcf","3358b733.898f18"]]},{"id":"88975e48.22bcf","type":"debug","z":"35fb28ce.c31e68","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":730,"y":230,"wires":[]},{"id":"3358b733.898f18","type":"ui_chart","z":"35fb28ce.c31e68","name":"chart1","group":"3e589e68.484192","order":1,"width":0,"height":0,"label":"chart1","chartType":"line","legend":"false","xformat":"mmm","interpolate":"linear","nodata":"","dot":false,"ymin":"0","ymax":"100","removeOlder":"5","removeOlderPoints":"","removeOlderUnit":"60","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":660,"y":120,"wires":[[]]},{"id":"a52f1c3e.1c222","type":"function","z":"35fb28ce.c31e68","name":"text","func":"var lastinput = context.get(\"lastinput\") || \"\";\n\nif(msg.topic == \"textinput\"){\n    lastinput = msg.payload;\n    context.set(\"lastinput\",lastinput);\n}\n\nif(msg.topic == \"save\"){\n    msg.payload = lastinput;\n    return msg;\n}\n\n\n","outputs":1,"noerr":0,"x":250,"y":190,"wires":[["88975e48.22bcf","cc57451.f9db4b8"]]},{"id":"44bf5fa6.4cc01","type":"ui_button","z":"35fb28ce.c31e68","name":"","group":"383c7c68.0761a4","order":32,"width":0,"height":0,"passthru":false,"label":"save","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"save","x":90,"y":240,"wires":[["a52f1c3e.1c222"]]},{"id":"1a77dff8.b5618","type":"ui_text_input","z":"35fb28ce.c31e68","name":"","label":"text","tooltip":"","group":"383c7c68.0761a4","order":31,"width":0,"height":0,"passthru":true,"mode":"text","delay":300,"topic":"textinput","x":90,"y":140,"wires":[["a52f1c3e.1c222"]]},{"id":"cc57451.f9db4b8","type":"function","z":"35fb28ce.c31e68","name":"prepare message for axis","func":"//Explore this for more info: https://www.chartjs.org/docs/latest/axes/cartesian/time.html\n\n// see the \"time\" part. there is 2 properties - unit and displayFormat\n//Possible values for hour \n// H\t0 1 ... 22 23\n// HH\t00 01 ... 22 23\n// h\t1 2 ... 11 12\n// hh\t01 02 ... 11 12\n// k\t1 2 ... 23 24\n// kk\t01 02 ... 23 24\n\n// in this setup you can only send displayformat for one type of unit (hour is set currently)\n// if you want to change scale more than one unit can handle\n// you'll need to make unit also dynamic (can use msg topic for example)\n\nmsg.ui_control = {\n    options: {\n        scales: {\n            xAxes: [{\n                type: 'time',\n                time: {\n                    unit:'hour',\n                    displayFormats: {\n                        hour: msg.payload\n                    }\n                }\n            }]\n        }\n    }\n}\n\ndelete msg.payload // do not send this payload to chart\ndelete msg.topic // do not send this topic to chart\nreturn msg;","outputs":1,"noerr":0,"x":390,"y":110,"wires":[["3358b733.898f18"]]},{"id":"7bac815b.f15d7","type":"inject","z":"35fb28ce.c31e68","name":"clear","topic":"","payload":"[]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":540,"y":30,"wires":[["3358b733.898f18"]]},{"id":"3e589e68.484192","type":"ui_group","z":"","name":"chartmain1","tab":"c2c2e389.89428","disp":true,"width":"6","collapse":false},{"id":"383c7c68.0761a4","type":"ui_group","z":"","name":"inputgroup","tab":"c2c2e389.89428","disp":true,"width":"6","collapse":false},{"id":"c2c2e389.89428","type":"ui_tab","z":"","name":"tab2","icon":"dashboard","disabled":false,"hidden":false}]
1 Like