Dashboards & Visualizations

Change both Background and Text Colour in Single Value visualisation Conditionally

nabeel652
Builder

Hello Splunkers


In Single Value viz I know we can change text colour or background one at a time but I have a requirement to control both text and background colour in a single value visualisation for example

IF result > 0 
     Text: #9c0006
      Background: #ffc7c
ELSE
    Text: #006100
    Background: #c6efce


I'm using Splunk cloud so don't have the option to use JavaScript. Simple CSS solution is needed. 
  

Any help will be appreciated 

 

Labels (3)
0 Karma
1 Solution

bowesmana
SplunkTrust
SplunkTrust

See this example - I assume the colour was #ffc7c0. Set the block colours as needed then the token+css handling to get the text colour change.

      <html depends="$hidden$">
        <style>
        #result_viz text {
          fill: $result_foreground$ !important;
        }
        </style>
      </html>
      <single id="result_viz">
        <title>Value &gt;0 colour #ffc7c0 or &lt;=0 #c6efce</title>
        <search>
          <query>| makeresults
          | eval value=(random() % 100) - 50
          </query>
          <done>
            <eval token="result_foreground">if($result.value$&gt;0, "#9c0006", "#006100")</eval>
          </done>
        </search>
        <option name="colorMode">block</option>
        <option name="drilldown">all</option>
        <option name="height">60</option>
        <option name="rangeColors">["0xc6efce","0xffc7c0"]</option>
        <option name="rangeValues">[1]</option>
        <option name="useColors">1</option>
      </single>

 

View solution in original post

0 Karma

gcusello
SplunkTrust
SplunkTrust

Hi @nabeel652 ,

for my knowledge, you can change the colour of the background or of the text based on the value of the field, but I don't think that's possible to change both of them.

Ciao.

Giuseppe

0 Karma

bowesmana
SplunkTrust
SplunkTrust

See this example - I assume the colour was #ffc7c0. Set the block colours as needed then the token+css handling to get the text colour change.

      <html depends="$hidden$">
        <style>
        #result_viz text {
          fill: $result_foreground$ !important;
        }
        </style>
      </html>
      <single id="result_viz">
        <title>Value &gt;0 colour #ffc7c0 or &lt;=0 #c6efce</title>
        <search>
          <query>| makeresults
          | eval value=(random() % 100) - 50
          </query>
          <done>
            <eval token="result_foreground">if($result.value$&gt;0, "#9c0006", "#006100")</eval>
          </done>
        </search>
        <option name="colorMode">block</option>
        <option name="drilldown">all</option>
        <option name="height">60</option>
        <option name="rangeColors">["0xc6efce","0xffc7c0"]</option>
        <option name="rangeValues">[1]</option>
        <option name="useColors">1</option>
      </single>

 

0 Karma

gcusello
SplunkTrust
SplunkTrust

Hi @nabeel652 ,

good for you, see next time!

Ciao and happy splunking

Giuseppe

P.S.: Karma Points are appreciated by all the contributors 😉

0 Karma
Get Updates on the Splunk Community!

Splunk Mobile: Your Brand-New Home Screen

Meet Your New Mobile Hub  Hello Splunk Community!  Staying connected to your data—no matter where you are—is ...

Introducing Value Insights (Beta): Understand the Business Impact your organization ...

Real progress on your strategic priorities starts with knowing the business outcomes your teams are delivering ...

Enterprise Security (ES) Essentials 8.3 is Now GA — Smarter Detections, Faster ...

As of today, Enterprise Security (ES) Essentials 8.3 is now generally available, helping SOC teams simplify ...