Splunk Search

Table results - change color of an entire column

Path Finder

Is there a way to set the font color for one column in a table? For example I have multiple calculated columns for min, max, average, median. I'd like to make the font color blue for the entire column "average".

Thanks!

Splunk Employee
Splunk Employee

I tend to use custom highlighting a lot in my dashboards regardless of whether the value is numeric or not. You can use the following example to highlight any given column(s).

The dashboard xml is as follows -

<dashboard  script="col_colors.js" stylesheet="col_colors.css">
  <label>throwaway</label>
  <row>
    <panel>
      <table id="A">
        <search>
          <query>index=_internal |head 100|table clientip component host group sourcetype</query>
          <earliest>-24h</earliest>
          <latest>now</latest>
        </search>
      </table>
    </panel>
  </row>
</dashboard>

Note that we include our custom col_colors script and stylesheet (without them, no highlighting will happen!). Also notice that we have given the table an id. This allows our JavaScript to identify which tables we want to use the highlighting on.

Now let's take a look at the highlighting code - I'll be notating the code from within

// col_colors.js 
// Bringing in our required resources
require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
    ],
function(_, $, mvc, TableView) {
    // Create some arbitrary table ids to iterate on (these can be any id's you prefer, I am using A for simplicity but you can have as many as you like)
    var tableids = ["A"];
    // Determine how many tables we have
    var tableidlength=tableids.length;
    // List the fields we'll be using to highlight - we could probably get these as a param from the XML but I'm lazy and haven't done that yet
    var fields=["clientip","component","host","group","sourcetype"]
    // Create our highlight function
    var Highlight = TableView.BaseCellRenderer.extend({
    // Set up the Render
            canRender: function(cell) {
                return true;   
            },
            render: function($td, cell) {
                // Retrieve the value of each cell
                var value = cell.value;
                // Many times I use fields that are prefixed with a "_" so the following is a Split that allows me to pull out the prefix if I want (for instance - Activity_In-Person and Activity_Phone would simply be Activity, whereas if a field did not have this prefix, it would simply give the field name
                // Here I am checking the field name of the cell and comparing to the fields array we created above.
                if (fields.indexOf(cell.field.split("_")[0])>=0) {
                // If the cell field exists in our array then add that field name as a class to the cell to be used by our CSS
                   $td.addClass(cell.field.split("_")[0]);
                }
                // Render the cell value back into the cell
                $td.text(value);
            }
      });
    // Iterate over each table in our tableids array, we need to make sure our XML tables include one of these ids for the highlighting to work
    for (var i = 0; i < tableidlength; i++) {
       // If the table exists in the dashboard or form apply the highlights
       if (mvc.Components.get(tableids[i])){
           mvc.Components.get(tableids[i]).getVisualization(function(tableView) {
              tableView.table.addCellRenderer(new Highlight());
              tableView.table.render();
           });
       }
    }
});

We're not finished yet. The javascript code above reads each cell, captures the value, assigns a class and then renders the cell back out with the original value. Now we need to add our stylesheet to do the actual highlighting.

 /* col_colors.css  */
/*
 * #highlight td {
 * background-color: #c1ffc3 !important;
 * }
 * */

td.clientip {
background-color: #DDD9C5 !important;
font-weight: bold;
color: #000000 !important;
}

td.component {
background-color: #EBF1DE !important;
font-weight: bold;
color: #000000 !important;
}

td.host {
background-color: #FDEADA !important;
font-weight: bold;
color: #000000 !important;
}

td.group {
background-color: #E6E0EC !important;
font-weight: bold;
color: #000000 !important;
}

td.sourcetype {
background-color: #DBEEF4 !important;
font-weight: bold;
color: #000000 !important;
}

I've made the text colors bolded black, you can change these to whatever you like. The background-color is actually what highlights the cell. Note that !important is needed or the colors will not override the default table rendered colors.

Great! We have all the files we need. Where do they go? In your app's static directory. For instance if I was using an app called myapp, I would place the col_colors.js and col_colors.css in $SPLUNK_HOME/etc/apps/myapp/appserver/static

In order for this to take effect you will need to run these links in the browser (using the default Splunk location as an example) -
http://localhost:8000/en-US/_bump
http://localhost:8000/en-US/debug/refresh
You may also need to restart Splunkweb - a shortcut to doing this is running ./splunk restartss from your $SPLUNK_HOME$/bin directory. Yes, that is two s's.

0 Karma

Path Finder

Hi Flynt. How to highlight cells of fields which are dynamic. My table looks like below if you select last 3 days from timepicker

Channel 24-Jun-15 23-Jun-15 22-Jun-15 21-Jun-15
BBC Sport 6 3 7 9
Discovery 2 6 4 3

As you can see the fields names here are time dependent. I want to color all cells for fields other than 'Channel' here.
How can I do that? Please help.

0 Karma

Builder

Hi,
hier is the solution to your probleme:
XML file:

<dashboard script="MY.js" stylesheet="My.css">
               <label>colouring_header_of_the_table</label>
               <description/>
               <row>

                 <table id="highlight">

                        <searchString>index=_internal | stats count(sourcetype) as number by source</searchString>
                        <earliestTime>-24h@h</earliestTime>
                        <latestTime>now</latestTime>
                        <option name="wrap">true</option>
                        <option name="rowNumbers">true</option>
                        <option name="dataOverlayMode">none</option>
                        <option name="drilldown">cell</option>
                        <option name="count">10</option>
               </table>
               </row>
    </dashboard>

MY.js file

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {

     // Row celloring Example with custom, client-side range interpretation

    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            // Enable this custom cell renderer for the number field
            return _(['number']).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 === 'number') {
                    $td.addClass('range-cell').addClass('range-severe');

        }

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

     mvc.Components.get('highlight').getVisualization(function(tableView) {
        // Add custom cell renderer
        tableView.table.addCellRenderer(new CustomRangeRenderer());
        tableView.table.render();
    });

});

MY.css file

/* Colum Coloring */

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

Put MY.js and MY.css files in the static directory of the concerne app.

0 Karma
State of Splunk Careers

Access the Splunk Careers Report to see real data that shows how Splunk mastery increases your value and job satisfaction.

Find out what your skills are worth!