Dashboards & Visualizations

Updating Color for tables

aquinojason
Path Finder

Hi,

How can I add colors to the table based on the search below? I wanted to have a alternating colors to make the view better.

<panel>
<table>
<search>
<query>index=index1 sourcetype=sourcetype1 ACCOUNT_CODE!=ACCOUNT_CODE | multikv forceheader=1 | dedup ACCOUNT_CODE Application BusinessUnit | table ACCOUNT_CODE Application BusinessUnit ApplicationRTO | chart values(Application) as Application by BusinessUnit</query>
<earliest>0</earliest>
<latest></latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">20</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">cell</option>
<option name="percentagesRow">false</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">false</option>
<drilldown>
<link target="_blank">/app/mainframe-platform/average_mips_per_application_bu?BusinessUnit=$click.value$</link>
</drilldown>
</table>
</panel>

 

Thanks and Regards,

Labels (1)
0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

A similar question was answered here - depending on which version of splunk you are using, the html may or may not need an empty div - also, this solution was to colour pairs of columns, so you would need to adjust it for just 2n+0 and 2n+1

0 Karma

aquinojason
Path Finder

Hello @ITWhisperer ,

Thank you for the great assistance. We are currently on build 7.3. I wanted to update the look of the table like the font and color so that users would be able to see it better.

 

aquinojason_0-1618842150623.png

Thanks and Regards,

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

For version 7, the empty <div/> is important so that the style sheet gets passed through. This doesn't appear to be needed in version 8.

    <panel depends="$stayhidden$">
      <html>
        <div/>
        <style>
          div[id^="tableAlternateColours"] th:nth-child(2n+0){
            background: #cccc00 !important;
            border-right: 0;
            color: white !important;
          }
          div[id^="tableAlternateColours"] td:nth-child(2n+0){
            background: #ffff00 !important;
          }
          div[id^="tableAlternateColours"] th:nth-child(2n+1){
            background: #cc0000 !important;
            border-right: 0;
            color: white !important;
          }
          div[id^="tableAlternateColours"] td:nth-child(2n+1){
            background: #ff0000 !important;
          }
        </style>
      </html>
    </panel>
    <panel>
      <table id="tableAlternateColours">
0 Karma
Get Updates on the Splunk Community!

How to Monitor Google Kubernetes Engine (GKE)

We’ve looked at how to integrate Kubernetes environments with Splunk Observability Cloud, but what about ...

Index This | How can you make 45 using only 4?

October 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with this ...

Splunk Education Goes to Washington | Splunk GovSummit 2024

If you’re in the Washington, D.C. area, this is your opportunity to take your career and Splunk skills to the ...