Dashboards & Visualizations

How to change the color of row based on cell value in splunk without css or js?

vvemula
Path Finder

I have table from the Dashboard, where I need to change color of whole row based on status. my table will look like this. 

Version Count Status
win 2012 20 compliance
win 2008 35 Non-Compliance
Xen 2.4 40 compliance
win 2016 24 Non-Compliance

 

Look for result like this

Capture.PNG

Can someone able to help me please with XML. is it possible with out using the CSS or JS. Thank you.

Labels (4)
1 Solution

to4kawa
Ultra Champion
<dashboard>
  <label>Table with color Based on Status</label>
  <row>
    <panel>
      <title>Compliance check</title>
      <html depends="$alwaysHideHTMLCSSPanel$">
        <style>
          #tableColorFinalRowBasedOnData table tbody td div.multivalue-subcell[data-mv-index="1"]{
            display: none;
          }
        </style>
      </html>
      <table id="tableColorFinalRowBasedOnData">
        <search>
          <query>| makeresults
| eval _raw="Version,Count,Status
win 2012,20,compliance
win 2008,35,Non-Compliance
Xen 2.4,40,compliance
win 2016,24,Non-Compliance"
| multikv forceheader=1
| table Version Count Status
| eval color=case(Status="compliance","HIGH",Status="Non-Compliance","LOW")
| foreach Version Count Status [ eval &lt;&lt;FIELD&gt;&gt;=mvappend('&lt;&lt;FIELD&gt;&gt;',color)]
| fields - color</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <format type="color" field="Version">
          <colorPalette type="expression">case (match(value,"LOW"), "#DC4E41",match(value,"MEDIUM"), "#F8BE34",match(value,"HIGH"),"#53A051")</colorPalette>
        </format>
        <format type="color" field="Count">
          <colorPalette type="expression">case (match(value,"LOW"), "#DC4E41",match(value,"MEDIUM"), "#F8BE34",match(value,"HIGH"),"#53A051")</colorPalette>
        </format>
        <format type="color" field="Status">
          <colorPalette type="expression">case (match(value,"LOW"), "#DC4E41",match(value,"MEDIUM"), "#F8BE34",match(value,"HIGH"),"#53A051")</colorPalette>
        </format>
      </table>
    </panel>
  </row>
</dashboard>

Maybe there's a better way.

View solution in original post

vvemula
Path Finder

Hi @to4kawa 

Thank you so much for the Help. It worked. Thank you.

0 Karma

to4kawa
Ultra Champion
<dashboard>
  <label>Table with color Based on Status</label>
  <row>
    <panel>
      <title>Compliance check</title>
      <html depends="$alwaysHideHTMLCSSPanel$">
        <style>
          #tableColorFinalRowBasedOnData table tbody td div.multivalue-subcell[data-mv-index="1"]{
            display: none;
          }
        </style>
      </html>
      <table id="tableColorFinalRowBasedOnData">
        <search>
          <query>| makeresults
| eval _raw="Version,Count,Status
win 2012,20,compliance
win 2008,35,Non-Compliance
Xen 2.4,40,compliance
win 2016,24,Non-Compliance"
| multikv forceheader=1
| table Version Count Status
| eval color=case(Status="compliance","HIGH",Status="Non-Compliance","LOW")
| foreach Version Count Status [ eval &lt;&lt;FIELD&gt;&gt;=mvappend('&lt;&lt;FIELD&gt;&gt;',color)]
| fields - color</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <format type="color" field="Version">
          <colorPalette type="expression">case (match(value,"LOW"), "#DC4E41",match(value,"MEDIUM"), "#F8BE34",match(value,"HIGH"),"#53A051")</colorPalette>
        </format>
        <format type="color" field="Count">
          <colorPalette type="expression">case (match(value,"LOW"), "#DC4E41",match(value,"MEDIUM"), "#F8BE34",match(value,"HIGH"),"#53A051")</colorPalette>
        </format>
        <format type="color" field="Status">
          <colorPalette type="expression">case (match(value,"LOW"), "#DC4E41",match(value,"MEDIUM"), "#F8BE34",match(value,"HIGH"),"#53A051")</colorPalette>
        </format>
      </table>
    </panel>
  </row>
