topic How to change the colour of the value based on the range in statistics table in Splunk Search

How to change the colour of the value based on the range in statistics table

shruthiangadi — Fri, 31 Jan 2020 06:31:01 GMT

How to change the color of the value based on the range in statistics table visualization

Re: How to change the colour of the value based on the range in statistics table

vnravikumar — Fri, 31 Jan 2020 09:40:22 GMT

Check the following link

https://docs.splunk.com/Documentation/Splunk/latest/Viz/TableFormatsXML

https://docs.splunk.com/Documentation/Splunk/latest/Viz/TableFormatsFormatting#Format_table_columns

Re: How to change the colour of the value based on the range in statistics table

shruthiangadi — Fri, 31 Jan 2020 09:44:20 GMT

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.

Re: How to change the colour of the value based on the range in statistics table

vnravikumar — Fri, 31 Jan 2020 09:54:23 GMT

You can customize through css and javascript

Re: How to change the colour of the value based on the range in statistics table

vnravikumar — Fri, 31 Jan 2020 10:13:06 GMT

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();
    });
});

Re: How to change the colour of the value based on the range in statistics table

shruthiangadi — Fri, 31 Jan 2020 10:14:56 GMT

Hi,

Ok will check thank you

Re: How to change the colour of the value based on the range in statistics table

niketn — Thu, 06 Feb 2020 06:31:02 GMT

@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!