Dynamically change image on canvas

Elastic Stack Kibana
1

Hi all,

I'm new to elasticsearch, so I apologize if my question is trivial :roll_eyes:

I would like to dinamically change the image displayed in a canvas basing on the last field "value" I've received in my dataset (value < 0 I wish to display image1, value > 0 image2):

{"@timestamp":"2019-06-18T09:14:10.000Z","value":5}

but the Image element I add to my canvas isn't able to have an attached datasource, so what kind of element should I use?

I've seen that reveal images are able to have an attached datasource, but I don't have to represent a percentage

How should I proceed? Any example about this?

Thanks a lot in advance for any clue

2

I am doing the exact same thing in a test Canvas right now. The reveal image definition:

filters
| timefilter from="now-1m" to="now" column="@timestamp"
| essql 
  query="SELECT \"HADR_ROLE\" FROM \"logstash-*\" WHERE \"host\" LIKE 'myhostname' AND \"HADR_ROLE\" LIKE 'PRIMARY' ORDER BY \"@timestamp\" DESC LIMIT 1"
| math "size(HADR_ROLE)"
| revealImage origin="bottom" image={asset "asset-aa63dc33-0dad-4d6c-98bf-b26e0322294d"} emptyImage={asset "asset-79bd30df-9d8d-4a4c-b4bc-8d155bf06e85"}
| render

So I select from my index whether a field with a certain value exists, limiting the result to 1. If the result is 1, that equals 100%, showing the full image. If the result is 0, it shows the other image. I do not get any results between 0 and 1, so that is fine.

1 Like
3

Alternatively you might be able to use a conditional instead. A sample can be found here: https://github.com/alexfrancoeur/kibana_canvas_examples/tree/master/demo_data/conditional_assets

4

@BennyInc your solution sounds good if you have to choose between two images, but what about three or more ones?

Conditional example on Github works fine but it uses static images and the demodata mock data set: if I want get data from an index pattern I can't...no data sources can be attached to image element

So trying to continue using reveal image (the query return a number, I try to display one of three images according to the number is = > or < than zero):

filters
| essql 
  query="SELECT value FROM \"realtimedatatest*\" AS value ORDER BY \"@timestamp\" DESC LIMIT 1"
| switch 
    {case if={compare gt to= 0} then= "asset-fd9c7e6d-b4ff-44a4-9462-fd442745e206"}
	{case if={compare eq to= 0} then= "asset-ff782b14-7eec-40d5-ba29-81cdcad9cd86"}
	{case if={compare lt to= 0} then= "asset-eadebace-b7a6-4aba-85ab-3fc7fe86b9ea"} 
    default = "asset-eadebace-b7a6-4aba-85ab-3fc7fe86b9ea"
  }
| math "size(RETURNED_ASSET)"
| revealImage origin="bottom" image={asset RETURNED_ASSET} emptyImage={asset RETURNED_ASSET}
| render

my problem is to inject the returned string by swich where I've RETURNED_ASSET

Any hint?

Thanks!!!

1 Like
5

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