topic Re: How to color a table row based on a cell's value? in Dashboards & Visualizations

How to color a table row based on a cell's value?

andrei1bc — Thu, 04 Feb 2016 16:22:05 GMT

My search:

index="index1" OR index="4" | eval Value=if(index="index1", round(((Value-100)*-1), 0), round(Value, 0)) | where Value>50

I am trying to color the table in red, yellow, and green using the numbers returned from Value. The table has 2 columns -> test1 and test2. Value result will be listed under test2 column and the colors should be: 0-60 green , 60-80 yellow , 80-100 red.

CSS :

td.icon {
    text-align: center;
}

td.icon i {
    font-size: 25px;
    text-shadow: 1px 1px #aaa;
}
td.icon .severe {
    color: red;
}
td.icon .elevated {
    color: orange;
}
td.icon .low {
    color: green;
}
    /* Row Coloring */
#highlight tr td {
    background-color: #c1ffc3 !important;
}

#highlight tr.range-elevated td {
    background-color: orange !important;
}
#highlight tr.range-severe td {
    background-color: red !important;
}
#highlight .table td {
    border-top: 1px solid #fff;
}
#highlight td.range-severe, td.range-elevated {
    font-weight: bold;
}
.icon-inline i {
    font-size: 18px;
    margin-left: 5px;
}
.icon-inline i.icon-alert-circle {
    color: #ef392c;
}
.icon-inline i.icon-alert {
    color: #ff9c1a;
}
.icon-inline i.icon-check {
    color: #5fff5e;
}

Script file :

 require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return _(['test2']).contains(cell.field);
        },
        render: function($td.cell) {
            var value = parseFloat(cell.value)
            if (cell.field === 'test2') {
                    if (value > 80) {
                    $td.addClass('range-cell').addClass('range-severe');
                     }
                }
            }
        }
    });
    mvc.Components.get('highlight').getVisualization(function(tableView) {
        tableView.on('rendered', function() {
            tableView.$el.find('td.range-cell').each(function() {
               $(this).parents('tr').addClass(this.className);
            });
        });
        tableView.addCellRenderer(new CustomRangeRenderer());
    });
});

The result i get is all table rows in green, regardles of the value. Please help and thank you in advance.

Re: How to color a table row based on a cell's value?

gyslainlatsa — Tue, 29 Sep 2020 08:40:56 GMT

hi andrei1bc,

that is the value for the file that use for do the test:

name     test1    test2
a          12       25
b           2        2
c           3        61
d         12       75
e           3       81
f            8       90
g          5       50
h         1       95
i          3       70

next try like this:

table_row_highlighting.xml

<dashboard script="table.js" stylesheet="table.css">
    <label>Table Row Highlighting</label>

    <row>
        <table id="highlight">
            <title>Row Coloring</title>
            <searchString>index=test |table name test1 test2</searchString>
            <earliestTime>0</earliestTime>
            <option name="drilldown">none</option>
        </table>
    </row>

</dashboard>

table.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 _(['test2']).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 === 'test2') {
                if (value < 60) {
                    $td.addClass('range-cell').addClass('range-elevated');
                }
                else if(value > 60 && value < 80) {
                    $td.addClass('range-cell').addClass('range-severe');
                }
                else if(value > 80 && value < 100) {
                    $td.addClass('range-cell').addClass('range-higher');
                }

            }

            // Update the cell content
            $td.text(value.toFixed(2)).addClass('numeric');
        }
    });

    mvc.Components.get('highlight').getVisualization(function(tableView) {
        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).parents('tr').addClass(this.className);
            });
        });
        // Add custom cell renderer, the table will re-render automatically.
        tableView.addCellRenderer(new CustomRangeRenderer());
    });

});

table.css

/* Row Coloring */
#highlight tr.range-elevated td {
    background-color: #329606 !important;               
}

#highlight tr.range-severe td {
    background-color: #F1FF70 !important;              
}

#highlight tr.range-higher td {
    background-color: #D6344D !important;              
}

#highlight td.range-severe, td.range-elevated, td.range-higher{
    font-weight: 800;
}

don't forget to restart splunkd
after restart, the result is this:

let know if it's work

please forgive my english

Re: How to color a table row based on a cell's value?

andrei1bc — Mon, 08 Feb 2016 12:28:05 GMT

Thank you for the clear post. But the CSS does not seem to update if modified (just the color code) and restarting splunk does not fix it . Any suggestions ?

Re: How to color a table row based on a cell's value?

jeffland — Mon, 08 Feb 2016 12:33:45 GMT

Make sure you clean your browser's cache for the page, e.g. STRG-F5 (depends on your browser).

Re: How to color a table row based on a cell's value?

gyslainlatsa — Mon, 08 Feb 2016 12:38:48 GMT

hi andrei1bc,

