# Canvas conditional statement **URL:** \ **Category:** Kibana\ **Tags:** canvas\ **Created:** [April 18, 2021, 2:14pm UTC](https://discuss.elastic.co/t/canvas-conditional-statement/270495 "2021-04-18T14:14:35Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![accateo](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/accateo/32/85332_2.png) [@accateo](https://discuss.elastic.co/u/accateo)\ **Post date:** [April 18, 2021, 2:14pm UTC](https://discuss.elastic.co/t/canvas-conditional-statement/270495/1 "2021-04-18T14:14:35Z")
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 ---
**Author:** ![Felix\_Roessel](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/felix_roessel/32/41623_2.png) [@Felix\_Roessel](https://discuss.elastic.co/u/Felix_Roessel)\ **Post date:** [April 18, 2021, 3:59pm UTC](https://discuss.elastic.co/t/canvas-conditional-statement/270495/2 "2021-04-18T15:59:57Z")
Yes thats possible. This canvas example has a lot of conditionals > **[APM Services overview canvas dashboard at elastic content share](https://elastic-content-share.eu/downloads/apm-services-overview-canvas/)** > > The APM services canvas is an adaptive canvas board that fits to your APM data. If you running Elastic APM -- try it for free! ---
**Author:** ![accateo](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/accateo/32/85332_2.png) [@accateo](https://discuss.elastic.co/u/accateo)\ **Post date:** [April 19, 2021, 9:22am UTC](https://discuss.elastic.co/t/canvas-conditional-statement/270495/3 "2021-04-19T09:22:32Z")
That file is a NDJSON file. I tried to upload in Canvas...but I have error.... ---
**Author:** ![Felix\_Roessel](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/felix_roessel/32/41623_2.png) [@Felix\_Roessel](https://discuss.elastic.co/u/Felix_Roessel)\ **Post date:** [April 19, 2021, 9:35am UTC](https://discuss.elastic.co/t/canvas-conditional-statement/270495/4 "2021-04-19T09:35:19Z")
This is a saved object file. Go to Kibana Management -\> Saved Objects -\> Import to import the file. ---
**Author:** ![accateo](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/accateo/32/85332_2.png) [@accateo](https://discuss.elastic.co/u/accateo)\ **Post date:** [April 19, 2021, 12:23pm UTC](https://discuss.elastic.co/t/canvas-conditional-statement/270495/5 "2021-04-19T12:23:02Z")
Ok, now I have: ```auto | 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 ---
**Author:** ![Felix\_Roessel](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/felix_roessel/32/41623_2.png) [@Felix\_Roessel](https://discuss.elastic.co/u/Felix_Roessel)\ **Post date:** [April 19, 2021, 2:49pm UTC](https://discuss.elastic.co/t/canvas-conditional-statement/270495/6 "2021-04-19T14:49:35Z")
You better add one image element and make the If statement within the data url to choose your asset. > **[Canvas function reference | Kibana Guide \[7.12\] | Elastic](https://www.elastic.co/guide/en/kibana/current/canvas-function-reference.html#image_fn)** Easiest way is adding both images via the ui first so that you see how the dataurl needs to look like. ---
**Author:** ![accateo](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/accateo/32/85332_2.png) [@accateo](https://discuss.elastic.co/u/accateo)\ **Post date:** [April 19, 2021, 2:58pm UTC](https://discuss.elastic.co/t/canvas-conditional-statement/270495/7 "2021-04-19T14:58:00Z")
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 ---
**Author:** ![Felix\_Roessel](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/felix_roessel/32/41623_2.png) [@Felix\_Roessel](https://discuss.elastic.co/u/Felix_Roessel)\ **Post date:** [April 19, 2021, 5:45pm UTC](https://discuss.elastic.co/t/canvas-conditional-statement/270495/8 "2021-04-19T17:45:06Z")
``` 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"} ``` ---
**Author:** ![accateo](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/accateo/32/85332_2.png) [@accateo](https://discuss.elastic.co/u/accateo)\ **Post date:** [April 19, 2021, 6:00pm UTC](https://discuss.elastic.co/t/canvas-conditional-statement/270495/9 "2021-04-19T18:00:07Z")
So, I can't show/hide image already on Canvas? It's mandatory using images on web? ---
**Author:** ![Felix\_Roessel](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/felix_roessel/32/41623_2.png) [@Felix\_Roessel](https://discuss.elastic.co/u/Felix_Roessel)\ **Post date:** [April 19, 2021, 6:24pm UTC](https://discuss.elastic.co/t/canvas-conditional-statement/270495/10 "2021-04-19T18:24:15Z")
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. ---
**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\ **Post date:** [May 17, 2021, 6:24pm UTC](https://discuss.elastic.co/t/canvas-conditional-statement/270495/11 "2021-05-17T18:24:52Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.