Horizontal Bar Graph

Dashboard
, ,
1

I saw a few posts about horizontal bar graphs, and read about Plotly. I'd prefer to avoid an external dependency if I can.

The dashboard Chart node supports a horizontal bar graph, but it lacks two things I'm looking for:

  • overlaying text on the bar
  • a different scale than the bar min and max values

I have data that varies between -140 and -40. I'd like to plot that. When I plot a negative range like that, the Bar extends from right to left. It's easy enough to convert the value to a positive number, but I'd still like to display the scale from -140 to -40.

Am I overlooking something here? I know a little about html, and have used the UI template for a few really simple displays, just for formatted text.

rpi 3b+, NR ver 4.0.5

Thanks,
Don

2

Not a Dashboard component - though it should be usable with either D1 or D2, I have an LED gauge web component if that helps. Though it does not currently allow separate setting of the LED values, I don't think it would be that hard to do, I'd be happy to try if you find the component otherwise useful.

https://wc.totallyinformation.net/tests/live/led-gauge

3

Thanks for the reply. I'll take a look.

6

In case you are still interested, you should note that all of the settings are, in fact, controllable both from node-red and from front-end JavaScript.

For example, this inject node will change the max of the gauge:

image
image829Ă—395 14.3 KB

max, min, unit, value, number of segments and hide-segment-labels are all controllable in addition to classes and styles.

LED segment colours can also be changed:

image
image889Ă—391 16.6 KB

You can even change the label text:

image
image906Ă—399 16.2 KB

image
image1019Ă—140 2.52 KB

Also, clicking on a segment returns data to Node-RED.

7

Just for fun, here is a representation of wind speeds using colours based n the beaufort scale of danger.

The Beaufort scale runs from 0-12. 12 is 73+mph, I've capped the gauge at 100mph though the highest recorded wind speed is around 250mph.

image

[{"id":"6d51534aa8d488cf","type":"inject","z":"2c47031326e8fd01","g":"0958c88d9e5ba8df","name":"led-gauge::led-gauge-1 - Change to wind-speed with beaufort scale colors","props":[{"p":"topic","vt":"str"},{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"led-gauge::led-gauge-1","payload":"{\"innerText\":\"Wind Speed (Beaufort Scale, Max. 100 mph)\",\"min\":0,\"max\":100,\"colors\":{\"1\":150,\"3\":160,\"7\":170,\"12\":190,\"18\":210,\"24\":220,\"31\":50,\"38\":40,\"46\":30,\"54\":15,\"63\":0,\"72\":350,\"100\":330,\"250\":320},\"unit\":\"mph\"}","payloadType":"json","x":360,"y":840,"wires":[["e2b716427578f873"]]},{"id":"6ed93d4d08ba0502","type":"inject","z":"2c47031326e8fd01","g":"0958c88d9e5ba8df","name":"led-gauge::led-gauge-1 - set to random wind speed (0-250)","props":[{"p":"topic","vt":"str"},{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"led-gauge::led-gauge-1","payload":"{\t    \"value\": $floor($random() * 250)\t}","payloadType":"jsonata","x":310,"y":880,"wires":[["135c2057a2bdc76b"]]}]