Horizontal Bar Graph

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

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

2 Likes

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

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

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:

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:

You can even change the label text:

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

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"]]}]
2 Likes