How to add sectors in a gauge?

Hi,
I'm starting with node-red, I'm trying to learn quickly by myself but I need help here :slight_smile:

I need a 3rd sector:

  • green : 0 - 50
  • yellow : 50 - 70
  • orange : 70 - 80
  • red : 80 - 100

can you help me? Thank you

The gauge only supports 3 sectors.

Have a look at node-red-contrib-ui-artless-gauge which can use more sectors.

There are examples of gauges with more sectors in this thread: September giveaway.
Needs some CSS knowledge though.

Still, it is possible with dashboard native gauge.

[{"id":"5c4c5120.bb035","type":"ui_gauge","z":"69a83901969741f7","name":"","group":"dc4d8303.df87","order":0,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"{{value | number:1}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"5","seg2":"7","x":770,"y":760,"wires":[]},{"id":"b26a6748.70f428","type":"function","z":"69a83901969741f7","name":"options","func":"msg.ui_control = {options:{customSectors: {\n  percents: false, \n  ranges: [{\n    color : \"#009900\",\n    lo : 0,\n    hi : 2\n  },{\n    color : \"#33cccc\",\n    lo : 2.1,\n    hi : 4\n  },{\n    color : \"#3366ff\",\n    lo : 4.1,\n    hi : 6\n  },{\n    color : \"#ff00ff\",\n    lo : 6.1,\n    hi : 8\n  },{\n    color : \"#ff0000\",\n    lo : 8.1,\n    hi : 10\n  }]\n    \n}}}\ndelete msg.payload\nreturn msg;","outputs":1,"noerr":0,"x":580,"y":860,"wires":[["5c4c5120.bb035"]]},{"id":"ef9011e5.8e00d","type":"ui_slider","z":"69a83901969741f7","name":"","label":"slider","tooltip":"","group":"dc4d8303.df87","order":1,"width":0,"height":0,"passthru":true,"outs":"end","topic":"","min":0,"max":10,"step":"2","x":430,"y":760,"wires":[["5c4c5120.bb035"]]},{"id":"b2eb7e33.b3416","type":"ui_button","z":"69a83901969741f7","name":"","group":"dc4d8303.df87","order":2,"width":0,"height":0,"passthru":false,"label":"2 colors","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":420,"y":820,"wires":[["22f666e0.f2ceda"]]},{"id":"d3416f08.ad98e","type":"ui_button","z":"69a83901969741f7","name":"","group":"dc4d8303.df87","order":2,"width":0,"height":0,"passthru":false,"label":"5 colors","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":420,"y":860,"wires":[["b26a6748.70f428"]]},{"id":"22f666e0.f2ceda","type":"function","z":"69a83901969741f7","name":"options","func":"msg.ui_control = {options:{customSectors: {\n  percents: false, \n  ranges: [{\n    color : \"#ffff00\",\n    lo : 0,\n    hi : 5\n  },{\n    color : \"#3399ff\",\n    lo : 5.01,\n    hi : 10\n  }]\n    \n}}}\ndelete msg.payload\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":580,"y":820,"wires":[["5c4c5120.bb035"]]},{"id":"dc4d8303.df87","type":"ui_group","name":"Charts","tab":"18e7297.06310d7","order":1,"disp":true,"width":"6"},{"id":"18e7297.06310d7","type":"ui_tab","name":"Home","icon":"dashboard"}]
2 Likes

Hello,
thank you very much for your support.
I have a preference for the modification of the native gauge. But I will study the other options

bye

Hi
It's me again,

How to integrate variables to define my sectors ?

msg.ui_control = {options:{customSectors: {
  percents: false, 
  ranges: [{
    color : "#009900",
    lo : 0,
    hi : 2
  },{
    color : "#33cccc",
    lo : 2.1,
    hi : 4
  },{
    color : "#3366ff",
    lo : 4.1,
    hi : 6
  },{
    color : "#ff00ff",
    lo : 6.1,
    hi : 8
  },{
    color : "#ff0000",
    lo : 8.1,
    hi : 10
  }]
    
}}}
delete msg.payload
return msg;

I would like to do something like this

msg.ui_control = {options:{customSectors: {
  percents: false, 
  ranges: [{
    color : "#33FF5E",
    lo : 0,
    hi : msg1.payload,
  },{
    color : "#FFFF33",
    lo : msg1.payload,
    hi : msg2.payload,
  },{
    color : "#FFBB33",
    lo : msg2.payload,
    hi : msg3.payload,
  },{
    color : "#FF3333",
    lo : msg3.payload,
    hi : 100,
  }]
    
}}}
delete msg.payload
return msg;

the node-red paradigm confuses me

thanks in advance

As all of your flow data will need to arrive at the same time, it would probably be better to format the data into the one msg, instead of separate msg's - msg2, msg3.

Something like;

msg.payload.one
msg.payload.two
msg.payload.three

Hi,

I did this and it works

msg.ui_control = {options:{customSectors: {
  percents: false, 
  ranges: [{
    color : "#33FF5E",
    lo : 0,
    hi : msg.payload[0],
  },{
    color : "#FFFF33",
    lo : msg.payload[0],
    hi : msg.payload[1],
  },{
    color : "#FFBB33",
    lo : msg.payload[1],
    hi : msg.payload[2],
  },{
    color : "#FF3333",
    lo : msg.payload[2],
    hi : 100,
  }]
    
}}}
delete msg.payload
return msg;

Thanks again

2 Likes