node-red-contrib-ui-statechart

Description

Node-RED dashboard widget. Bar chart to visualize numeric values in relation, together with state represented by color.

State chart is special chart to combine visualization of value relations with state. The state is fully under user control. Chart doesn't calculate state for the series.

Configuration

Series

Configuring the series is mandatory. Series presented as name of the bar. Make them short as they do not rotate or scale. Configuration input of the series must be filled with comma separated string. Avoid space unless it is intentional.

For example: dog,cat,cow,sheep,goat

Series shortcuts

In addition the series can be automatically generated for 24 hours.
By using shortcut 24H the series generated with format 00,01,02,...,22,23

Shortcut 24h generates series without leading zeros - 0,1,2,...,22,23

Using valid shortcut adds option to turn on the highlight of bar represents current hour. To do so, use syntax 24H|L

Limits

By default the graph will be autoscaling so that it will adjust the y-axis to the range of the data. You can change this behavior by explicitly setting the limits. To do this uncheck Use dataset min & max checkbox and specify custom limits. One or both limits can be specified. If only one limit is specified, the other will still auto-scale. The y-axis will then range at least from Min to Max. Auto-scaling will still permit those boundaries to be stretched if the dataset exceeds the specified limits.

Other configurable options

• Hide or show values
• Color of bars
• Font sizes
• Color of texts

Input

Every bar in chart can be updated with new data independently. So you can send new data only for series where changes are needed.

msg.payload should carry an array of Object(s) where required properties are:

• series - (string) name of series
• value - (number) value
• state - (boolean) state

Optional property

• color - (string) color of bar

color property sets the color for the bar. This overrides the state and the colors defined in config. Accepted definition of color is named HTML color, RGB or hex (e.g red , RGB(100,50,64), #00CC45)

msg.payload = [{series:"A",value:123,state:true, color:"#00CC45"},{series:"D",value:32,state:false}]

msg.title (string) title of chart can be changed by sending new value msg.title = TILE OF CHART

Appendix

This widget is created for dedicated use. This restricts adding external dependencies and the widget must be held lightweight and responsive. Adding new options is highly possible if it makes sense and can be done with full respect of above.