Hi Jolver14,
Looking at your question, this would be an ideal place for you to use Custom Cell highlighting.
Although it doesn't set the colour of the whole column, you can configure it to use a rangemap, i.e. if it uses a low amount, show green, medium, show orange, and high show red.
See: Splunk dashboard 6.x dashboard examples or code below;
/* Cell Highlighting */
/*
#highlight td {
background-color: #c1ffc3 !important;
}
*/
#highlight td.range-low {
color: #C0D9D9;
}
#highlight td.range-elevated {
background-color: #ffc57a !important;
font-weight: bold;
}
#highlight td.range-severe {
background-color: #d59392 !important;
font-weight: bold;
}
JS:
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 _(['active_hist_searches', 'active_realtime_searches']).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 === 'active_hist_searches') {
if (value > 2) {
$td.addClass('range-cell').addClass('range-severe');
}
else if (value > 1) {
$td.addClass('range-cell').addClass('range-elevated');
}
else if (value > 0) {
$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('highlight').getVisualization(function(tableView) {
// Add custom cell renderer
tableView.table.addCellRenderer(new CustomRangeRenderer());
// tableView.on('rendered', function() {
// Apply class of the cells to the parent row in order to color the whole row
// tableView.$el.find('td.range-cell').each(function() {
// $(this).addClass(this.className);
// });
//});
// Force the table to re-render
tableView.table.render();
});
});
This I believe might suit you more, but if you wish to just change the colour of the column I believe you must use HTML/CSS combination for your table, please post the source code for your table and I'll see If i can come up with something.
... View more