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
Esteemed Legend

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
Esteemed Legend

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!

Platform Highlights | November 2022 Newsletter

 November 2022 Skill Up on Splunk with our New Builder Tech Talk SeriesCan you build it? Yes you can! *play ...

Splunk Education - Fast Start Program!

Welcome to Splunk Education! Splunk training programs are designed to enable you to get started quickly and ...

Five Subtly Different Ways of Adding Manual Instrumentation in Java

You can find the code of this example on GitHub here. Please feel free to star the repository to keep in ...