Custom single value icon not displaying with non-count field

[dcoomer]

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!

[dcoomer · Accepted solution]

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]

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