I had the same problem when I was looking for the solution. trying to empty the cache of your browser

if it works, do not forget to vote and accept my answer.

Re: How to color a table row based on a cell's value?

andrei1bc — Tue, 09 Feb 2016 08:55:52 GMT

gyslainlatsa your solution worked. Thank you.

As far as it goes with the CSS update issue, it was not related to the browser cache but to the fact that i was using the script in 3 tables instead of 1. So i added this to the script :

 mvc.Components.get('highlight_table1').getVisualization(function(tableView) {
     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).parents('tr').addClass(this.className);
         });
     });

 mvc.Components.get('highlight_table2').getVisualization(function(tableView) {
     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).parents('tr').addClass(this.className);
         });
     });

 mvc.Components.get('highlight_tabel3').getVisualization(function(tableView) {
     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).parents('tr').addClass(this.className);
         });
     });

I have also modified the CSS file to reflect the changes, this way i can use individual colors in each table.

/* Row Coloring */
#highlight_table1 tr.range-elevated td {
    background-color: #329606 !important;                  
}

#highlight_table1 tr.range-severe td {
    background-color: #F1FF70 !important;               
}

#highlight_table1 tr.range-higher td {
    background-color: #D6344D !important;               
}

#highlight_table1 td.range-severe, td.range-elevated, td.range-higher{
    font-weight: 800;
}

#highlight_table2 tr.range-elevated td {
    background-color: #329606 !important;                  
}

#highlight_table2 tr.range-severe td {
    background-color: #F1FF70 !important;               
}

#highlight_table2 tr.range-higher td {
    background-color: #D6344D !important;               
}

#highlight_table2 td.range-severe, td.range-elevated, td.range-higher{
    font-weight: 800;
}

#highlight_table3 tr.range-elevated td {
    background-color: #329606 !important;                  
}

#highlight_table3 tr.range-severe td {
    background-color: #F1FF70 !important;               
}

#highlight_table3 tr.range-higher td {
    background-color: #D6344D !important;               
}

#highlight_table3 td.range-severe, td.range-elevated, td.range-higher{
    font-weight: 800;
}

Re: How to color a table row based on a cell's value?

gyslainlatsa — Tue, 09 Feb 2016 09:06:38 GMT

thank, I'm happy for you

please don't forget to vote

Re: How to color a table row based on a cell's value?

cpt12tech — Tue, 21 Mar 2017 21:57:57 GMT

This was a great answer, mainly because it showed me how to run multiple tables from a .js file and learn more about how to color rows.

I was having problems getting a second table to populate in a dashboard using row highlighting.

Finally found this post here:
https://answers.splunk.com/answers/306849/rangemap-cell-formatting-for-multiple-tables.html

where someone created two .js files, one for each table. In this thread it would be three .js files. And now the .js scripts are correctly formatting the tables.

Re: How to color a table row based on a cell's value?

cpt12tech — Tue, 21 Mar 2017 23:56:46 GMT

This is a great answer because it helped me learn more about coloring rows and using it for multiple tables in a dashboard.

It wasn't working for me until I found this post:
https://answers.splunk.com/answers/318747/can-i-have-hidden-fields-in-a-tableview.html

I got two tables in the same dashboard working by creating a separate .js file for each table.
Instead of having two
mvc.Components.get()
in the same .js document I created two .js documents each with a single mvc.Component.get() named for the appropriate table.

Re: How to color a table row based on a cell's value?

PowerPacked — Mon, 27 Apr 2020 06:23:17 GMT

Is it possible to do the same for string values in fields instead of numeric.

Am trying this but not working any help provided is appreciated.

   if (cell.field !== "source_subnet") {
                     if (value !== "100%") {
                         $td.addClass("range-cell").addClass("range-severe");
                     }
                     // Update the cell content
                     $td.text(value).addClass('string');
                 }

Please ignore am using "100%" as string.

Thanks

Re: How to color a table row based on a cell's value?

niketn — Mon, 27 Apr 2020 07:18:39 GMT

@PowerPacked this is a very old question from 2016 to bump, however you should be able to apply table row coloring based on String values as well. Following is an olde answer of mine: https://answers.splunk.com/answers/581747/change-row-color-when-the-field-time-value-increas.html
or https://answers.splunk.com/answers/583047/can-i-color-a-cell-based-on-condition.html

You would need to ensure to add a setTimeout() function if you are running Splunk 6.6 or higher. Refer to another answer: https://answers.splunk.com/answers/614788/splunk-dashboard-examples-table-row-highlighting-b.html

Finally also wanted to show you purely SimpleXML based approach for table row coloring based on expression colorPalette format.: https://answers.splunk.com/answers/820403/how-to-change-font-color-based-on-a-condition-for.html

Please upvote the respective answer/s if you find them helpful 🙂