topic Re: Updating Color for tables in Dashboards & Visualizations

Updating Color for tables

aquinojason — Mon, 19 Apr 2021 13:08:31 GMT

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,

Re: Updating Color for tables

ITWhisperer — Mon, 19 Apr 2021 13:32:50 GMT

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

Re: Updating Color for tables

aquinojason — Mon, 19 Apr 2021 14:23:11 GMT

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.

Thanks and Regards,

Re: Updating Color for tables

ITWhisperer — Mon, 19 Apr 2021 14:45:14 GMT

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