Dashboards & Visualizations

Change the background colour on my dashborad depending on the text displaying

rhugo
Observer

alt text

I want to build this dashboard such that when Healthy shows as the status of the cassette the background colour will be green and when it is showing Inoperative the background color will be red etc.
The code behind the dashboard is;

<dashboard>
  <label>ATM</label>
  <description>ATM DEVICE AND MEDIA MONITOR DASHBOARD</description>
  <row>
    <panel>
      <title>AVAILABLE CASH IN ATM</title>
      <single>
        <search>
          <query>(L15=* sourcetype=IdejoATM "total cash in atm")  | rex "<Total Cash in ATM:\s*(?<TotalCash_In_ATM>[^>]+)" | eval TotalCash_In_ATM = trim(replace(TotalCash_In_ATM, "NGN", "")) | stats latest(TotalCash_In_ATM)</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
          <refresh>2m</refresh>
          <refreshType>delay</refreshType>
        </search>
        <option name="colorBy">value</option>
        <option name="colorMode">none</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0xdc4e41","0xf8be34","0x53a051"]</option>
        <option name="rangeValues">[200000,500000]</option>
        <option name="refresh.display">progressbar</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="underLabel">Total Cash In ATM</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
  </row>
  <row>
    <panel>
      <title>CASSETTE 1</title>
      <single>
        <search>
          <query>sourcetype="idejoatm" 
| stats latest(cashcassette1_devicestatus)</query>
          <earliest>rt-1h</earliest>
          <latest>rt</latest>
          <sampleRatio>1</sampleRatio>
          <refresh>5m</refresh>
          <refreshType>delay</refreshType>
        </search>
        <option name="colorBy">value</option>
        <option name="colorMode">block</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="refresh.display">progressbar</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">large</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="underLabel">Cassette 1 Device Status</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
    <panel>
      <title>CASSETTE 2</title>
      <single>
        <search>
          <query>sourcetype="idejoatm" 
| stats latest(cashcassette2_devicestatus)</query>
          <earliest>rt-1h</earliest>
          <latest>rt</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">value</option>
        <option name="colorMode">block</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="underLabel">Cassette 2 Device Status</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
    <panel>
      <title>CASSETTE 3</title>
      <single>
        <search>
          <query>sourcetype="idejoatm" 
| stats latest(cassette3_devicestatus)</query>
          <earliest>rt-1h</earliest>
          <latest>rt</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">value</option>
        <option name="colorMode">block</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="underLabel">Cassette 3 Device Status</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
    <panel>
      <title>CASSETTE 4</title>
      <single>
        <search>
          <query>sourcetype="idejoatm" 
| stats latest(cashcassette4_devicestatus)</query>
          <earliest>rt-1h</earliest>
          <latest>rt</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">value</option>
        <option name="colorMode">block</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="underLabel">Cassette 4 Device Status</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
  </row>
</dashboard>
Tags (1)
0 Karma

niketn
Legend

@rhugo you can use Single Value with rangemap to color panel background color. However that is not recommended approach. You can use Status Indicator Custom Visualization which is more suitable for this use case. Refer to my older answer which has examples for both approaches: https://answers.splunk.com/answers/595910/how-to-build-a-dashboard-with-single-panel-value-b.html

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
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 ...