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.

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!

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

Splunk is officially part of Cisco

Revolutionizing how our customers build resilience across their entire digital footprint.   Splunk ...

Splunk APM & RUM | Planned Maintenance March 26 - March 28, 2024

There will be planned maintenance for Splunk APM and RUM between March 26, 2024 and March 28, 2024 as ...