Dashboards & Visualizations

Colorize SimpleResultsTable rows based on dynamic field values

kasu_praveen
Communicator

I have a simple table on a dashboard which has various bits of info. In particular, there is a "dest" column. I'd like to colorize each row according to the dest value. Values of "dest" column are dynamic. I have seen almost similar kind of thread here, but that is of static values (we know there will be only 3 values of severity column). I am looking for something of dynamic values (Not sure how many dest are possible).

And, I am fine with defining just 5 background colors (5 CSS classes) and assign first color for 6th "dest" value, 2nd color for 7th "dest" value....and so on

Tags (1)
1 Solution

LukeMurphey
Champion

See "Color in a table based on values" for a method that allows you to colorize cells based on the contents. This works in simple and advanced XML.

You may want to take this a step further and colorize a cell based on the value of a previous cell. This is useful when you want a to stylize a cell according to something on the server (but not based solely on the contents of one cell). This technique would allow you to stylize a cell based on a value pulled in from a lookup.

For example, you could include a column called dest_class in your view and then use this column to indicate how the dest column ought to be stylized. You can do this via CSS once you are using the application.js specified in the other Splunk-Base answer above:

Define CSS to stylize the column next to the dest_class column

This CSS will style the cell in the column just after the "dest_class" column if "dest_class" is set to "internal":

.splView-YOUR_VIEW_NAME .SimpleResultsTable tr td.d[data-value="internal"][field="dest_class"] + td
{
    color: #C42323;
    font-weight: bold;
}

This should be placed in $SPLUNK_HOME/etc/apps/YOUR_APP/appserver/static/application.css.

Defined CSS to hide the dest_class column

There is a good chance that may want to hide the column that you are using to stylize the other column. You can do this with a little CSS. Note that this examples assumes that the column you want to hide is the 8th column (modify per your view):

.splView-YOUR_VIEW_NAME .SimpleResultsTable tr td:nth-of-type(8),
.splView-YOUR_VIEW_NAME .SimpleResultsTable tr th:nth-of-type(8){
     display:none;   
}

See https://github.com/LukeMurphey/splunk-website-monitoring/blob/master/src/appserver/static/applicatio... for an example of application.css where this techique is being used.

View solution in original post

LukeMurphey
Champion

See "Color in a table based on values" for a method that allows you to colorize cells based on the contents. This works in simple and advanced XML.

You may want to take this a step further and colorize a cell based on the value of a previous cell. This is useful when you want a to stylize a cell according to something on the server (but not based solely on the contents of one cell). This technique would allow you to stylize a cell based on a value pulled in from a lookup.

For example, you could include a column called dest_class in your view and then use this column to indicate how the dest column ought to be stylized. You can do this via CSS once you are using the application.js specified in the other Splunk-Base answer above:

Define CSS to stylize the column next to the dest_class column

This CSS will style the cell in the column just after the "dest_class" column if "dest_class" is set to "internal":

.splView-YOUR_VIEW_NAME .SimpleResultsTable tr td.d[data-value="internal"][field="dest_class"] + td
{
    color: #C42323;
    font-weight: bold;
}

This should be placed in $SPLUNK_HOME/etc/apps/YOUR_APP/appserver/static/application.css.

Defined CSS to hide the dest_class column

There is a good chance that may want to hide the column that you are using to stylize the other column. You can do this with a little CSS. Note that this examples assumes that the column you want to hide is the 8th column (modify per your view):

.splView-YOUR_VIEW_NAME .SimpleResultsTable tr td:nth-of-type(8),
.splView-YOUR_VIEW_NAME .SimpleResultsTable tr th:nth-of-type(8){
     display:none;   
}

See https://github.com/LukeMurphey/splunk-website-monitoring/blob/master/src/appserver/static/applicatio... for an example of application.css where this techique is being used.

kasu_praveen
Communicator

Luke,
I am planning to have 8 CSS classes (8 background colors). As I mentioned in above comment, I am unaware of number of unique values possible for "dest" column, It may be 50 or 100. I am planning to apply 8 CSS classes for first 8 unique "dest" column values and for 9th unique value 1st(first) CSS class...10th unique value, 2nd CSS class...and so on (That means, I am planning to repeat CSS classes across all values).

Am I making sense here?

0 Karma

LukeMurphey
Champion

Can you let me know how you want to determine the style of the cell? I am unclear how you are going to stylize the contents based on the values if you don't have some knowledge about the potential values (I'm guessing you have some technique in mind).

0 Karma

kasu_praveen
Communicator

Luke, Thanks for taking time.This looks good, I think this works only if I know what values are possible for "dest" column.

But in my case I don't know what field values are possible for "dest" column. There may be 50 or 100 or more different values possible.

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

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

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...