topic Re: How can make every 2 columns of table as same colour? in Splunk Search

How can make every 2 columns of table as same colour?

jenniferhao — Fri, 26 Mar 2021 18:40:40 GMT

I have a big table which is not easy to group on visualizations. Can I make each 2 columns as same color group so that can see them together immediately. For example:

Re: How can make every 2 columns of table as same colour?

ITWhisperer — Sat, 27 Mar 2021 10:25:57 GMT

Give your table an id and add a hidden style panel

<panel depends="$stayhidden$"> <title>Only SimpleXML no JS required</title> <html> <style> #tableColumnPairs th:nth-child(4n+0), #tableColumnPairs td:nth-child(4n+0), #tableColumnPairs th:nth-child(4n+1), #tableColumnPairs td:nth-child(4n+1){ background: #cccc00 !important; } #tableColumnPairs th:nth-child(4n+2), #tableColumnPairs td:nth-child(4n+2), #tableColumnPairs th:nth-child(4n+3), #tableColumnPairs td:nth-child(4n+3){ background: #cc0000 !important; } </style> </html> </panel> <panel> <table id="tableColumnPairs ">

Re: How can make every 2 columns of table as same colour?

jenniferhao — Wed, 07 Apr 2021 15:57:43 GMT

Sorry for reply late. I did the testing but it seems not working.
<dashboard>
<row>
<panel depends="$stayhidden$">
<html>
<style>
#tableColumnPairs th:nth-child(4n+0),
#tableColumnPairs td:nth-child(4n+0),
#tableColumnPairs th:nth-child(4n+1),
#tableColumnPairs td:nth-child(4n+1){
background: #cc0000 !important;
}
#tableColumnPairs th:nth-child(4n+2),
#tableColumnPairs td:nth-child(4n+2),
#tableColumnPairs th:nth-child(4n+3),
#tableColumnPairs td:nth-child(4n+3){
background: #cc0000 !important;
}
</style>
</html>
</panel>
<panel>
<table id="tableColumnPairs">
<title>Table with Value and Color Combined </title>
<search>
<query>| makeresults
| eval data= "C1 1 2 10 20 5 2 12 9 33 1 14 5;C2 3 2 5 4 11 2 32 5 44 1 88 2;C3 5 4 5 3 6 8 12 9 18 3 7 2;C4 6 4 8 2 77 5 45 3 12 5 87 9;"
| makemv data delim=";"
| mvexpand data
| makemv data delim=" "
| eval Client=mvindex(data,0), pre1=mvindex(data,1), post1=mvindex(data,2), pre2=mvindex(data,3), post2=mvindex(data,4),pre3=mvindex(data,5), post3=mvindex(data,6),pre4=mvindex(data,7), post4=mvindex(data,8),pre5=mvindex(data,9), post5=mvindex(data,10),pre6=mvindex(data,11), post6=mvindex(data,12)
| fields - _time data
|table pre1 post1 pre2 post2 pre3 post3 pre4 post4 pre5 post5 pre6 post6
</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">10</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
</row>
</dashboard><dashboard>
<row>
<panel depends="$stayhidden$">
<html>
<style>
#tableColumnPairs th:nth-child(4n+0),
#tableColumnPairs td:nth-child(4n+0),
#tableColumnPairs th:nth-child(4n+1),
#tableColumnPairs td:nth-child(4n+1){
background: #cc0000 !important;
}
#tableColumnPairs th:nth-child(4n+2),
#tableColumnPairs td:nth-child(4n+2),
#tableColumnPairs th:nth-child(4n+3),
#tableColumnPairs td:nth-child(4n+3){
background: #cc0000 !important;
}
</style>
</html>
</panel>
<panel>
<table id="tableColumnPairs">
<title>Table with Value and Color Combined </title>
<search>
<query>| makeresults
| eval data= "C1 1 2 10 20 5 2 12 9 33 1 14 5;C2 3 2 5 4 11 2 32 5 44 1 88 2;C3 5 4 5 3 6 8 12 9 18 3 7 2;C4 6 4 8 2 77 5 45 3 12 5 87 9;"
| makemv data delim=";"
| mvexpand data
| makemv data delim=" "
| eval Client=mvindex(data,0), pre1=mvindex(data,1), post1=mvindex(data,2), pre2=mvindex(data,3), post2=mvindex(data,4),pre3=mvindex(data,5), post3=mvindex(data,6),pre4=mvindex(data,7), post4=mvindex(data,8),pre5=mvindex(data,9), post5=mvindex(data,10),pre6=mvindex(data,11), post6=mvindex(data,12)
| fields - _time data
|table pre1 post1 pre2 post2 pre3 post3 pre4 post4 pre5 post5 pre6 post6
</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">10</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
</row>
</dashboard>

Re: How can make every 2 columns of table as same colour?

ITWhisperer — Wed, 07 Apr 2021 16:26:00 GMT

Apart from using the same colour for both sets of pairs of columns, I can't see anything wrong, indeed, it works for me

Re: How can make every 2 columns of table as same colour?

jenniferhao — Fri, 09 Apr 2021 20:47:09 GMT

I tested it on the last Splunk(8.1.3). It works well. But our PROD version is Splunk Enterprise Version:7.3.3Build:7af3758d0d5e. But it doesn't work at all. Anyway thanks for help.

Re: How can make every 2 columns of table as same colour?

ITWhisperer — Fri, 09 Apr 2021 21:02:10 GMT

I don't have that build available (at the moment) but my guess would be that the HTML is constructed differently, perhaps the id is not passed in the same way or the table is built differently. If you can inspect the page, perhaps we can work out a fix or you upgrade production 🙂