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!

Using Machine Learning for Hunting Security Threats

WATCH NOW Seeing the exponential hike in global cyber threat spectrum, organizations are now striving more for ...

New Learning Videos on Topics Most Requested by You! Plus This Month’s New Splunk ...

Splunk Lantern is a customer success center that provides advice from Splunk experts on valuable data ...

How I Instrumented a Rust Application Without Knowing Rust

As a technical writer, I often have to edit or create code snippets for Splunk's distributions of ...