Dashboards & Visualizations

How to change the font color, in a dashboard, depending on the search value?

Engager

Hello Everyone,
I'm trying to (based on dashboard Image Overlay with Single Value from Splunk Dashboard Example app) make a dashboard, where results of searches will have different font color depends on value from search.
For now I have:
XML

<dashboard stylesheet="layout.css">
              <label>Dash</label>
              <description>Display workflow status visually using an image, and grouped single value elements.</description>
              <fieldset autoRun="true" submitButton="false">
                <input type="time" searchWhenChanged="true">
                  <default>
                    <earliest>-15m</earliest>
                    <latest>now</latest>
                  </default>
                </input>
              </fieldset>
              <search id="V7">
                <query>index=main sourcetype="test" Name="V7"
                              |eval status = case(Value=="False", "Close",Value=="True", "Open")
                              |table status
                              |head 1</query>
                <earliest>$earliest$</earliest>
                <latest>$latest$</latest>
                <progress>
                  <set token="V7">$result.status$</set>
                </progress>
              </search>
             <panel id="image_overlay_panel">
                  <html>
                          <div class="ingestion_pipeline">
                              <div class="image"/>
                              <div class="singleValue" id="V7">$V7$</div>
                      </html>
                </panel>
              </row>
</dashboard>

CSS

.ingestion_pipeline {
    position: relative;
    width: 1220px;
    height: 840px;
}
#image_overlay_panel .image{
    background: transparent 50% 50% no-repeat url('/static/app/simple_xml_examples/v2.png');
    position: relative;
    top: 0px;
    left: 300px;
    width: inherit;
    height: inherit;
}
.singleValue {
    font-size: 1em;
    font-weight: bold;
}
#image_overlay_panel #V7 {
   color: #003399;
   position: absolute;
   top: 748px;
   left: 367px;
}

Search work fine, but do you have any idea how to change font color for example when it is True then font is green, but when it is False font is red?
Any thoughts?
Thanks in advance.

1 Solution

Legend

@Sethi90, instead of using a separate CSS File use hidden <html> <panel> with <style> tag to apply CSS override. You can pass token to CSS being applied. Following is based on your existing dashboard code (un-tested but should work).

PS: css file layout.css refernce is removed since the same has been brought inside dashboard code as hidden html panel. Token $V7Color$ has also been created in the search for setting color to green, red or default to grey based on search results. You can also print the token to ensure that it being set correctly or not.

      <dashboard>
              <label>Dash</label>
              <description>Display workflow status visually using an image, and grouped single value elements.</description>
               <search id="V7">
                 <query>index=main sourcetype="test" Name="V7"
                               |eval status = case(Value=="False", "Close",Value=="True", "Open")
                               |table status
                               |head 1</query>
                 <earliest>$earliest$</earliest>
                 <latest>$latest$</latest>
                 <progress>
                   <set token="V7">$result.status$</set>
                   <eval token="V7Color">case($result.status|s$=="True","green",$result.status|s$=="False","red",true(),"grey")</eval>
                 </progress>
               </search>
               <fieldset autoRun="true" submitButton="false">
                 <input type="time" searchWhenChanged="true">
                   <default>
                     <earliest>-15m</earliest>
                     <latest>now</latest>
                   </default>
                 </input>
               </fieldset>
               <row depends="$alwaysHideCSSPanel$">
                     <panel>
                            <html>
                                 <style>
                             .ingestion_pipeline {
                                 position: relative;
                                 width: 1220px;
                                 height: 840px;
                             }
                             #image_overlay_panel .image{
                                 background: transparent 50% 50% no-repeat url('/static/app/simple_xml_examples/v2.png');
                                 position: relative;
                                 top: 0px;
                                 left: 300px;
                                 width: inherit;
                                 height: inherit;
                             }
                             .singleValue {
                                 font-size: 1em;
                                 font-weight: bold;
                             }
                             #image_overlay_panel div#V7 {
                                color: $V7Color$;
                                position: absolute;
                                top: 748px;
                                left: 367px;
                             }
                                </style>
                            </html>
                     </panel>
               </row>
               <row>
                      <panel id="image_overlay_panel">
                            <html>
                                 <div class="ingestion_pipeline">
                                 <div class="image"/>
                                 <div class="singleValue" id="V7">$V7$</div>
                            </html>
                      </panel>
                </row>
          </dashboard>

Please try out and confirm!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

Engager

@niketnilay thanks for reply, everything is ok. I should only change this part:

<eval token="V7Color">case($result.status|s$=="True","green",$result.status|s$=="False","red",true(),"grey")</eval>

to:

 <eval token="V7Color">case($result.status$=="True","green",$result.status$=="False","red",true(),"grey")</eval>

and every works fine. Thanks a lot.

Legend

@Sethi90, instead of using a separate CSS File use hidden <html> <panel> with <style> tag to apply CSS override. You can pass token to CSS being applied. Following is based on your existing dashboard code (un-tested but should work).

PS: css file layout.css refernce is removed since the same has been brought inside dashboard code as hidden html panel. Token $V7Color$ has also been created in the search for setting color to green, red or default to grey based on search results. You can also print the token to ensure that it being set correctly or not.

      <dashboard>
              <label>Dash</label>
              <description>Display workflow status visually using an image, and grouped single value elements.</description>
               <search id="V7">
                 <query>index=main sourcetype="test" Name="V7"
                               |eval status = case(Value=="False", "Close",Value=="True", "Open")
                               |table status
                               |head 1</query>
                 <earliest>$earliest$</earliest>
                 <latest>$latest$</latest>
                 <progress>
                   <set token="V7">$result.status$</set>
                   <eval token="V7Color">case($result.status|s$=="True","green",$result.status|s$=="False","red",true(),"grey")</eval>
                 </progress>
               </search>
               <fieldset autoRun="true" submitButton="false">
                 <input type="time" searchWhenChanged="true">
                   <default>
                     <earliest>-15m</earliest>
                     <latest>now</latest>
                   </default>
                 </input>
               </fieldset>
               <row depends="$alwaysHideCSSPanel$">
                     <panel>
                            <html>
                                 <style>
                             .ingestion_pipeline {
                                 position: relative;
                                 width: 1220px;
                                 height: 840px;
                             }
                             #image_overlay_panel .image{
                                 background: transparent 50% 50% no-repeat url('/static/app/simple_xml_examples/v2.png');
                                 position: relative;
                                 top: 0px;
                                 left: 300px;
                                 width: inherit;
                                 height: inherit;
                             }
                             .singleValue {
                                 font-size: 1em;
                                 font-weight: bold;
                             }
                             #image_overlay_panel div#V7 {
                                color: $V7Color$;
                                position: absolute;
                                top: 748px;
                                left: 367px;
                             }
                                </style>
                            </html>
                     </panel>
               </row>
               <row>
                      <panel id="image_overlay_panel">
                            <html>
                                 <div class="ingestion_pipeline">
                                 <div class="image"/>
                                 <div class="singleValue" id="V7">$V7$</div>
                            </html>
                      </panel>
                </row>
          </dashboard>

Please try out and confirm!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

State of Splunk Careers

Access the Splunk Careers Report to see real data that shows how Splunk mastery increases your value and job satisfaction.

Find out what your skills are worth!