Dashboards & Visualizations

Need to add icons like check circle and cross circle

vishaltaneja070
Motivator

I need to status symbol based on status UP and Down, but i want to it in single value visualization i.e. need to replace "UP" value with circle check green & "DOWN" with circle cross red.

below is the sample code:

<dashboard>
  <label>Test</label>
  <row>
    <panel>
      <single>
        <search>
          <query>| makeresults | eval Status1="UP"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">value</option>
        <option name="colorMode">none</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x53a051", "0x0877a6", "0xf8be34", "0xf1813f", "0xdc4e41"]</option>
        <option name="rangeValues">[0,30,70,100]</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="unitPosition">after</option>
        <option name="useColors">0</option>
        <option name="useThousandSeparators">1</option>
      </single>

      <single>
        <search>
          <query>| makeresults | eval Status2="DOWN"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">value</option>
        <option name="colorMode">none</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x53a051", "0x0877a6", "0xf8be34", "0xf1813f", "0xdc4e41"]</option>
        <option name="rangeValues">[0,30,70,100]</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="unitPosition">after</option>
        <option name="useColors">0</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
  </row>
</dashboard>
0 Karma
1 Solution

dmarling
Builder

If you are against using any css or javascript you can use ascii to approximate it:

<dashboard>
  <label>Test</label>
  <row>
    <panel>
      <single>
        <search>
          <query>| makeresults | eval Status1="UP", Status1=if(Status1="UP", "", "")</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="refresh.display">progressbar</option>
      </single>
      <single>
        <search>
          <query>| makeresults | eval Status2="DOWN", Status2=if(Status2="UP", "", "")</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="refresh.display">progressbar</option>
      </single>
    </panel>
  </row>
</dashboard>
If this comment/answer was helpful, please up vote it. Thank you.

View solution in original post

woodcock
Esteemed Legend

Believe it or not, Splunk natively supports the ANSI emojis (because your operating system and browser both do), which includes glyphs similar to what you are describing. The easiest way to explore is with this app:
Emoji: https://splunkbase.splunk.com/app/4273/
Or just cut and paste what you need from this site:
http://unicode.org/emoji/charts/full-emoji-list.html#2600
search for check mark and cross mark
Cut and paste this EXACTLY as-is (you don't even need to install the app):

| makeresults
| eval status="PASS FAIL UP DOWN OOPS"
| makemv status
| mvexpand status
| eval icon = case(
   status=="PASS", "",
   status=="FAIL", "",
   status=="UP", "⬆",
   status=="DOWN", "⬇",
   true(), "")

dmarling
Builder

If you are against using any css or javascript you can use ascii to approximate it:

<dashboard>
  <label>Test</label>
  <row>
    <panel>
      <single>
        <search>
          <query>| makeresults | eval Status1="UP", Status1=if(Status1="UP", "", "")</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="refresh.display">progressbar</option>
      </single>
      <single>
        <search>
          <query>| makeresults | eval Status2="DOWN", Status2=if(Status2="UP", "", "")</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="refresh.display">progressbar</option>
      </single>
    </panel>
  </row>
</dashboard>
If this comment/answer was helpful, please up vote it. Thank you.

gcusello
SplunkTrust
SplunkTrust

Hi @vishaltaneja07011993,
see in the Splunk Dashboard Examples App ( https://splunkbase.splunk.com/app/1603/ ) the dashboard "Table Icon Set (Rangemap)": there's an useful example of your need.
In few words, you have to use a js and a css to do this.

Ciao.
Giuseppe

0 Karma

vishaltaneja070
Motivator

The issue is that i dont want to do it at panel level, i have to do it at single value visualization only.

0 Karma

gcusello
SplunkTrust
SplunkTrust

Hi @vishaltaneja07011993,
did you already tried the "Status Indicator - Custom Visualization" at https://splunkbase.splunk.com/app/3119/ ?

Ciao.
Giuseppe

0 Karma

vishaltaneja070
Motivator

Any other option , I don't want to use this app

0 Karma

efavreau
Motivator

Maybe with custom Javascript. Otherwise, the app gcusello said, is what the majority of us use. It's Splunk built and supported. Using either that app or the Javascript, will involve your admin. I don't see another reason to avoid the app, and from my point of view, is the easiest of the two. Good luck!

###

If this reply helps you, an upvote would be appreciated.
0 Karma
Get Updates on the Splunk Community!

Thanks for the Memories! Splunk University, .conf24, and Community Connections

Thank you to everyone in the Splunk Community who joined us for .conf24 – starting with Splunk University and ...

.conf24 | Day 0

Hello Splunk Community! My name is Chris, and I'm based in Canberra, Australia's capital, and I travelled for ...

Enhance Security Visibility with Splunk Enterprise Security 7.1 through Threat ...

 (view in My Videos)Struggling with alert fatigue, lack of context, and prioritization around security ...