Node-Red Dashboard Graph

#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.