Splunk Search

How to set different colors for each row of my results in dashboard panel?

splunker9999
Path Finder

Hi,

Can someone please advise, how we can set different colors in a dashboard for each single row?

Our data looks like below, and for each and every row, we need to set up different colors

Data    average
EV    4477.12
PS    2223.47
PL    2098.59
PU    1012.99
PS    714.4
VP    193.99
HP    110.12
UP    93.26

Thanks.

Tags (1)
0 Karma

gyslainlatsa
Motivator

hi splunker9999,

try with this example,

create view 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>

next copy and paste table.jsand table.css into splunk_home/etc/apps/app_name/appserver/static
after your finish, restart SPLUNK
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;
 }

at finish, you have this result

![alt text][1]

for more informations, follow this link:

https://answers.splunk.com/answers/357989/how-to-color-a-table-row-based-on-a-cells-value.html#answe...

0 Karma

splunker9999
Path Finder

Hi,

Based on above example we understood that this can be used when we have range of values for every cell.

BUt our scenario is , we dont need any range for every cell, instead we are looking for different colors for each value in the cell.

Is there a way to do this?

Thanks

0 Karma

gyslainlatsa
Motivator

Hi,
your table has how many values?

because if your table has multiple values, then how will you proceed if these values do not relate to each other?

0 Karma
Get Updates on the Splunk Community!

Synthetic Monitoring: Not your Grandma’s Polyester! Tech Talk: DevOps Edition

Register today and join TekStream on Tuesday, February 28 at 11am PT/2pm ET for a demonstration of Splunk ...

Instrumenting Java Websocket Messaging

Instrumenting Java Websocket MessagingThis article is a code-based discussion of passing OpenTelemetry trace ...

Announcing General Availability of Splunk Incident Intelligence!

Digital transformation is real! Across industries, companies big and small are going through rapid digital ...