topic Re: Colorize SimpleResultsTable rows based on dynamic field values in Dashboards & Visualizations

Colorize SimpleResultsTable rows based on dynamic field values

kasu_praveen — Mon, 29 Apr 2013 10:40:59 GMT

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

Re: Colorize SimpleResultsTable rows based on dynamic field values

LukeMurphey — Mon, 29 Apr 2013 17:16:15 GMT

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/application.css for an example of application.css where this techique is being used.

Re: Colorize SimpleResultsTable rows based on dynamic field values

kasu_praveen — Tue, 30 Apr 2013 06:14:35 GMT

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.

Re: Colorize SimpleResultsTable rows based on dynamic field values

LukeMurphey — Tue, 30 Apr 2013 15:17:38 GMT

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).

Re: Colorize SimpleResultsTable rows based on dynamic field values

kasu_praveen — Thu, 02 May 2013 05:58:15 GMT

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?