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
Contributor

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 Observability Cloud | Customer Survey!

If you use Splunk Observability Cloud, we invite you to share your valuable insights with us through a brief ...

Happy CX Day, Splunk Community!

Happy CX Day, Splunk Community! CX stands for Customer Experience, and today, October 3rd, is CX Day — a ...

.conf23 | Get Your Cybersecurity Defense Analyst Certification in Vegas

We’re excited to announce a new Splunk certification exam being released at .conf23! If you’re going to Las ...