# Make a chart field clickable + action

**URL:** <https://discuss.elastic.co/t/make-a-chart-field-clickable-action/307178>\
**Category:** Kibana\
**Created:** [June 14, 2022, 2:50pm UTC](https://discuss.elastic.co/t/make-a-chart-field-clickable-action/307178 "2022-06-14T14:50:44Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Marouene\_dakhlaoui](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marouene_dakhlaoui/32/107018_2.png) [@Marouene\_dakhlaoui](https://discuss.elastic.co/u/Marouene_dakhlaoui)\
**Post date:** [June 14, 2022, 2:50pm UTC](https://discuss.elastic.co/t/make-a-chart-field-clickable-action/307178/1 "2022-06-14T14:50:44Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/a/1/a1dc11d0aa9399a569379997d17c72513f1dbb9d.png)

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.

---

<div class="post-metadata">

**Author:** ![sudhagar\_ramesh](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sudhagar_ramesh/32/105673_2.png) [@sudhagar\_ramesh](https://discuss.elastic.co/u/sudhagar_ramesh)\
**Post date:** [June 15, 2022, 5:04am UTC](https://discuss.elastic.co/t/make-a-chart-field-clickable-action/307178/2 "2022-06-15T05:04:06Z")

</div>

Hello @Marouene_dakhlaoui

Welcome to elastic community 🙂 !!!

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 !!!

---

<div class="post-metadata">

**Author:** ![Marouene\_dakhlaoui](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marouene_dakhlaoui/32/107018_2.png) [@Marouene\_dakhlaoui](https://discuss.elastic.co/u/Marouene_dakhlaoui)\
**Post date:** [June 17, 2022, 9:47am UTC](https://discuss.elastic.co/t/make-a-chart-field-clickable-action/307178/3 "2022-06-17T09:47:56Z")

</div>

Hello @sudhagar_ramesh ,

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![sudhagar\_ramesh](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sudhagar_ramesh/32/105673_2.png) [@sudhagar\_ramesh](https://discuss.elastic.co/u/sudhagar_ramesh)\
**Post date:** [June 17, 2022, 9:58am UTC](https://discuss.elastic.co/t/make-a-chart-field-clickable-action/307178/4 "2022-06-17T09:58:17Z")

</div>

Hello @Marouene_dakhlaoui

Now you can use like the below

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

PS: Paste the copied iframe.

Keep Posted!!! Thanks !!! 🙂

---

<div class="post-metadata">

**Author:** ![Marouene\_dakhlaoui](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marouene_dakhlaoui/32/107018_2.png) [@Marouene\_dakhlaoui](https://discuss.elastic.co/u/Marouene_dakhlaoui)\
**Post date:** [June 17, 2022, 10:16am UTC](https://discuss.elastic.co/t/make-a-chart-field-clickable-action/307178/5 "2022-06-17T10:16:38Z")

</div>

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

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![Marco\_Liberati](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marco_liberati/32/82953_2.png) [@Marco\_Liberati](https://discuss.elastic.co/u/Marco_Liberati)\
**Post date:** [June 17, 2022, 10:23am UTC](https://discuss.elastic.co/t/make-a-chart-field-clickable-action/307178/6 "2022-06-17T10:23:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![sudhagar\_ramesh](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sudhagar_ramesh/32/105673_2.png) [@sudhagar\_ramesh](https://discuss.elastic.co/u/sudhagar_ramesh)\
**Post date:** [June 17, 2022, 10:25am UTC](https://discuss.elastic.co/t/make-a-chart-field-clickable-action/307178/7 "2022-06-17T10:25:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Marouene\_dakhlaoui](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marouene_dakhlaoui/32/107018_2.png) [@Marouene\_dakhlaoui](https://discuss.elastic.co/u/Marouene_dakhlaoui)\
**Post date:** [June 17, 2022, 10:35am UTC](https://discuss.elastic.co/t/make-a-chart-field-clickable-action/307178/8 "2022-06-17T10:35:08Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Marouene\_dakhlaoui](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marouene_dakhlaoui/32/107018_2.png) [@Marouene\_dakhlaoui](https://discuss.elastic.co/u/Marouene_dakhlaoui)\
**Post date:** [June 17, 2022, 10:42am UTC](https://discuss.elastic.co/t/make-a-chart-field-clickable-action/307178/9 "2022-06-17T10:42:40Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/9/6/96988e1381d14db66e30ff9ca6f0bda2278ddc29.png)

But I get this :

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/4/6/46121b50e12a5a0d0a9feb87882f45b4fef7e6f9.png)

---

<div class="post-metadata">

**Author:** ![Marco\_Liberati](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marco_liberati/32/82953_2.png) [@Marco\_Liberati](https://discuss.elastic.co/u/Marco_Liberati)\
**Post date:** [June 17, 2022, 11:15am UTC](https://discuss.elastic.co/t/make-a-chart-field-clickable-action/307178/10 "2022-06-17T11:15:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Marouene\_dakhlaoui](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marouene_dakhlaoui/32/107018_2.png) [@Marouene\_dakhlaoui](https://discuss.elastic.co/u/Marouene_dakhlaoui)\
**Post date:** [June 17, 2022, 11:21am UTC](https://discuss.elastic.co/t/make-a-chart-field-clickable-action/307178/11 "2022-06-17T11:21:40Z")

</div>

@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 ?

---

<div class="post-metadata">

**Author:** ![Marco\_Liberati](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marco_liberati/32/82953_2.png) [@Marco\_Liberati](https://discuss.elastic.co/u/Marco_Liberati)\
**Post date:** [June 17, 2022, 12:32pm UTC](https://discuss.elastic.co/t/make-a-chart-field-clickable-action/307178/12 "2022-06-17T12:32:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Marouene\_dakhlaoui](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marouene_dakhlaoui/32/107018_2.png) [@Marouene\_dakhlaoui](https://discuss.elastic.co/u/Marouene_dakhlaoui)\
**Post date:** [June 17, 2022, 2:23pm UTC](https://discuss.elastic.co/t/make-a-chart-field-clickable-action/307178/13 "2022-06-17T14:23:15Z")

</div>

@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

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/c/e/ce291c76feba37c2cef091b6da64ca3894ee9c94.png)

---

<div class="post-metadata">

**Author:** ![Marco\_Liberati](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marco_liberati/32/82953_2.png) [@Marco\_Liberati](https://discuss.elastic.co/u/Marco_Liberati)\
**Post date:** [June 17, 2022, 2:49pm UTC](https://discuss.elastic.co/t/make-a-chart-field-clickable-action/307178/14 "2022-06-17T14:49:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Marouene\_dakhlaoui](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marouene_dakhlaoui/32/107018_2.png) [@Marouene\_dakhlaoui](https://discuss.elastic.co/u/Marouene_dakhlaoui)\
**Post date:** [June 17, 2022, 3:11pm UTC](https://discuss.elastic.co/t/make-a-chart-field-clickable-action/307178/15 "2022-06-17T15:11:29Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/c/a/cac81536f3b2144e46e2fb23d52852f2122c14dc.png)  
Am I doing something in my URL setting ?

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [July 15, 2022, 3:11pm UTC](https://discuss.elastic.co/t/make-a-chart-field-clickable-action/307178/16 "2022-07-15T15:11:55Z")

</div>

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