Creation of status bar

[Rik_Bormans]

I created this colored bar by using only a label in a view and a flex repeater on another view where the instances are updated every x minutes.

For now this works, but I was wondering if there was already such a component or solution available?

[JordanCClark]

There's a ribbon chart on the exchange.

Ignition Exchange

[Transistor]

You could also use a label and set the color bands using CSS.

• Size the label component as required.
• Add the property, style.backgroundImage.
• Set the property to

linear-gradient(90deg, 
    blue 3%, #00ff00 3%, 
    #00ff00 8%, blue 8%,
    blue 15%, #00ff00 15%, 
    #00ff00 32%, blue 32%
)

You would then add a script binding to the backgroundImage setting to generate the CSS.

The main trick with this is to prevent an actual gradient by defining hard transition points. In the example we can see that the blue runs from 0 (implied) to 3% and the green starts at 3%, etc.

[csjohnson]

The help manual also has a decent tutorial on how to build this. You have to use the XY Chart component in Perspective.

It is a bit unintuitive but it does work.

[Ujwal_Wankhede]

You can refer following resource posted by me for additional customization in XY chart.

Ignition Exchange