</dashboard>

Maybe there's a better way.

amara
Observer

I also used this method ; it is very simple and engenious. thanks

0 Karma

bowesmana
SplunkTrust
SplunkTrust

Nice technique @to4kawa 

There's one minor variation you could do, which is add the colour directly to the mvfield and just use mvindex to get the colour.

      <table id="tableColorFinalRowBasedOnData2">
        <search>
          <query>| makeresults
| eval _raw="Version,Count,Status
win 2012,20,compliance
win 2008,35,Non-Compliance
Xen 2.4,40,compliance
win 2016,24,Non-Compliance"
| multikv forceheader=1
| table Version Count Status
| eval color=case(Status="compliance","#53A051",Status="Non-Compliance","#DC4E41")
| foreach Version Count Status [ eval &lt;&lt;FIELD&gt;&gt;=mvappend('&lt;&lt;FIELD&gt;&gt;',color)]
| fields - color</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <format type="color" field="Version">
          <colorPalette type="expression">mvindex(value,1)</colorPalette>
        </format>
        <format type="color" field="Count">
          <colorPalette type="expression">mvindex(value,1)</colorPalette>
        </format>
        <format type="color" field="Status">
          <colorPalette type="expression">mvindex(value,1)</colorPalette>
        </format>
      </table>

 

makelovenotwar
Path Finder

in 

mvindex(value,1)

, what does value represent? Couldn't find it in the documentation. Also, how did you account for the hex colors that are now a part of the results?

0 Karma

bowesmana
SplunkTrust
SplunkTrust

@makelovenotwar 

The value in the mvindex expression applies to the field="X". The example makes a multivalue field for each of the fields you want to display and adds the colour as the second value of that field. The mvindex(value,1) takes that embedded colour value as the one to use for the diplay.

NateS
New Member

This seems to work ok but how do you keep the color values from displaying in your table of data?

0 Karma

jotne
Builder

Not still sure how it works, but you need the html section and the table id=

<dashboard version="1.1" theme="dark">
  <label>Table with color Based on Status</label>
  <row>
    <panel>
      <title>Compliance check</title>
      <html depends="$alwaysHideHTMLCSSPanel$">
        <style>
          #tableColorFinalRowBasedOnData table tbody td div.multivalue-subcell[data-mv-index="1"]{
            display: none;
          }
        </style>
      </html>
      <table id="tableColorFinalRowBasedOnData">
        <search>
          <query>
            | makeresults
            | eval _raw="Version,Count,Status
            win 2012,20,compliance
            win 2008,35,Non-Compliance
            Xen 2.4,40,compliance
            win 2016,24,Non-Compliance"
            | multikv forceheader=1
            | table Version Count Status
            | eval color=case(Status="compliance","#53A051",Status="Non-Compliance","#DC4E41")
            | foreach Version Count Status [ eval &lt;&lt;FIELD&gt;&gt;=mvappend('&lt;&lt;FIELD&gt;&gt;',color)]
            | fields - color
          </query>
        </search>
        <format type="color" field="Version">
          <colorPalette type="expression">mvindex(value,1)</colorPalette>
        </format>
        <format type="color" field="Count">
          <colorPalette type="expression">mvindex(value,1)</colorPalette>
        </format>
        <format type="color" field="Status">
          <colorPalette type="expression">mvindex(value,1)</colorPalette>
        </format>
      </table>
    </panel>
  </row>
</dashboard>
0 Karma
Get Updates on the Splunk Community!

Splunk at Cisco Live 2025: Learning, Innovation, and a Little Bit of Mr. Brightside

Pack your bags (and maybe your dancing shoes)—Cisco Live is heading to San Diego, June 8–12, 2025, and Splunk ...

Splunk App Dev Community Updates – What’s New and What’s Next

Welcome to your go-to roundup of everything happening in the Splunk App Dev Community! Whether you're building ...

The Latest Cisco Integrations With Splunk Platform!

Join us for an exciting tech talk where we’ll explore the latest integrations in Cisco &#43; Splunk! We’ve ...