Canvas conditional statement

Elastic Stack Kibana
1

Hi,
Is it possible to add, on the canvas, an element that, based on the value of a field of an index, shows an image instead of another?

Thank you

2

Yes thats possible.
This canvas example has a lot of conditionals

1 Like
3

That file is a NDJSON file. I tried to upload in Canvas...but I have error....

4

This is a saved object file.
Go to Kibana Management -> Saved Objects -> Import to import the file.

1 Like
5

Ok, now I have:

| essql 
 query="SELECT 
 DATEDIFF('minute',date, CURRENT_TIMESTAMP()) as diff
FROM
device_data_bridgenuzoo
ORDER BY date DESC LIMIT 1"
| if {compare "\"diff\"" "gte" to=20} then="X"
| if {compare "\"diff\"" "lt" to=20} then="Y"

how can I show/hide image of the canvas, based on results of compare?
Thanks

6

You better add one image element and make the If statement within the data url to choose your asset.

Easiest way is adding both images via the ui first so that you see how the dataurl needs to look like.

1 Like
7

Yes, I already added the two images on canvas.

How can I say "display one image with id:x and hide the image with id: y" in markdown?

Thanks

8 
filters
| essql 
  query="SELECT FlightDelay as hasDelay, count(FlightDelay) as delayedAircrafts FROM \"kibana_sample_data_flights\"  group by FlightDelay"
|image 
  dataurl={if condition={getCell column="delayedAircrafts" | lt 100} then="http://icons.iconarchive.com/icons/seanau/flat-smiley/128/Smiley-1-icon.png" else="http://icons.iconarchive.com/icons/hopstarter/keriyo-emoticons/128/Smiley-upset-2-icon.png"} mode="contain"
| render containerStyle={containerStyle opacity="1"}
9

So, I can't show/hide image already on Canvas?
It's mandatory using images on web?

10

No, the dataurl can be anything.
Instead of using the address you could also set the asset ID within Canvas like this:
image dataurl={asset "asset-387e14bf-1938-423b-84fa-fbaecef7b76e"} mode="contain"

You get the asset ID from the asset library.
If you really would like to show / hide then you need to use CSS (opacity) and change this based on your needs. In the APM example you see that the CSS properties (color) get changed based on the results of the conditionals.

1 Like
11

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