Node-Red Dashboard Graph

Dashboard
1

Hi there, I'm trying to send a payload that contains a number, a label and a timestamp to a graph object but nothing at all gets displayed. If I just send the number as payload the graph gets populated. I've read the documentation of the node and it looks like you can send an object that has a so a timestamp so you can control the x axes. Any help is appreciated.
This is an example of payload I send:
{"payload":30.508436,"_msgid":"475a873d.be1d48","label":"Test","timestamp":"2018-09-28T21:54:53.000Z"}

Unfortunately I can't find the escape characters on my macbook keyboard to have this formatted as suggested.

Thanks,
Paride

2

That looks about right - you are missing a topic but I don't think should matter.
Maybe use a change node to move msg.label to msg.topic

3

Thanks for your reply. I did add msg.topic to my object but it hasn't made a difference . The graph is still empty.

{"payload":30.84746,"_msgid":"380fc685.9c828a","label":"Test","topic":"Test","timestamp":"2018-09-28T20:58:53.000Z"}

I also removed tried it again removing the label altogether, with the same result.

4

which graph are you using? Do you have a small flow showing the issue?
this flow works fine fr me using a ui_gauge"

[{"id":"901249d0.076d78","type":"inject","z":"1827e8dd.2546b7","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":200,"y":340,"wires":[["f3036073.c712b8"]]},{"id":"f3036073.c712b8","type":"change","z":"1827e8dd.2546b7","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"30.84746","tot":"num"},{"t":"set","p":"label","pt":"msg","to":"test","tot":"str"},{"t":"set","p":"topic","pt":"msg","to":"test","tot":"str"},{"t":"set","p":"timestamp","pt":"msg","to":"2018-09-28T20:58:53.000Z","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":340,"wires":[["ec2ec9e1.70f5e8","704899f4.0c175"]]},{"id":"ec2ec9e1.70f5e8","type":"debug","z":"1827e8dd.2546b7","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":570,"y":340,"wires":[]},{"id":"704899f4.0c175","type":"ui_gauge","z":"1827e8dd.2546b7","name":"","group":"88b41c62.60b228","order":0,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"{{value}}","min":0,"max":"40","colors":["#00B500","#E6E600","#CA3838"],"seg1":"","seg2":"","x":570,"y":400,"wires":[]},{"id":"88b41c62.60b228","type":"ui_group","z":"","name":"Group 1","tab":"166637a3.a53dc8","order":1,"disp":true,"width":"4","collapse":false},{"id":"166637a3.a53dc8","type":"ui_tab","z":"","name":"Button Passthru test","icon":"dashboard","order":1}]
5

I'm using a Line chart

I'm suing global variables as I use them in several flows.

This is a stripped down version of my flow. But basically it reads a file, feeds it a main function and extracts some info ( ip, type, channel and value) and then adds a timestamp and sends it to the Line Chart.

The same flow works when the data comes from MQTT .

[{"id":"1e9fec6.3948c14","type":"tab","label":"grafico x/y","disabled":false,"info":""},{"id":"bbbc88f9.63c9b8","type":"function","z":"1e9fec6.3948c14","name":"Add Time","func":"var msg1=msg.payload;\nd=global.get("ladata");\no=global.get("ora");\ntransactionDateAsString=d+"T"+o;\nvar transactionDate = new Date(transactionDateAsString);\nyy=parseInt(msg.payload,10);\n//msg.label="Test";\nmsg.topic="Test";\nmsg.timestamp = transactionDate;\nmsg.payload = msg1;\nreturn msg;","outputs":1,"noerr":0,"x":580.8849906921387,"y":442.9127502441406,"wires":[["bb853597.0bc018"]]},{"id":"b720e45c.3daaf8","type":"function","z":"1e9fec6.3948c14","name":"Calispa","func":"paths = msg.payload.split(":");\nvar msgin=msg.payload;\nmsg.ladata=msgin.substring(12,22);\nmsg.ora=msgin.substring(34,42);\nmsg.ip = msgin.substring(52,60);\nmsg.typ = msgin.substring(69,72);\nmsg.ch = msgin.substring(80,81);\nmsg.val = msgin.substring(91,107);\npaths = msg.val.split(",");\nmsg.val=paths[0];\npaths = msg.val.split("\"");\nmsg.val=paths[0];\nx= parseInt(msg.val, 10);\nx=x.toString();\nmsg1={};\nmsg2={};\nmsg3={};\nmsg4={};\nmsg1={payload:msg.ip};\nmsg2={payload:msg.typ};\nmsg3={payload:msg.ch};\nmsg4={payload:x};\nglobal.set("ip",msg.ip.trim());\nglobal.set("typ",msg.typ.trim());\nglobal.set("ch",msg.ch.trim());\nglobal.set("ladata",msg.ladata.trim());\nglobal.set("ora",msg.ora.trim());\nreturn [msg1,msg2,msg3,msg4];\n","outputs":4,"noerr":0,"x":253.76633834838867,"y":423.76307678222656,"wires":[[],[],[],["83af0c4b.de146"]]},{"id":"26ecd64.7e8e52a","type":"inject","z":"1e9fec6.3948c14","name":"Restore","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":131.92095565795898,"y":255.4891357421875,"wires":[["c18e323b.eb9f7"]]},{"id":"a2ab0143.f36c1","type":"split","z":"1e9fec6.3948c14","name":"","splt":"\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":true,"addname":"payload","x":287.25432205200195,"y":346.56055784225464,"wires":[["b720e45c.3daaf8"]]},{"id":"c18e323b.eb9f7","type":"file in","z":"1e9fec6.3948c14","name":"ram_free","filename":"c:\calispa_mqtt\2018-09-28.txt","format":"utf8","chunk":false,"sendError":false,"x":275.49240493774414,"y":254.71537590026855,"wires":[["54872102.50426"]]},{"id":"54872102.50426","type":"json","z":"1e9fec6.3948c14","name":"","property":"payload","action":"str","pretty":false,"x":423.8257141113281,"y":254.00107622146606,"wires":[["a2ab0143.f36c1"]]},{"id":"83af0c4b.de146","type":"function","z":"1e9fec6.3948c14","name":"","func":"var msg=msg.payload;\nvalore= parseInt(msg, 10);\ny=valore*0.169512-20.8537;\n//y=y.toString();\nmsg2={};\nvar ip1=global.get("ip");\nvar ch1=global.get("ch");\nvar typ1=global.get("typ");\nif (ip1==="07.AB.54")\n if (typ1==="65")\n if(ch1==="0")\n {\n msg2={payload:y};\n return msg2;\n}\n","outputs":1,"noerr":0,"x":406.40581130981445,"y":429.3676643371582,"wires":[["bbbc88f9.63c9b8"]]},{"id":"4a435458.4c44ec","type":"ui_chart","z":"1e9fec6.3948c14","name":"","group":"dbbdabf5.951e28","order":1,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"8","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":890.4379768371582,"y":452.8627128601074,"wires":[[],[]]},{"id":"bb853597.0bc018","type":"delay","z":"1e9fec6.3948c14","name":"","pauseType":"delay","timeout":"700","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":747.2878837585449,"y":451.3616008758545,"wires":[["4a435458.4c44ec"]]},{"id":"dbbdabf5.951e28","type":"ui_group","z":"","name":"TEST","tab":"db9eff76.9adf7","order":2,"disp":true,"width":"12","collapse":false},{"id":"db9eff76.9adf7","type":"ui_tab","z":"1e9fec6.3948c14","name":"Home","icon":"dashboard"}]

6

Please read: How to share code or flow json

7

I 'm sorry but I already mentioned when I opened this thread that I don't have such character as mentioned in the article, on my UK English macbook keyboard.

8

what is the character next to the left hand side 'shift' key?

9

Got it. Thanks. Hope I wrapped it correctly.

[{"id":"bbbc88f9.63c9b8","type":"function","z":"1e9fec6.3948c14","name":"Add Time","func":"var msg1=msg.payload;\nd=global.get(\"ladata\");\no=global.get(\"ora\");\ntransactionDateAsString=d+\"T\"+o;\nvar transactionDate = new Date(transactionDateAsString);\nyy=parseInt(msg.payload,10);\n//msg.label=\"Test\";\nmsg.topic=\"Test\";\nmsg.timestamp = transactionDate;\nmsg.payload = msg1;\nreturn msg;","outputs":1,"noerr":0,"x":580.8849906921387,"y":442.9127502441406,"wires":[["4a435458.4c44ec"]]},{"id":"b720e45c.3daaf8","type":"function","z":"1e9fec6.3948c14","name":"Calispa","func":"paths = msg.payload.split(\":\");\nvar msgin=msg.payload;\nmsg.ladata=msgin.substring(12,22);\nmsg.ora=msgin.substring(34,42);\nmsg.ip = msgin.substring(52,60);\nmsg.typ = msgin.substring(69,72);\nmsg.ch = msgin.substring(80,81);\nmsg.val = msgin.substring(91,107);\npaths = msg.val.split(\",\");\nmsg.val=paths[0];\npaths = msg.val.split(\"\\\"\");\nmsg.val=paths[0];\nx= parseInt(msg.val, 10);\nx=x.toString();\nmsg1={};\nmsg2={};\nmsg3={};\nmsg4={};\nmsg1={payload:msg.ip};\nmsg2={payload:msg.typ};\nmsg3={payload:msg.ch};\nmsg4={payload:x};\nglobal.set(\"ip\",msg.ip.trim());\nglobal.set(\"typ\",msg.typ.trim());\nglobal.set(\"ch\",msg.ch.trim());\nglobal.set(\"ladata\",msg.ladata.trim());\nglobal.set(\"ora\",msg.ora.trim());\nreturn [msg1,msg2,msg3,msg4];\n","outputs":4,"noerr":0,"x":253.76633834838867,"y":423.76307678222656,"wires":[[],[],[],["83af0c4b.de146"]]},{"id":"26ecd64.7e8e52a","type":"inject","z":"1e9fec6.3948c14","name":"Restore","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":131.92095565795898,"y":255.4891357421875,"wires":[["c18e323b.eb9f7"]]},{"id":"a2ab0143.f36c1","type":"split","z":"1e9fec6.3948c14","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":true,"addname":"payload","x":287.25432205200195,"y":346.56055784225464,"wires":[["b720e45c.3daaf8"]]},{"id":"c18e323b.eb9f7","type":"file in","z":"1e9fec6.3948c14","name":"ram_free","filename":"c:\\calispa_mqtt\\2018-09-28.txt","format":"utf8","chunk":false,"sendError":false,"x":275.49240493774414,"y":254.71537590026855,"wires":[["54872102.50426"]]},{"id":"54872102.50426","type":"json","z":"1e9fec6.3948c14","name":"","property":"payload","action":"str","pretty":false,"x":423.8257141113281,"y":254.00107622146606,"wires":[["a2ab0143.f36c1"]]},{"id":"83af0c4b.de146","type":"function","z":"1e9fec6.3948c14","name":"","func":"var msg=msg.payload;\nvalore= parseInt(msg, 10);\ny=valore*0.169512-20.8537;\n//y=y.toString();\nmsg2={};\nvar ip1=global.get(\"ip\");\nvar ch1=global.get(\"ch\");\nvar typ1=global.get(\"typ\");\nif (ip1===\"07.AB.54\")\n if (typ1===\"65\")\n if(ch1===\"0\")\n {\n msg2={payload:y};\n return msg2;\n}\n","outputs":1,"noerr":0,"x":406.40581130981445,"y":429.3676643371582,"wires":[["bbbc88f9.63c9b8"]]},{"id":"4a435458.4c44ec","type":"ui_chart","z":"1e9fec6.3948c14","name":"","group":"dbbdabf5.951e28","order":1,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"8","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":890.4379768371582,"y":452.8627128601074,"wires":[[],[]]},{"id":"dbbdabf5.951e28","type":"ui_group","z":"","name":"TEST","tab":"db9eff76.9adf7","order":2,"disp":true,"width":"12","collapse":false},{"id":"db9eff76.9adf7","type":"ui_tab","z":"1e9fec6.3948c14","name":"Home","icon":"dashboard"}]

10

Ok I think I know what is happening. You are passing msg.timestamp as a string when it should be a number.
Timestamp in milliseconds since January 1st, 1970
try converting it to that format ans see if it fixes the issue.

11

Thanks a lot for the suggestion. Tried it and nothing has changed.
I've used: getTime();
var transactionDate = new Date(transactionDateAsString).getTime();
The new msg looks like:
{"payload":39.492571999999996,"_msgid":"20b37965.ed51a6","label":"Test","topic":"Test","timestamp":1538085766000}

12

Is it sending that same timestamp every time? Because that would mean it would plot the same position each time it ran.
Put a debug node as the output of the node feeding the graph and what does it show?

13

The timestamp changes. Here are the last 4 objects passed to the Graph
{"payload":30.508436,"_msgid":"1e147b54.caf325","label":"Test","topic":"Test","timestamp":1538171693000}
{"payload":30.338924000000002,"_msgid":"d8155f57.fbd51","label":"Test","topic":"Test","timestamp":1538171733000}
{"payload":30.677947999999997,"_msgid":"81500ab9.9cddc8","label":"Test","topic":"Test","timestamp":1538171773000}
{"payload":30.508436,"_msgid":"623c7c98.a34814","label":"Test","topic":"Test","timestamp":1538171813000}

14

Works for me. I put your data in 4 change nodes and send it on to the graph - try this yourself

[{"id":"14f80044.009948","type":"ui_chart","z":"5663b1a1.ea1228","name":"","group":"a49d96df.29f21","order":1,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"8","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":610,"y":540,"wires":[[],[]]},{"id":"507c4f49.57dcd","type":"inject","z":"5663b1a1.ea1228","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":480,"wires":[["92f5ee08.5b8b98"]]},{"id":"92f5ee08.5b8b98","type":"change","z":"5663b1a1.ea1228","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"30.508436","tot":"str"},{"t":"set","p":"label","pt":"msg","to":"Test","tot":"str"},{"t":"set","p":"topic","pt":"msg","to":"Test","tot":"str"},{"t":"set","p":"timestamp","pt":"msg","to":"1538171693000","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":480,"wires":[["14f80044.009948","f6e276bf.ecff1"]]},{"id":"615ff0c.da9a49","type":"inject","z":"5663b1a1.ea1228","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":520,"wires":[["3c412f33.f8c1b"]]},{"id":"3c412f33.f8c1b","type":"change","z":"5663b1a1.ea1228","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"30.338924000000002","tot":"str"},{"t":"set","p":"label","pt":"msg","to":"Test","tot":"str"},{"t":"set","p":"topic","pt":"msg","to":"Test","tot":"str"},{"t":"set","p":"timestamp","pt":"msg","to":"1538171733000","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":520,"wires":[["14f80044.009948"]]},{"id":"bd965f17.cb696","type":"inject","z":"5663b1a1.ea1228","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":560,"wires":[["faa19630.dea97"]]},{"id":"faa19630.dea97","type":"change","z":"5663b1a1.ea1228","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"30.677947999999997","tot":"str"},{"t":"set","p":"label","pt":"msg","to":"Test","tot":"str"},{"t":"set","p":"topic","pt":"msg","to":"Test","tot":"str"},{"t":"set","p":"timestamp","pt":"msg","to":"1538171773000","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":560,"wires":[["14f80044.009948"]]},{"id":"aa2d07cd.ae2fd","type":"inject","z":"5663b1a1.ea1228","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":600,"wires":[["499060ff.a20ad"]]},{"id":"499060ff.a20ad","type":"change","z":"5663b1a1.ea1228","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"30.508436","tot":"str"},{"t":"set","p":"label","pt":"msg","to":"Test","tot":"str"},{"t":"set","p":"topic","pt":"msg","to":"Test","tot":"str"},{"t":"set","p":"timestamp","pt":"msg","to":"1538171813000","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":600,"wires":[["14f80044.009948"]]},{"id":"a49d96df.29f21","type":"ui_group","z":"","name":"TEST","tab":"9941c55d.9f1848","order":2,"disp":true,"width":"12","collapse":false},{"id":"9941c55d.9f1848","type":"ui_tab","z":"5663b1a1.ea1228","name":"Home2","icon":"dashboard"}]
2 Likes
15

yes that works. I need to find how to get it working in my function as I get hundreds of inputs when I restore the Graph from the file.
Thanks for all your help so far.

16

I've noticed that the charting library is fairly tolerant of the "format" of timestamps that it accepts -- the ISO-8601 formatted string 2018-09-28T20:58:53.000Z does not have to be converted to javascript millisenconds in order to render correctly.