Dashboards & Visualizations

Using a clickable image to select query

Explorer

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

Explorer

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

Explorer

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

Explorer

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

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
State of Splunk Careers

Access the Splunk Careers Report to see real data that shows how Splunk mastery increases your value and job satisfaction.

Find out what your skills are worth!