Solved: How to change the color of row based on cell value...

vvemula · ‎10-16-2020

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

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

to4kawa · ‎10-16-2020

<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 · ‎10-19-2020

Hi @to4kawa

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

to4kawa · ‎10-16-2020

<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.

bowesmana · ‎10-19-2020

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 · ‎05-18-2023

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?

bowesmana · ‎07-14-2023

@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 · ‎07-24-2023

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

jotne · ‎07-24-2023

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>

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

panel

simple XML

single value

trellis layout

How to Get Started with Splunk Data Management Pipeline Builders (Edge Processor & ...

Out of the Box to Up And Running - Streamlined Observability for Your Cloud ...

Splunk Smartness with Brandon Sternfield | Episode 3