How to change cell colors in a dashboard table based on the value?

[kpsg25690]

Hello,

I'm trying to build a dashboard using Splunk 6.2 and I've hit a snag. I want to color a cell in a table depending on the value (numeric and non-numeric).

I've tried multiple answers provided in this forum as well as the dashboard example app, but haven't been able to make anything work.

The following is my dashboard xml

<dashboard script="app.js" stylesheet="app.css">
  <label>Check_Dashboard</label>
  <row>
    <panel>
      <table>
        <searchString>index=eventm* sourcetype=healthcheck | head 3 | table CellName,PrimaryRunning,PrimaryStatus,PrimaryEvents,PrimaryData,PrimaryPolicy,SecondaryRunning,SecondaryStatus,SecondaryEvents,SecondaryData,SecondaryPolicy</searchString>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <table id="health">
        <searchString>index=eventm* sourcetype=healthcheck | head 3 | fields CellName,PrimaryRunning,PrimaryStatus,PrimaryEvents,PrimaryData,PrimaryPolicy,SecondaryRunning,SecondaryStatus,SecondaryEvents,SecondaryData,SecondaryPolicy |stats by CellName,PrimaryRunning,PrimaryStatus,PrimaryEvents,PrimaryData,PrimaryPolicy,SecondaryRunning,SecondaryStatus,SecondaryEvents,SecondaryData,SecondaryPolicy</searchString>
      </table>
    </panel>
  </row>
</dashboard>

And this is my app.js file modified a bit from the examples (I'm not well versed in javascripting):

require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
// Row Coloring Example with custom, client-side range interpretation
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Enable this custom cell renderer for both the active_hist_searches and the active_realtime_searches field
return _(['PrimaryRunning']).contains(cell.field);
},
render: function($td, cell) {
// Add a class to the cell based on the returned value
var value = parseFloat(cell.value);
// Apply interpretation for number of historical searches
if (cell.field === 'PrimaryRunning') {
if (value == YES ) {
$td.addClass('range-cell').addClass('range-severe');
}
else if (value == NO ) {
$td.addClass('range-cell').addClass('range-low');
}
}
// Apply interpretation for number of realtime searches
//if (cell.field === 'active_realtime_searches') {
/* if (value > 1) {
$td.addClass('range-cell').addClass('range-severe');
}
 */}
// Update the cell content
$td.text(value.toFixed(2)).addClass('numeric');
}
});
mvc.Components.get('health').getVisualization(function(tableView) {
// Add custom cell renderer, the table will re-render automatically.
tableView.addCellRenderer(new CustomRangeRenderer());
});
});

I've tried restarting after changing the app.js and app.css files. Nothing seems to be working.

Any help is much appreciated.

Thanks.

EDIT:

Here is the app.css file:

#highlight td.range-low {
    color: #C0D9D9 !important;
}

#highlight td.range-elevated {
    background-color: #ffc57a !important;
    font-weight: bold;
}

#highlight td.range-severe {
    background-color: #d59392 !important;
    font-weight: bold;
}

[stmyers7941 · Accepted solution]

I'm assuming based on the JS that the values for the 'PrimaryRunning' field are either the string YES or NO, so your if statements need to be like:

if (value === 'YES' ) {
 $td.addClass('range-cell').addClass('range-severe');
 }
 else if (value === 'NO' ) {
 $td.addClass('range-cell').addClass('range-low');
 }

Also, post your CSS if this doesn't help...that needs to match up too.

Update:
Your CSS selector names need to match the id:

#health td.range-low {
     color: #C0D9D9 !important;
 }

 #health td.range-elevated {
     background-color: #ffc57a !important;
     font-weight: bold;
 }

 #health td.range-severe {
     background-color: #d59392 !important;
     font-weight: bold;

[PowerPacked]

Hi

Is it possible to do the same for string values in fields instead of numeric.

Am trying this but not working any help provided is appreciated.

if (cell.field !== "source_subnet") {
                 if (value !== "100%") {
                     $td.addClass("range-cell").addClass("range-severe");
                 }
                 // Update the cell content
                 $td.text(value).addClass('string');
             }

Please ignore am using "100%" as string.

Thanks

[kpsg25690]

Yes, your assumption is correct, the values in that field is YES or NO, but I have also tried this with other numeric fields to see if it's working or not and it's not.

I also tried using the format you suggested to no result.

I have updated the app.css in the original post for your reference.

[kpsg25690]

Still isn't working. Although I think it's not a problem with the CSS but with the javascript itself, I looked at the output in the console window and I couldn't see the class that was added to the field. However in the example app I can see the class.

[piUek]

I'd start from testing if this function goes in to first and second if.
So please try something like:

if (cell.field === 'PrimaryRunning') {
   console.log('found primaryrunning cell');
  if (cell.value === 'YES') {
    console.log('value = yes, adding class');
  }
  else if (cell.value === 'NO') {
    console.log('value = no, adding class);
  }
  else {
    console.log('value = ' + cell.value);
  }
}

Btw i've noticed that there was value = parseFloat(cell.value) in Your code, and then You are comparing this float against strings 'YES' / 'NO'? This will always evaluate to false.

[kpsg25690]

Got It working!! Thanks everybody!

Somehow the javascript was not getting triggered, I cleared the browser cache and everything and also restarted the splunk services and something starting working after that I just tweaked the script a bit to suit my needs.

@piUek I did know about that float value, I had changed it already to process a string but the problem was I couldn't see the script reaching that point and the console logging helped in that.

Thanks piUek and stymers7941!

[woodcock]

This is not a complete answer but an idea to get you to an answer. Splunk has always supported the concept of heat maps which are implemented using the feature that you need. If you can figure out how splunk does heat-mapping, you should be able to copy it. Here are some places to start:

http://docs.splunk.com/Documentation/Splunk/6.3.0/Viz/Visualizationreference
https://answers.splunk.com/answers/132524/custom-heatmap-logic-in-advanced-xml.html

[koshyk]

I can see you are adding css class (eg: range-severe) . Hope you have app.css in correct location?

[kpsg25690]

I have the css in the appserver/static folder of the app. I have also added the css for reference.

[stmyers7941]

See updates in my answer - you need to adjust you CSS.