Dashboards & Visualizations

How to show a custom icon for a single value module (such as a stoplight)?

LukeMurphey
Champion

What is the best way to display an icon (such as a stoplight) in a dashboard that changes based on results? I'm looking for something to display status in method similar to single value except that I want something that displays an icon instead of just displaying a different colored text.

Tags (1)
0 Karma
1 Solution

LukeMurphey
Champion

This can be done using a single value module and a little custom CSS.

Here is an example simple XML view with two single value modules:

<?xml version='1.0' encoding='utf-8'?>
<dashboard>
    <row>       
        <single>
            <searchTemplate> * | stats count by sourcetype | stats avg(count) as count | rangemap field=count low=0-1000 default=severe</searchTemplate>
            <option name="field">count</option>
            <option name="classField">range</option>
        </single>
        <single>
            <searchTemplate>* | stats count by sourcetype | stats max(count) as count | rangemap field=count low=0-1000 default=severe</searchTemplate>
            <option name="field">count</option>
            <option name="classField">range</option>
        </single>
    </row>
</dashboard>

We will stylize the single value modules using a stylesheet (CSS). Where you place the stylesheet depends on which version of Splunk you are using:

For Splunk 5.0:

Put the following in application.css ($SPLUNK_HOME//appserver/static/application.css):

.SingleValueHolder.severe{
    background-repeat: no-repeat;
    padding-left: 40px; /* Push the text over so that it doesn't sit on top of the image. Change this according to the dimensions of your image. */

    /* Replace with your image: */
    background-image: url('http://cdn1.iconfinder.com/data/icons/function_icon_set/circle_red.png'); /* See http://goo.gl/yxW7O */
}

.SingleValueHolder.low{
    background-repeat: no-repeat;
    padding-left: 40px;

    background-image: url('http://cdn1.iconfinder.com/data/icons/function_icon_set/circle_green.png'); /* See http://goo.gl/v4V1A */
}

For Splunk 6.0:

Place the following in dashboard.css ($SPLUNK_HOME//appserver/static/dashboard.css):

.single-value.low{
    background-repeat: no-repeat;
    padding-left: 40px; /* Push the text over so that it doesn't sit on top of the image. Change this according to the dimensions of your image. */
    padding-top: 16px;
    height:48px;
/* Replace with your image: */
    background-image: url('http://cdn1.iconfinder.com/data/icons/function_icon_set/circle_red.png'); /* See http://goo.gl/yxW7O */
}

.single-value.low{
    background-repeat: no-repeat;
    padding-left: 40px;
    padding-top: 16px;
    height:48px;
    background-image: url('http://cdn1.iconfinder.com/data/icons/function_icon_set/circle_green.png'); /* See http://goo.gl/v4V1A */
}

Customizing the CSS

The CSS above would apply to all single value modules in your app. You can update the CSS selectors to restrict it to particular views if you wish.

In my example, I refer to the image directly on the Internet. I recommend downloading the image locally to your appserver directly and referring to the local file or encoding the image in base 64 and including it directly in the CSS file. Otherwise, your icons may disappear if the image is no longer available on the Internet.

The styling in this example will produce something like:

customized single value

View solution in original post

cevyn
Explorer

Maybe its obvious to everyone else but I guess we all have gaps in our knowledge(me for sure).
1) do I add the css to dashbaord.css in splunk 6 or replace existing?
2) The XML does not seem to reference dashboard.css - is there something under the covers I'm missing?

gracemaher
Explorer

You would need to reference the stylesheet at the top of your xml <stylesheet='nameofyourstylesheet.css">
and you can add it to the dashboard css and reference that if you like, or you can create a new css file and use that.
Just make sure you have the relevant java scripts if you need them.

Hope that helped.

0 Karma

AnilPujar
Path Finder

In form/dashboard tags

< form stylesheet="filename.css" script="filename.js" hideFilters="true" hideSplunkBar="true" >

Need to add in the first line of xml

and save the file in ...../appserver/static folder

0 Karma

LukeMurphey
Champion

This can be done using a single value module and a little custom CSS.

Here is an example simple XML view with two single value modules:

<?xml version='1.0' encoding='utf-8'?>
<dashboard>
    <row>       
        <single>
            <searchTemplate> * | stats count by sourcetype | stats avg(count) as count | rangemap field=count low=0-1000 default=severe</searchTemplate>
            <option name="field">count</option>
            <option name="classField">range</option>
        </single>
        <single>
            <searchTemplate>* | stats count by sourcetype | stats max(count) as count | rangemap field=count low=0-1000 default=severe</searchTemplate>
            <option name="field">count</option>
            <option name="classField">range</option>
        </single>
    </row>
</dashboard>

We will stylize the single value modules using a stylesheet (CSS). Where you place the stylesheet depends on which version of Splunk you are using:

For Splunk 5.0:

Put the following in application.css ($SPLUNK_HOME//appserver/static/application.css):

.SingleValueHolder.severe{
    background-repeat: no-repeat;
    padding-left: 40px; /* Push the text over so that it doesn't sit on top of the image. Change this according to the dimensions of your image. */

    /* Replace with your image: */
    background-image: url('http://cdn1.iconfinder.com/data/icons/function_icon_set/circle_red.png'); /* See http://goo.gl/yxW7O */
}

.SingleValueHolder.low{
    background-repeat: no-repeat;
    padding-left: 40px;

    background-image: url('http://cdn1.iconfinder.com/data/icons/function_icon_set/circle_green.png'); /* See http://goo.gl/v4V1A */
}

For Splunk 6.0:

Place the following in dashboard.css ($SPLUNK_HOME//appserver/static/dashboard.css):

.single-value.low{
    background-repeat: no-repeat;
    padding-left: 40px; /* Push the text over so that it doesn't sit on top of the image. Change this according to the dimensions of your image. */
    padding-top: 16px;
    height:48px;
/* Replace with your image: */
    background-image: url('http://cdn1.iconfinder.com/data/icons/function_icon_set/circle_red.png'); /* See http://goo.gl/yxW7O */
}

.single-value.low{
    background-repeat: no-repeat;
    padding-left: 40px;
    padding-top: 16px;
    height:48px;
    background-image: url('http://cdn1.iconfinder.com/data/icons/function_icon_set/circle_green.png'); /* See http://goo.gl/v4V1A */
}

Customizing the CSS

The CSS above would apply to all single value modules in your app. You can update the CSS selectors to restrict it to particular views if you wish.

In my example, I refer to the image directly on the Internet. I recommend downloading the image locally to your appserver directly and referring to the local file or encoding the image in base 64 and including it directly in the CSS file. Otherwise, your icons may disappear if the image is no longer available on the Internet.

The styling in this example will produce something like:

customized single value

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