Plotting to Chart from Serial port in @flowfuse/node-red-dashboard

[samyak5]

I just can't plot the values from my serial port vs time using the flowfuse dashboard.
It works just fine with the dashboard V1, using the default ui-chart.

My flow:

It does recognise the msg.topic field and add it to the legend, but it doesn't plot them.
I tried using a function to also add a msg.topic so it wasn't undefined, but to no avail.
Surprisingly, it works when I enter random values or timestamps into the chart.

In Dashboard V1, it works without any functions or extra codes, just setup the serial and connect and initialise the chart, and it works.

The output:

What's the problem?
How can I fix it? I'm new.

my flow:

[{"id":"772da7125e44b0f6","type":"tab","label":"Flow 1","disabled":false,"info":"","env":},{"id":"9535b3f03a204487","type":"serial in","z":"772da7125e44b0f6","name":"COM13","serial":"341dea65ee79cea0","x":470,"y":300,"wires":[["f287a15a299c13ed","6659d1232d1df186","2941efe7480c0257"]]},{"id":"f287a15a299c13ed","type":"debug","z":"772da7125e44b0f6","name":"debug 1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":760,"y":300,"wires":},{"id":"6659d1232d1df186","type":"ui-text","z":"772da7125e44b0f6","group":"fe249a94b0124e3f","order":0,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","className":"","x":750,"y":380,"wires":},{"id":"2941efe7480c0257","type":"ui-chart","z":"772da7125e44b0f6","group":"fe249a94b0124e3f","name":"","label":"chart","order":9007199254740991,"chartType":"line","category":"topic","categoryType":"msg","xAxisProperty":"","xAxisPropertyType":"msg","xAxisType":"time","yAxisProperty":"","ymin":"","ymax":"","action":"append","pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"width":6,"height":8,"className":"","x":750,"y":460,"wires":[]},{"id":"341dea65ee79cea0","type":"serial-port","name":"","serialport":"COM13","serialbaud":"9600","databits":"8","parity":"none","stopbits":"1","waitfor":"","dtr":"none","rts":"none","cts":"none","dsr":"none","newline":"\n","bin":"false","out":"char","addchar":"","responsetimeout":"10000"},{"id":"fe249a94b0124e3f","type":"ui-group","name":"My Group","page":"ea5b8f9460b43a6a","width":6,"height":1,"order":-1,"showTitle":true,"className":"","visible":true,"disabled":false},{"id":"ea5b8f9460b43a6a","type":"ui-page","name":"Page N","ui":"dc5ce85f08196d58","path":"/pageN","icon":"home","layout":"grid","theme":"c28a61c7727d3d97","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"dc5ce85f08196d58","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default"},{"id":"c28a61c7727d3d97","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

[Paul-Reed]

I see that you have a debug node attached, so can you screenshot what is being displayed in the debug sidebar.

[samyak5]

@Paul-Reed

so can you screenshot what is being displayed in the debug sidebar.

It's data from a distance sensor.

I tried removing the newline character by using slice, the issue still prevails.

[Paul-Reed]

You maybe need to convert the values from strings to numbers

[samyak5]

That worked, thanks!

I added a function right at the serial out with:

msg.payload = parseFloat(msg.payload.slice(0,-1));
return msg;

[Paul-Reed]

@samyak5

parseFloat(msg.payload.slice(0,-1))

@samyak5 Is slicing necessary? I thought parseFloat would ignore the newline character.

It might also be good practice to add a check to make sure that it converted correctly. For example, if the serial feed spat out some unexpected data, parseFloat would output NaN, which would cause problems with your chart.
Something like...

msg.payload = parseFloat(msg.payload)
if (isNaN(msg.payload)) {
node.error("unexpected input format")
return
}
else return msg

[joepavitt]

Can I double check, D1.0 handles this out of the box, without needing to format?

If thats the case, I may need to add a parseFloat to the client side so that we match behaviours

I dont think Node-RED users should need to concern themslves with type conversions in order to plot the data, so it feels sensible.

[samyak5]

@joepavitt

Can I double check, D1.0 handles this out of the box, without needing to format?

Yes, apparently it does. I didn't parse the serial out as float, and It ran perfectly.

[dceejay]

Yes. If someone is sending something to a chart then I thought it was sensible to assume they meant it to be a number.

[samyak5]

Yeah, now it looks stupid on my part. Iwas particularly confused as it worked with the dashboard v1.