Make a chart field clickable + action

Hello, I currently have this simple table visualization created on Kibana.*

I would like to make it so that when I click on a path it opens up a popup to my local PC accessing the image in the path.
As I am a new user I am stuck on how to proceed with this, any ideas or guidance would be appreaciated.

Hello @Marouene_dakhlaoui

Welcome to elastic community :slight_smile: !!!

this table visualization should be saved to dashboard. By clicking "Save and return" which would save this table visualization to dashboard.

Then in that dashboard you can see share button at the top right , click Embed Code , then click Copy iFrame code

Keep Posted with updates !!! Thanks !!!

Hello @sudhagar_ramesh ,

<iframe src="http://localhost:5601/app/dashboards#/view/904e92d0-ee22-11ec-b91d-2d7f1f9a3ee5?embed=true&_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-15m,to:now))&_a=(description:'',filters:!(),fullScreenMode:!f,options:(hidePanelTitles:!f,syncColors:!f,useMargins:!t),panels:!((embeddableConfig:(enhancements:()),gridData:(h:15,i:'50a71ca5-04e0-438e-a241-4af38caa8cf5',w:24,x:0,y:0),id:f1536bd0-ebef-11ec-a94f-df4f88a82928,panelIndex:'50a71ca5-04e0-438e-a241-4af38caa8cf5',type:lens,version:'8.2.2')),query:(language:kuery,query:''),tags:!(),timeRestore:!f,title:'cars%20dashboard',viewMode:edit)" height="600" width="800"></iframe>

Hello @Marouene_dakhlaoui

Now you can use like the below

<a><iframe></iframe></a>

PS: Paste the copied iframe.

Keep Posted!!! Thanks !!! :slight_smile:

@sudhagar_ramesh I am sorry I don't quite understand your reply.
I pasted the copied iframe, I will paste again here :

<a>
<iframe src="http://localhost:5601/app/dashboards#/view/904e92d0-ee22-11ec-b91d-2d7f1f9a3ee5?embed=true&_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-15m,to:now))&_a=(description:'',filters:!(),fullScreenMode:!f,options:(hidePanelTitles:!f,syncColors:!f,useMargins:!t),panels:!((embeddableConfig:(enhancements:()),gridData:(h:15,i:'50a71ca5-04e0-438e-a241-4af38caa8cf5',w:24,x:0,y:0),id:f1536bd0-ebef-11ec-a94f-df4f88a82928,panelIndex:'50a71ca5-04e0-438e-a241-4af38caa8cf5',type:lens,version:'8.2.2')),query:(language:kuery,query:''),tags:!(),timeRestore:!f,title:'cars%20dashboard',viewMode:edit)" height="600" width="800"></iframe>
</a>

You can make the table cell value clickable using a field formatter, using some URL template.

But probably you will encounter some security issues when linking to local files.

Hello @Marouene_dakhlaoui

As i understand you are trying to make that dashboard to be accessible as a local website .

Hence , that particular vizualization has been taken as an iframe from that dashboard. then just save this above code as a html file. Launch the file it would give you that visualization like a image which is clickable.

Oh no, that is not what I am trying to achieve.
I am not looking to export the dashboard, I am just looking to make so that when I am interacting with the dashboard I want to display/show images when clicking on the column "Image Path" of the table.

@Marco_Liberati
I tried doing so I entered the following URL formatted parameters in Data views.

But I get this :

The Lens table is trying to load the image from the file system but most probably it's been blocked by the browser.
You need to host the assets somewhere else, not in your local filesystem, then the URL will work.

1 Like

@Marco_Liberati
Thank you for your answer!
For this task though I am strictly looking to load the images from a local PC, not hosting elsewhere.
Do you have any other tips on how I can make it work ?

It does not work due to browser security reasons, nothing Kibana can fix.

@Marco_Liberati
Just one more question, if I try to access the local file on my browser manually by typing, for example, file:///C:/image_data/images/audi.png it works and the browser can access it.
I am wondering if it's maybe an issue in the URL formatting, as you can see there are substrings like C%3A%5C in the path that were added and I have no idea where they came from, they could be the reason why it is not working

You can open a file:// URL via the URL bar in the browser, but any link pointing to a file on the file system in a web page is stopped.

Okay, dump the local files approach, I am unable to load images on google drive which have sharing option "anyone with the link"


Am I doing something in my URL setting ?

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