✨ FlexDash alpha release - round 3

The tooltip box is supposed to swing to the left and right mid way across the screen.
It's to ensure that the box is always visible when the points are close to the edges of the chart.

Makes sense, but i didn't raise it as an issue, just thought this information (that there are only two points shown in tooltip, one extreme left and one extreme right) would give some help in trying to understand what is the issue.

I realise it's not helping with your problem, but I'm running the same versions as you on a pi, and same browser, and it works fine here.

cursor

This is odd... What version of FlexDash are you running, it's shown in the very top right corner. Also, please have a look at the browser console and paste any warnings/errors that may be there.

image

image

... ... ...

only showing one issue no warning

image


1. A page or script is accessing at least one of `navigator.userAgent`, `navigator.appVersion`, and `navigator.platform`. Starting in Chrome 101, the amount of information available in the User Agent string will be reduced.

To fix this issue, replace the usage of `navigator.userAgent`, `navigator.appVersion`, and `navigator.platform` with feature detection, progressive enhancement, or migrate to `navigator.userAgentData`.

Note that for performance reasons, only the first access to one of the properties is shown.

2. AFFECTED RESOURCES

  1. 1 source

    1. index.a23dd9ed.js:1

Another question is whether this only happens for this plot or for all plots. E.g. if you import one of the demo plots or someone else's samples does it show as well?
If it does, if you disable your plot (disable the node at the bottom of its edit page) does it still show on other plots?
If it doesn't, can you paste a sample flow to reproduce, or a full capture of the messages sent to the plot?

Its only with my example. Demo flow is working good.

timeplot2

Then I would assume that it has to do with the data you feed into the plot. If you could somehow post that, that would be great. E.g. either an inject node into which you paste the message you gather using a debug node or the raw message(s). I'm wondering whether there's some value there that causes issues or some combination of settings. Hmmm, a repro using an inject node and your plot node would be ideal.

