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!

[Puzzles] Solve, Learn, Repeat: Character substitutions with Regular Expressions

This challenge was first posted on Slack #puzzles channelFor BORE at .conf23, we had a puzzle question which ...

Shape the Future of Splunk: Join the Product Research Lab!

Join the Splunk Product Research Lab and connect with us in the Slack channel #product-research-lab to get ...

Auto-Injector for Everything Else: Making OpenTelemetry Truly Universal

You might have seen Splunk’s recent announcement about donating the OpenTelemetry Injector to the ...