Dashboards & Visualizations

SVG Custom visualization - drilldown or setting a token

tomaszwrona
Explorer

Hi all,

 

i have used the SVG Custom Visualisation to create a nice picture.

Now i would like to have a drilldown or at least a possibility to set a token, when a part of the picture is clicked on. Is there a way to achieve this? Any hint would be great.

 

Best regards

Tomasz

Labels (2)
0 Karma

tomaszwrona
Explorer

Hi all,

i did manage to answer my own question.

In order to use tokens in SVG Visualization following steps should be taken:

  1. Extend Simple XML Dashboard with Javascript
  2. Put an id on Splunk's default element, for example panel:
    <panel id="svgViz">
  3. Put an id on any SVG element you want to click on, for example g:
    <g id="myId" filter="url(#Shadow)">
  4. In Javascript get the panel:
    var my_panel = $("#svgViz");
  5. And then create onClick function to set myNewToken:
    my_panel.on("click", "#myId", function(e) {
      var default_tokens = mvc.Components.get("submitted");
      default_tokens.set("myNewToken", "value");
    });

 

Best regards

Tomasz

0 Karma
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

SOC4Kafka - New Kafka Connector Powered by OpenTelemetry

The new SOC4Kafka connector, built on OpenTelemetry, enables the collection of Kafka messages and forwards ...

Rounding off the Splunk Dashboard Contest

What does a contest-winning Splunk dashboard look like? In this case, it isn't in a browser tab at all. It ...

A Four Part Event Series: AI + Observability: AI Agents, LLMs, Apps, & Infrastructure

AI &#43; Observability: AI Agents, LLMs, Apps, & Infrastructure The rapid evolution of artificial intelligence ...