Dashboards & Visualizations

How to change a cell background color based on the cell value in Splunk 6.2?

Path Finder

I'm struggling with understanding what I need to do to achieve the above goal.

I have read through the Splunk answers and tried different variant but still can't get it working.

My data looks like this in a table on a dashboard:

Time    Type    Description
02/12/2014 10:43:24  Congestion  On the M25 anti-clockwise between junctions J22 and J21A, there are currently delays of 10 mins due to heavy traffic . Normal traffic conditions expected from 11:45 am.
02/12/2014 10:41:52  Congestion  On the A27 eastbound between the junctions with the A280 and the A24 North, there are currently delays of 15 mins due to heavy traffic . Normal traffic conditions expected from 12:00 pm.
02/12/2014 10:27:11  Congestion  On the A3 northbound between the junctions with the A283 and the A31, there are currently delays of 10 mins due to heavy traffic . Normal traffic conditions expected from 11:45 am.

I want to change the cell colour of the "Type" column based on the value, for example - if the value is "Congestion" I would like the background colour to change to orange.

The dashboard is called traffic_information.xml and is located in "search/local/data/ui/views".

I have tried the following methods with no luck. I'm wondering if these methods don't apply to 6.2?

http://answers.splunk.com/answers/83206/color-in-a-table-based-on-values.html
http://answers.splunk.com/answers/42994/advanced-xml-highlight-certain-values-in-a-table-not-numeric...

Can someone please explain the process to me:

  1. Which files do I need to modify in appserver/static
  2. Do I need to "BUMP", Restart Splunkd, DEBUG/Refresh or all when I make changes?

Thanks in advance

0 Karma
1 Solution

Path Finder

Hi kendrickt,

The best option is to download splunk app: Splunk 6.x Dashboard Examples https://apps.splunk.com/app/1603/
There is a good example there like yours.

View solution in original post

Path Finder

Hi kendrickt,

The best option is to download splunk app: Splunk 6.x Dashboard Examples https://apps.splunk.com/app/1603/
There is a good example there like yours.

View solution in original post

Path Finder

Hello buddy,

Thanks for your suggestion.

I have the Examples installed and I'm still getting a problem.

The examples are based around numerical values ie:
var value = parseFloat(cell.value);

I've converted the provided javascript to use strings instead by I'm not having any luck.

Thanks

0 Karma

Splunk Employee
Splunk Employee

Did you follow the "Table Cell Highlighting" Example dashboard?
Did you make sure that the changes you made to the .js file are reflected in your .css file (i.e. the class names are the same)?

You should be able to simply do:
var value = cell.value;
// Apply interpretation for number of historical searches
if (cell.field === 'Type') {
if (value === 'Accident') {
$td.addClass('range-cell').addClass('range-severe');
}
else if (value === 'Congestion') {
$td.addClass('range-cell').addClass('range-elevated');
}
else {
$td.addClass('range-cell').addClass('range-low');
}
}

and make this example work for you without changing the sample css. Make sure you reference both the .js file (script=) as well as the .css file (stylesheet=) in your simple XML element and put .js and .css file where they need to be.

Maybe share your .js and .css if you still don't have any luck?

Splunk Employee
Splunk Employee

Oh, and yes, you need to refresh Splunk after making changes to cached objects like .js and .css files (amongst others). You can

  1. restart -or-
  2. invoke the yourhost:port/en-US/debug/refresh URL -or-
  3. invoke .../en-US/info and click on EAI Object Refresh (same thing as 2.)