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.

View solution in original post

gcusello
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
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
Did you miss .conf21 Virtual?

Good news! The event's keynotes and many of its breakout sessions are now available online, and still totally FREE!