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

[splunker9999]

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.

[gyslainlatsa]

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

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

[splunker9999]

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

[gyslainlatsa]

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?