Painting a Picture with Splunk

This is a guest blog from Mark Sivill at Splunk.

People talk about “Painting a picture” when giving an elaborate and detailed description of something. Splunk gives people the ability to slice and dice their data to get to that detailed description, but what if you literally wanted to paint a picture with Splunk?

This post is going to cover how you can paint any picture within a Splunk dashboard. If you want to create a picture of a turtle, Queen Elizabeth II, Darth Vader or something else we’ve got you covered!

Splunk provides a number of different ways to build visualizations already, such as the standard dashboards, simple XML, glass tables and custom visualizations. If you can’t quite create the picture you want from those options, then consider the Scalable Vector Graphics - Custom Visualization application (SVG app) available on Splunkbase. The SVG app painted the above static pictures of a turtle, Queen Elizabeth II and Darth Vader. Here’s how:

Scalable Vector Graphics (SVG) is itself an image format than can be displayed in a web browser. Not only does it scale, but is an open format that can be defined with text using XML. There are many examples of SVG images on the web, such the ones on Openclipart which includes turtles and Queen Elizabeth II. SVG can also be created from scratch directly within an text editor or for more complex SVG, tools such as Inkscape and OmniGraffle.

Copying the following SVG into a text file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">

<circle cx="50" cy="50" r="40" style="fill: red;">

</circle>

</svg>

and opening the file in a web browser will display a red circle:

When the SVG app has been installed into Splunk it will take the contents of the svg_viz field from a Splunk query, and then paint the contents of that field (which should be SVG text) onto the page using the SVG custom visualization. The above SVG as a Splunk query ready for the SVG app to paint would be

| makeresults

| eval svg_viz = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\">

<circle cx=\"50\" cy=\"50\" r=\"40\" style=\"fill: red;\"></circle>

</svg>"

| table svg_viz

Which would look like:

Fields from other parts of the Splunk query can also change how the picture looks, the following example creates a European speed limit sign in SVG using a Splunk query.

| makeresults 

| eval speed_limit = 50

| eval svg_viz = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>

<circle cx='50' cy='50' r='40' stroke='red' stroke-width='10' fill='white' />

<text dominant-baseline='central' text-anchor='middle' x='50' y='50' font-family='sans-serif'

 font-size='50' font-weight='bold' fill='black'>". speed_limit ."</text>

</svg>"

| table svg_viz

Which would look like:

In this example, data from the speed_limit field is passed into the SVG field. When the speed_limit field changes, this also changes the number displayed on the speed sign itself. While this example changed text in the SVG picture, other Splunk query fields could be used to change the color of SVG elements, add SVG elements, or even change the size of SVG elements.

Here the batteries have had parts of their picture changed based on the fields in the Splunk query that was used to paint the SVG picture. Building on these concepts more complex pictures can be built with the SVG app.

Here, the infrastructure diagram at the bottom of the dashboard has been built using the SVG app where the numbers and icons change dynamically.

Hopefully the above has given you a taster of what can be done with the SVG app. The app itself contains a number of example dashboards showing what can be built. Detailed information about the app can be found in the .conf 2018 session FN1209 - Visualize This, Mother Trucker (Slides | Recording).

Please share your creations to inspire others by posting your Splunk SVG queries on the Splunk Answers for SVG app web page.

Happy painting!

Mark