How do you create a simple "traffic light" indicator on a Canvas dashboard?

Elastic Stack Kibana
1

Hi all,

I'm trying to create a standard traffic-light-style widget in Canvas, but I can't seem to find an element in the collection (we're on 7.2x) that fits this idea. What I want to be able to do is upload an SVG widget, and have the colour of it change according to a set of thresholds against a metric value (e.g. 10=green, 20=amber, 30=red). I've had a play around with widgets such as the image reveal etc, but I'm beginning to think this is something outside the scope of the widgets provided.

Any thoughts or suggestions?

Thanks in advance.

2

I managed to answer my own question, here's the answer to save someone else one day.

Upload your images/svgs as elements. Then take note of the names of each.

Put an object down on your canvas and replace everything in the expression editor with this (replacing your own values as required):

filters
| esdocs index="yourindexnamehere*"
fields="yourfieldnamehere"
query="yourfieldhere:yourvaluehere"
count=1
| math "last(fieldtodisplaylateststatusof)"
| image dataurl={switch
case={case if={eq 200} then={asset asset-12345678-1234-1234-1234-123456789012}}
case={case if={eq 400} then={asset asset-12345678-1234-1234-1234-123456789012}}
case={case if={eq 500} then={asset asset-12345678-1234-1234-1234-123456789012}}
default={asset asset-12345678-1234-1234-1234-123456789012}
}
mode="contain"
| render

This means when the returned field equals 200 then it will use the first image asset, and it will change to the other image assets accordingly as you define each of the case conditions.

Hope this helps someone.

1 Like
3

Hi @irwazr, thanks for posting your solution!

4

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