How to change the color of the value based on the range in statistics table visualization
Hi
I tried in the above link which you provided but it will change the whole cell background not the cell value.
Means it will change the colour of the cell instead of value present in that field.
You can customize through css and javascript
Check this
xml:
<dashboard script="test.js">
<label>table color</label>
<row>
<panel>
<table id="highlight">
<search>
<query>|makeresults count=100 |streamstats count</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
</row>
<row>
<panel>
<html>
<style>
#highlight .blue {
color: blue; !important;
}
#highlight .green {
color: green; !important;
}
#highlight .red {
color: red; !important;
}
</style>
</html>
</panel>
</row>
</dashboard>
javascript:
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
return _([ 'count']).contains(cell.field);
},
render: function($td, cell) {
var value = String(cell.value);
if (cell.field === 'count') {
if (value > 0 && value <=30){
$td.addClass('blue');
}else if (value > 30 && value <=70){
$td.addClass('green');
} if (value > 70 && value <=100){
$td.addClass('red');
}
}
$td.text(value).addClass('numeric');
}
});
mvc.Components.get('highlight').getVisualization(function(tableView) {
tableView.table.addCellRenderer(new CustomRangeRenderer());
tableView.on('rendered', function() {
tableView.$el.find('td.range-cell').each(function() {
$(this).parents('tr').addClass(this.className);
});
});
tableView.table.render();
});
});
Hi,
Ok will check thank you
@vnravikumar I would suggest you to clarify poster requirement before posting an answer so that the question gets proper attention from other community experts as they would otherwise ignore such questions as already answered. Under such case the poster would be forced to post a new question with updated requirements for gaining proper attention. Which happened in this case. Nevertheless as per details provided by @shruthiangadi seems like the Code provided in the comment above is appropriate answer rather than the original Splunk Docs links provided. (PS: might need a setTimeout inside render function due to table JS extension bug)
Up-voting the answer above!