Splunk Search
Highlighted

How to color a table cell whose column name is dynamic

Path Finder

I want to color cells of a column name which is in dynamic _time format. Below is my format if we select last 3 days from timepicker.

Channel 22-Jun-15 21-Jun-15 20-Jun-15 19-Jun-15
BBC Sport 6 3 7 9
Discovery 2 6 4 3

I want to color all the dynamic _time column cells based on the numbers that cell contains. In Splunk Dashboard Examples 6.x, the method is mentioned only for a static column name.

Can it be done if the column name is dynamic. Please help.

Highlighted

Re: How to color a table cell whose column name is dynamic

You can do it using splunk/etc/apps/MyApplication/appserver/static/application.js...

if(Splunk.util.getCurrentView() == "yourViewName" && Splunk.Module.SimpleResultsTable){
    Splunk.Module.SimpleResultsTable = $.klass(Splunk.Module.SimpleResultsTable, {
        onResultsRendered: function() {
            var container = this.container;
            .
            .
            . **Select and color your element using jQuery**
            .
            .
            .
        }
    });
}

Above example is to customize SimpleResultsTable....
*container is the parent div element of your table view

0 Karma
Highlighted

Re: How to color a table cell whose column name is dynamic

Path Finder

Hi paramagurukarthikeyan. Appreciate you answer but couldn't understand the entire part. It would be great if you could explain me a bit more and tell me what exactly will be my return field.

ex -

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
histsearches and the activerealtimesearches field
return _(['active
histsearches', 'activerealtimesearches']).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 === 'active
histsearches') {
if (value > 2) {
$td.addClass('range-cell').addClass('range-severe');
}
else if (value > 1) {
$td.addClass('range-cell').addClass('range-elevated');
}
else if (value > 0) {
$td.addClass('range-cell').addClass('range-low');
}
}
// Apply interpretation for number of realtime searches
if (cell.field === 'active
realtime_searches') {
if (value > 1) {
$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.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).addClass(this.className);
// });
//});
// Force the table to re-render
tableView.table.render();
});
});

In the above example, the return fields are 'activehistsearches' & 'activerealtimesearches'. Smilarly for my case as its a dynamic _time field, what should i write inside return[]?

0 Karma
Highlighted

Re: How to color a table cell whose column name is dynamic

I guess you will the same column number even if you have different field name..
If that is right...... Then you can get the column position and decide your color...

$td.parent().children().index($td[0]) == coloumnPos

  1. Get the parent Element (i.e )
  2. get the list of childrens (i.e. ss)
  3. find the position of the current td and compare it with your column position and do the rest with coloring....

Note : coloumn count starts from Zero ...i.e zero for 1st column

0 Karma
Highlighted

Re: How to color a table cell whose column name is dynamic

Path Finder

Hi paramagurukarthikeyan. If you could just give one example to demonstrate the solution you suggested, it would be great.

0 Karma
Highlighted

Re: How to color a table cell whose column name is dynamic

Path Finder

Below is my query :

sourcetype=shmapplogs "getMS3SAS ended for - deviceId" | bucket span=1d time | stats count by _time channelId | sort count desc | lookup youviewchannels.csv serviceidtruncated AS channelId OUTPUT channelnameletter | streamstats count AS position by time | fields channelnameletter position _time | convert timeformat="%d-%b-%Y" ctime(time) As Time | chart max(position) over channelnameletter by Time

I want to color the cells belong to 'Time' field.

0 Karma
Highlighted

Re: How to color a table cell whose column name is dynamic

Instead, can you Please show me your results screen shot.....

0 Karma
Highlighted

Re: How to color a table cell whose column name is dynamic

Path Finder

i cannot post screenshots here. But in my question itself i have specified the format of my results. Please have a look.

0 Karma
Highlighted

Re: How to color a table cell whose column name is dynamic

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 (['active_hist_searches', 'active_realtime_searches']).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
            var tdPosition = $td.parent().children().index($td[0]);
            //To customize First Column based on its value
            if (tdPosition == 0) {
                if (value > 2) {
                    $td.addClass('range-cell').addClass('range-severe');
                } else if (value > 1) {
                    $td.addClass('range-cell').addClass('range-elevated');
                } else if (value > 0) {
                    $td.addClass('range-cell').addClass('range-low');
                }
            }
            // Apply interpretation for number of realtime searches
            //To customize Second Column based on its value
            if (tdPosition == 1) {
                if (value > 1) {
                    $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.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).addClass(this.className);
        // });
        //});
        // Force the table to re-render
        tableView.table.render();
    });
});
0 Karma
Highlighted

Re: How to color a table cell whose column name is dynamic

Path Finder

can i use below to give same condition for all the columns after 1st column.

if (tdPosition > 0) {
if (value > 2) {
$td.addClass('range-cell').addClass('range-severe');
} else if (value > 1) {
$td.addClass('range-cell').addClass('range-elevated');
} else if (value > 0) {
$td.addClass('range-cell').addClass('range-low');
}
}

Also do i need return field if i use tdposition?

0 Karma