Join the Conversation
- Find Answers
- :
- Using Splunk
- :
- Splunk Search
- :
- Re: How to change the colour of the value based on...
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark Topic
- Subscribe to Topic
- Mute Topic
- Printer Friendly Page
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
How to change the colour of the value based on the range in statistics table
How to change the color of the value based on the range in statistics table visualization
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
You can customize through css and javascript
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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();
});
});
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi,
Ok will check thank you
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@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!
| makeresults | eval message= "Happy Splunking!!!"
Accelerating Observability as Code with the Splunk AI Assistant
Integrating Splunk Search API and Quarto to Create Reproducible Investigation ...
Congratulations to the 2025-2026 SplunkTrust!
