Dashboards & Visualizations

Custom single value icon not displaying with non-count field

dcoomer
Explorer

I'm creating a dashboard using a couple single value visualizations with custom icons. So far i have been able to get a few of them to work properly however the most recent one i'm having issues with the icon displaying and im not 100% sure why.

Custom CSS:

#firewall .single-value.low{
     background-repeat: no-repeat;
     height:48px;
     background-image: url('https://hostip:8000/en-US/static/app/search/firewall_green.png');
 }

#firewall .single-value.high{
     background-repeat: no-repeat;
     padding-left: 40px;
     padding-top: 16px;
     height:48px;
     background-image: url('https://hostip:8000/en-US/static/app/search/firewall_red.png');
 }

Panel XML:

<panel>
      <single id="firewall">
        <title>Current Throughput</title>
        <search>
          <query>index=pan* src_interface="ethernet1/4" dest_interface="ethernet1/12"| stats sum(bytes) as sbytes| eval "MB"=round(sbytes/1024/1024,2) |  table MB| rangemap field=MB low=0-8 default=high</query>
          <earliest>rt-3s</earliest>
          <latest>rtnow</latest>
        </search>
        <option name="colorBy">value</option>
        <option name="colorMode">none</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0.00</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
        <option name="wrap">true</option>
        <option name="rowNumbers">false</option>
        <option name="dataOverlayMode">none</option>
        <option name="linkView">search</option>
        <option name="rangeColors">["0x65a637","0xd93f3c"]</option>
        <option name="rangeValues">[8]</option>
      </single>
    </panel>

CSS is called by:

<dashboard stylesheet="singlevalue_icons.css">

I have a couple other working panels that follow the same steps with different id's of course. but for some reason this one will display values, change colors, but the icon's will not display.

icons are uploaded to https://splunkhostip:8000/en-US/static/app/search/

Example of a working panel:

  <single id="events">
    <title>Indexed Events</title>
    <search>
      <query>index!=_internal | timechart count span=1h | rangemap field=count low=0-500000 default=high</query>
      <earliest>rt-4h</earliest>
      <latest>rtnow</latest>
    </search>
    <option name="field">count</option>
    <option name="classField">range</option>
    <option name="colorBy">value</option>
    <option name="colorMode">none</option>
    <option name="drilldown">none</option>
    <option name="numberPrecision">0</option>
    <option name="showSparkline">1</option>
    <option name="showTrendIndicator">1</option>
    <option name="trendColorInterpretation">standard</option>
    <option name="trendDisplayMode">absolute</option>
    <option name="unitPosition">after</option>
    <option name="useColors">1</option>
    <option name="useThousandSeparators">1</option>
    <option name="linkView">search</option>
    <option name="rangeColors">["0x65a637","0xd93f3c"]</option>
    <option name="rangeValues">[5000000]</option>
    <option name="underLabel">Compared to Previous Hour</option>
  </single>
</panel>

The only thing i can see different is stats count rangemap field=count vs the custom eval field of MB which is set as rangemap field=MB

Any suggestions would be amazing!

Thanks!

0 Karma
1 Solution

dcoomer
Explorer

I was able to finally track down what the difference's were. I had forgotten to define the values in the option settings of the single value panel for the range map.

 <option name="field">count</option>
     <option name="classField">range</option>

the field value has to match w/e the value of the timechart or stats is. ex. stats count(sum) = count(sum) vs timechart count by xyz = count

View solution in original post

dcoomer
Explorer

I was able to finally track down what the difference's were. I had forgotten to define the values in the option settings of the single value panel for the range map.

 <option name="field">count</option>
     <option name="classField">range</option>

the field value has to match w/e the value of the timechart or stats is. ex. stats count(sum) = count(sum) vs timechart count by xyz = count

k_harini
Communicator

I made the same mistake.. This was helpful.. Thank you 🙂

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