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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

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 ...