How can make every 2 columns of table as same colo...

jenniferhao · ‎03-26-2021

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:

ITWhisperer · ‎03-27-2021

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

jenniferhao · ‎04-07-2021

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>

ITWhisperer · ‎04-07-2021

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

jenniferhao · ‎04-09-2021

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.

ITWhisperer · ‎04-09-2021

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 🙂

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

table

Announcing Scheduled Export GA for Dashboard Studio

Extending Observability Content to Splunk Cloud

More Control Over Your Monitoring Costs with Archived Metrics GA in US-AWS!