How to highlight only the maximum value of a cell ...

akarivaratharaj · ‎02-13-2020

In my dashboard, a table panel which have the percentage of a metric for each month is displayed. Below is the query details:

<Base search>
| stats avg(metric_perc) as Metric over Period by Host

Below are the results of my search query:

Sl.No,  Period,   host1,  host2,  host3
1       Jan        36      52      64
2       Feb        43      69      66
:
:
12      Dec        26      45      58

I want to highlight only the maximum the values of each host for each period.

[Note: Here host1, host2 and host3 are not column names they are values of the column called Host. As I used the keyword over, I got the above table representation with the combination of 3 fields such as Metric, Period and Host]

Could someone help me in finding how can I highlight or color code only the maximum value of Metric for each host and period.

vnravikumar · ‎02-13-2020

Hi

Check the below logic it will highlight the max value in the specified column in javascript, I hope this logic will help you.

<dashboard script="highlight.js">
  <label>highlight</label>
  <row>
    <panel>
      <table id="rk">
        <search>
          <query>| makeresults 
| eval column1=22,column2=21 
| append 
    [| makeresults 
    | eval column1=12,column2=43] 
| eventstats max(column1) as col1_max, max(column2) as col2_max 
| eval column1= column1."##".col1_max,column2 = column2."##".col2_max</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <fields>_time,column1,column2</fields>
        <option name="count">10</option>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
  <row depends="$hide$">
    <panel>
      <html>
       <style>
           #rk .highlight {
               color: rgb(255, 255, 255) !important; 
               background-color: rgb(220, 78, 65)!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 _([ 'column1','column2']).contains(cell.field);
        },
        render: function($td, cell) {
            var value = cell.value.split("##")[0];
            var maxValue = cell.value.split("##")[1];
            if(value == maxValue){
                $td.addClass('highlight');
            }
            $td.text(value).addClass('numeric');
        }
    });
    mvc.Components.get('rk').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();
    });
});

gcusello · ‎02-13-2020

Hi @akarivaratharaj,
di you already tried with Data Overlay?
You can find instructions in the Splunk Dashboard Examples App ( https://splunkbase.splunk.com/app/1603/ ).

Ciao.
Giuseppe

akarivaratharaj · ‎02-13-2020

@gcusello Yes I have already tried that. I added the below code to my dashboard source.

<option name="dataOverlayMode">heatmap</option>

This code makes the whole table representation cells with color coded. This is similar to the code of colorPalette where it shows min, mid and max values with color range from low to high.

But I want to show only one value which is the maximum value in a column or row to be highlighted.

How to highlight only the maximum value of a cell in table representation

Extending Observability Content to Splunk Cloud

More Control Over Your Monitoring Costs with Archived Metrics!

New in Observability Cloud - Explicit Bucket Histograms