(I'm not saying it's the fault of the data, the tooltip shouldn't do that..)

I have copied the results of mysql query and pasted into an inject node then i do conversion of the data with a change node to FD input format, hope this helps.

[{"id":"9e8e0553e01aa7d6","type":"fd-time-plot","z":"1543d308b342690a","fd_container":"69c2e3f5798c3475","fd_cols":9,"fd_rows":"4","fd_array":false,"fd_array_max":10,"name":"","title":"Time Plot","popup_info":"","data":"","labels":[],"colors":[],"axes":[],"widths":[],"span_gaps":[],"left_unit":"","left_min":null,"left_max":null,"left_decimals":1,"left_isoprefix":false,"left_log":false,"right_unit":"","right_min":null,"right_max":null,"right_decimals":1,"right_isoprefix":false,"right_log":false,"reverse_legend":false,"x":780,"y":660,"wires":[]},{"id":"3a18573ece57e995","type":"inject","z":"1543d308b342690a","name":"sample plot","props":[{"p":"payload"},{"p":"widths","v":"[2,2]","vt":"json"},{"p":"span_gaps","v":"[true,true]","vt":"json"},{"p":"colors","v":"[\"green\",\"red\"]","vt":"json"},{"p":"labels","v":"[\"PPM\",\"Temperature\"]","vt":"str"},{"p":"limit","v":"1440","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"[{\"Time\":1672161840,\"m\":0,\"temp\":84.9},{\"Time\":1672161780,\"m\":0,\"temp\":85.2},{\"Time\":1672161720,\"m\":0,\"temp\":86.4},{\"Time\":1672161660,\"m\":0,\"temp\":86.7},{\"Time\":1672161600,\"m\":0,\"temp\":87},{\"Time\":1672161540,\"m\":0,\"temp\":87},{\"Time\":1672161480,\"m\":0,\"temp\":87.6},{\"Time\":1672161420,\"m\":9,\"temp\":88.2},{\"Time\":1672161360,\"m\":9,\"temp\":89.4},{\"Time\":1672161300,\"m\":8,\"temp\":94.8},{\"Time\":1672161240,\"m\":9,\"temp\":96.3},{\"Time\":1672161180,\"m\":9,\"temp\":95.4},{\"Time\":1672161120,\"m\":8,\"temp\":94.8},{\"Time\":1672161060,\"m\":3,\"temp\":93.9},{\"Time\":1672161000,\"m\":0,\"temp\":73.8},{\"Time\":1672160940,\"m\":0,\"temp\":74.7},{\"Time\":1672160880,\"m\":0,\"temp\":75.6},{\"Time\":1672160820,\"m\":0,\"temp\":76.5},{\"Time\":1672160760,\"m\":0,\"temp\":77.4},{\"Time\":1672160700,\"m\":0,\"temp\":77.7},{\"Time\":1672160643,\"m\":0,\"temp\":79.2},{\"Time\":1672160583,\"m\":0,\"temp\":79.8},{\"Time\":1672160520,\"m\":0,\"temp\":80.4},{\"Time\":1672160460,\"m\":0,\"temp\":81},{\"Time\":1672160400,\"m\":0,\"temp\":81.9},{\"Time\":1672160340,\"m\":0,\"temp\":83.1},{\"Time\":1672160280,\"m\":0,\"temp\":83.1},{\"Time\":1672160220,\"m\":0,\"temp\":83.7},{\"Time\":1672160160,\"m\":0,\"temp\":84.9},{\"Time\":1672160100,\"m\":0,\"temp\":86.1}]","payloadType":"json","x":290,"y":660,"wires":[["cf52d104a3ab9f9a"]]},{"id":"cf52d104a3ab9f9a","type":"change","z":"1543d308b342690a","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"$$.payload.[$.*]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":500,"y":660,"wires":[["9e8e0553e01aa7d6"]]},{"id":"69c2e3f5798c3475","type":"flexdash container","name":"Demo grid","kind":"StdGrid","fd_children":",97e34cb72c2f36bd,9a180f1ef444158f,9e8e0553e01aa7d6,3fe1da77bb1eba36,7e5af03cd7a62a33","title":"","tab":"fef6c0f6d48841d6","min_cols":"1","max_cols":"6","parent":"","solid":false,"cols":"1","rows":"1"},{"id":"fef6c0f6d48841d6","type":"flexdash tab","name":"Demo","icon":"mdi-view-dashboard","fd_children":",69c2e3f5798c3475","fd":"e8f5aea52ab49500"}]

I can repro and there's the warning in the console:

Warning: for TimePlot failed to type-cast prop 'data': Error: cannot convert JSON value to Array

I'll have to look at it later, have some errands to run now...
Thanks for the repro!

Your problem is the msg.label prop:
image

Add a debug node to your flow and inspect the message:

I need to show that warning in FD somewhere...?

Just got started with fd, so bear with me. I wanted to test the time series but running into an error after importing it from the samples:

TimePlotRaw: data must be an array of rows (arrays)

Node-RED: 3.0.2
Node: 16.x

A couple of suggestions:

  • read the help provided with the TimePlot node, I know it's not the easiest to digest prose, so...
  • look at the messages used in the demos
  • post either your message or the test flow you're using here so we can see what you're trying to do and suggest how you might fix it

Sorry for not being specific. This sample does not work out of the box on my system:
image

The time plot raw seems to work.

1 Like

Got it, thanks for flagging it!

Great work btw! Sorry, I should have mentioned this first :see_no_evil:

I have added the debug node output of both my sample and your example. i couldn't make out any difference, except that mine has two and your example has 6 series.

image

Please copy your message from that debug pane and paste here (there's a copy button/icon to the right of the top-level object drop-down)

Ooops, the issue is that labels needs to be an array, not a string representation of an array.
(Not clear to me why "your example" (mine) works)