Dashboards & Visualizations

Condition based Font Color in XML Dashboard

dinesh001kumar
Explorer

Hi All,

I am having XML Dashboard in the below format, I have applied colorPalette expression in Splunk natively applying  for the cell, but request was the color should apply only font colour not on cell.

If values are greater than 99.90, then font should be in green colour --> dinesh001kumar_3-1768408502589.pngdinesh001kumar_3-1768408502589.png

If values are greater than 99 and less than 99.90, font should be in amber --> dinesh001kumar_4-1768408622654.pngdinesh001kumar_4-1768408622654.png

If values are less than 99, font should be in Red-->dinesh001kumar_5-1768408679256.pngdinesh001kumar_5-1768408679256.png

Incase null i have used fillnull as "-" ,should be grey or black--> dinesh001kumar_6-1768408761852.pngdinesh001kumar_6-1768408761852.png

dinesh001kumar_0-1768408177538.pngdinesh001kumar_0-1768408177538.png

 

Can anyone please help on this to achieve the requirement.

 

Labels (1)
0 Karma
1 Solution

ITWhisperer
SplunkTrust
SplunkTrust

Try something like this

<dashboard version="1.1" theme="light">
  <label>Font colours</label>
  <row>
    <panel depends="$alwayshidden$">
      <html>
        <style>
          #fontcolours div.multivalue-subcell[data-mv-index="0"] {
              color: limegreen !important;
            }
          #fontcolours div.multivalue-subcell[data-mv-index="1"] {
              color: orange !important;
            }
          #fontcolours div.multivalue-subcell[data-mv-index="2"] {
              color: red !important;
            }
          #fontcolours div.multivalue-subcell[data-mv-index="3"] {
              color: grey !important;
            }
        </style>
      </html>
    </panel>
    <panel>
      <table id="fontcolours">
        <search>
          <query>| makeresults count=10
| fields - _time
| eval A=100-(random()%201/100)
| eval B=100-(random()%201/100)
| eval C=100-(random()%201/100)
| foreach A B C
    [| eval &lt;&lt;FIELD&gt;&gt;=case(&lt;&lt;FIELD&gt;&gt;&lt;=98.2,mvappend("","","","-"),&lt;&lt;FIELD&gt;&gt;&gt;=99.90,mvappend(&lt;&lt;FIELD&gt;&gt;,"","",""),&lt;&lt;FIELD&gt;&gt;&gt;=99,mvappend("",&lt;&lt;FIELD&gt;&gt;,"",""),true(),mvappend("","",&lt;&lt;FIELD&gt;&gt;,""))]</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</dashboard>

Basically, you can colour font by selecting different multivalues

View solution in original post

dinesh001kumar
Explorer

Thanks it works

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

Try something like this

<dashboard version="1.1" theme="light">
  <label>Font colours</label>
  <row>
    <panel depends="$alwayshidden$">
      <html>
        <style>
          #fontcolours div.multivalue-subcell[data-mv-index="0"] {
              color: limegreen !important;
            }
          #fontcolours div.multivalue-subcell[data-mv-index="1"] {
              color: orange !important;
            }
          #fontcolours div.multivalue-subcell[data-mv-index="2"] {
              color: red !important;
            }
          #fontcolours div.multivalue-subcell[data-mv-index="3"] {
              color: grey !important;
            }
        </style>
      </html>
    </panel>
    <panel>
      <table id="fontcolours">
        <search>
          <query>| makeresults count=10
| fields - _time
| eval A=100-(random()%201/100)
| eval B=100-(random()%201/100)
| eval C=100-(random()%201/100)
| foreach A B C
    [| eval &lt;&lt;FIELD&gt;&gt;=case(&lt;&lt;FIELD&gt;&gt;&lt;=98.2,mvappend("","","","-"),&lt;&lt;FIELD&gt;&gt;&gt;=99.90,mvappend(&lt;&lt;FIELD&gt;&gt;,"","",""),&lt;&lt;FIELD&gt;&gt;&gt;=99,mvappend("",&lt;&lt;FIELD&gt;&gt;,"",""),true(),mvappend("","",&lt;&lt;FIELD&gt;&gt;,""))]</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</dashboard>

Basically, you can colour font by selecting different multivalues

Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Free Professional Services for .conf26 Attendees

This year at .conf26, we are doing something a little different. We are bringing the best minds from ...

Defend at Machine Speed: Your Guide to Security Sessions at .conf26

Splunk .conf26   With threats moving at machine speed and attack surfaces expanding across hybrid ...

Where Innovation Takes Flight: The Splunk4Aviation Flight Sim Lands at .conf26

If you hear someone at .conf26 shouting "gear down, GEAR DOWN" across the show floor, you have found us.  The ...