Dashboards & Visualizations

Using a clickable image to select query

dokaas_2
Path Finder

I've generated an image of our network perimeter with the major equipment (Cisco ASA, Palo Alto, etc) providing a visual image of how data flows through the perimeter wall. The image is on the left hand pane of the dashboard. The image is contained in a dashboard through the use of the HTML element to make it clickable. On the right hand pane I have a table.

What I want to do is to use the clickable image in the left pane to display events in the right hand table pane depending on what piece of equipment they click. The fundamental query will change depending on the equipment (firewall versus IDS versus VPN, etc)

Does anyone have a good solution (other than using a dropdown input box?

0 Karma
1 Solution

dokaas_2
Path Finder

So the answer to my problem was in formatting the href in the element. The html file is show and goes in the /appserver/static folder. The image goes in /appserver/static/images folder.

In the dashboard, the reference to the html file is in an html panel using the element.

The challenge now is that when one resizes the browser, the image also resizes which causes problem b/c the imagemap uses absolute positioning. I'm assuming a script can be written to fix this.

+++++++++++++++++

View solution in original post

0 Karma

dokaas_2
Path Finder

So the answer to my problem was in formatting the href in the element. The html file is show and goes in the /appserver/static folder. The image goes in /appserver/static/images folder.

In the dashboard, the reference to the html file is in an html panel using the element.

The challenge now is that when one resizes the browser, the image also resizes which causes problem b/c the imagemap uses absolute positioning. I'm assuming a script can be written to fix this.

+++++++++++++++++

0 Karma

dokaas_2
Path Finder

in the previous solution post I made reference to the image being sizable.  the answer that I arrived at was to save the image as an SVG file and use the SVG visualization addon.  I used MS Visio and was able to select a Visio element and add an http reference to the element.  Another gotcha that when you save as an scalable vector graphic from Visio you must deselect the "Include Visio data in files".  The other thing I did was to put the SVG file in a saved macro and used it to pass the SVG code visualization.

Tags (1)
0 Karma

niketn
Legend

@dokaas_2 seems straightforward use case for Image Overlay in Simple XML for which there is already example in the Splunk Dashboard Examples app (also several others on Splunk Community answers).

Nevertheless since you have already used SVG app and got it working in Simple XML just wanted to update that this would be really easy use case for Splunk Dashboard App Beta with SVG Choropleth viz. Check out the following blog: https://www.splunk.com/en_us/blog/tips-and-tricks/dashboards-beta-v0-5-svg-choropleths-unleash-your-...

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...