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!

How to Monitor Google Kubernetes Engine (GKE)

We’ve looked at how to integrate Kubernetes environments with Splunk Observability Cloud, but what about ...

Index This | How can you make 45 using only 4?

October 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with this ...

Splunk Education Goes to Washington | Splunk GovSummit 2024

If you’re in the Washington, D.C. area, this is your opportunity to take your career and Splunk skills to the ...