Dashboards & Visualizations

change field value font color in a table

thambisetty
SplunkTrust
SplunkTrust

Hi
below is my table in a dashboard:

severity count

High 1004
Low 12000
Medium 10000

my question is how to show entire line in red color which is having High severity.
please help me anyone i tried application.js and application.css
here is my application.js and application.css

application.js

if( Splunk.Module.SimpleResultsTable ){
Splunk.Module.SimpleResultsTable = $.klass(Splunk.Module.SimpleResultsTable, {

 renderResults: function($super, htmlFragment) {
     $super(htmlFragment);

     if (this.getInferredEntityName()=="events") {
         this.renderedCount = $("tr", this.container).length - 1;
     }

     $.each( $('.simpleResultsTable td'), function(index, value) {
         $(this).attr('data-value', $(this).text() );
     });
 }

});

application.css

.SimpleResultsTable tr td.d[field="severity"][data-value="High"]{
font-weight: bold;
background-color: #C42323;
color: white;
}

please help me on this..

————————————
If this helps, give a like below.
Tags (2)

stephanefotso
Motivator

I hope this could help you. just test it.
you'll have to put js and css files in the folowing directory: your_app_name / appserver / static , and do not forget to restart splunk.
Here is the search i will use: (index=_internal sourcetype=* | stats count as total_count by sourcetype ) and i will change the font of the row where "splunkd_access" is a sourcetype. lets go!

table_row_highlighting.xml

 <dashboard script="table_row_highlighting.js" stylesheet="table_decorations.css">
     <label>font_of_single_table_string</label>
     <row>
         <table id="highlight">
             <title>Row Coloring</title>
             <searchString>index=_internal sourcetype=*  | stats count as total_count by sourcetype</searchString>
             <earliestTime>-24h</earliestTime>
             <option name="drilldown">none</option>
         </table>
     </row>
 </dashboard>

table_row_highlighting.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 the sourcetype field
             return _([ 'sourcetype']).contains(cell.field);
         },
         render: function($td, cell) {
             // Add a class to the cell based on the returned value
             var value = String(cell.value);
            // Apply interpretation for number of historical searches
             if (cell.field === 'sourcetype') {
                  if (value==="splunkd_access" ){
                     $td.addClass('range-cell').addClass('range-elevated');
                 }
             }
             $td.text(value.toString()).addClass('string');
         }
     });
     mvc.Components.get('highlight').getVisualization(function(tableView) {
         // Add custom cell renderer
         tableView.table.addCellRenderer(new CustomRangeRenderer());
         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);
             });
         });
         // Force the table to re-render
         tableView.table.render();
     });
 });

table_decorations.css

/* Row Coloring */

 #highlight tr.range-elevated td {
     background-color: #ffc57a !important;
     font-weight: bold;
     color:blue;
 }
SGF

0YAoNnmRmKDg
Path Finder

Thank you so much - i used this to highlight status words instead of numbers - awesome!

splk
Communicator

Upvote! All Splunk Examples are only with numbers, your example shows how to handel also text values in cells.

@Splunk, please update your examples!

0 Karma

thambisetty
SplunkTrust
SplunkTrust

how to use code the which showing bottom of the each dashboard.

————————————
If this helps, give a like below.
0 Karma

tom_frotscher
Builder

Hi,
there is a example implementation of this feature in the "Splunk 6.x Dashboard Example App". The example is called "Table Row Highlighting" and provides a simple xml example, together with the corresponding js and css files. This should be a good startingpoint for you.

Greetings

Tom

0 Karma

thambisetty
SplunkTrust
SplunkTrust

in table row highlighting they are highlighting by using numeric values now i want to highlight by using text inside the field.please help me
// Apply interpretation for number of historical searches
if (cell.field === 'severity') {
if (value =='High') {
$td.addClass('range-cell').addClass('range-elevated');
}
}
// Apply interpretation for number of realtime searches
if (cell.field === 'severity') {
if (value == 'Low') {
$td.addClass('range-cell').addClass('range-severe');
}
}
// Update the cell content
$td.text(value.addClass('string');
}

————————————
If this helps, give a like below.
0 Karma

tom_frotscher
Builder

What you tried is the right way:

if (cell.field === 'severity') { 
  if (value =='High') { 
   $td.addClass('range-cell').addClass('range-elevated'); } }

But right before these lines, you define what is in the value variable. In the original piece of code it looks like this:
var value = parseFloat(cell.value);

This parses the string value of the cell to a number. But in your case, you don't want to get a number from the cell, instead you just want to the string.

so try to replace this with:
var value = cell.value;

0 Karma

thambisetty
SplunkTrust
SplunkTrust
 return _(['severity']).contains(cell.field);
    },
    render: function($td, cell) {
        // Add a class to the cell based on the returned value
        var value = cell.value;
        // Apply interpretation for number of historical searches
        if (cell.field === 'severity') {
            if (value=='High') {
                $td.addClass('range-cell').addClass('range-elevated');
            }
        }
        // Apply interpretation for number of realtime searches
        if (cell.field === 'severity') {
            if (value=='Low') {
                $td.addClass('range-cell').addClass('range-severe');
            }
        }
        // Update the cell content
    $td.text(value.addClass('string');
    }
});

i am getting every row in a green color even though i tried above snippet

————————————
If this helps, give a like below.
0 Karma

tom_frotscher
Builder

If everything is green, there should be a problem with your if clauses or the check for cell.field==='severity'. Because in the css it looks like green is the default color. You can use a debuger or manually look what values your variables have with something like this:
console.log(cell.field)
or
console.log(value)

and then look at your browsers web console.

For example use this:

  return _(['severity']).contains(cell.field);
 },
 render: function($td, cell) {
     // Add a class to the cell based on the returned value
     var value = cell.value;
     // Apply interpretation for number of historical searches
     if (cell.field === 'severity') {
         console.log(value + "High case");
         if (value=='High') {
             $td.addClass('range-cell').addClass('range-elevated');
         }
     }
     // Apply interpretation for number of realtime searches
     if (cell.field === 'severity') {
         console.log(value + "Low case");
         if (value=='Low') {
             $td.addClass('range-cell').addClass('range-severe');
         }
     }
     // Update the cell content
 $td.text(value.addClass('string'));
 }
});
0 Karma

thambisetty
SplunkTrust
SplunkTrust

console log

Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi)
Resource interpreted as Script but transferred with MIME type text/plain: "http://10.215.3.195:8000/en-GB/static/@207789:10003/app/Symantec_DLP/table_row_highlighting.js". mtd_dlp_incidents?earliest=0&latest=:676
Uncaught SyntaxError: Unexpected token ; table_row_highlighting.js:38
Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (min-resolution: 144dpi) mvc.js:6
Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) mvc.js:6
Resource interpreted as Image but transferred with MIME type image/x-png: "http://10.215.3.195:8000/en-GB/static/@207789/img/skins/default/loading_medium_green_2x.png".

————————————
If this helps, give a like below.
0 Karma

thambisetty
SplunkTrust
SplunkTrust

and one more thing what ever is appearing on the dashboard it is not showing the color when i generated pdf.

————————————
If this helps, give a like below.
0 Karma

thambisetty
SplunkTrust
SplunkTrust

and one more thing what ever is appearing on the dashboard it is not showing the color when i generated pdf.

————————————
If this helps, give a like below.
0 Karma
Get Updates on the Splunk Community!

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...