topic Dashboard format: color a cell of a column (with no value) regarding the value of a cell of another column in Dashboards & Visualizations

Dashboard format: color a cell of a column (with no value) regarding the value of a cell of another column

jaimelopez — Sat, 14 Mar 2020 12:36:50 GMT

Hi all,
I would like to have a dashboard with these 3 columns;
1. Name of the "Country"
2. "Status" column, which will not have any value but cells will have fill color according of the value of "Info" column
a) If Info column has "Batch has been executed with data" >> Fill color of the cell will be Green
b) If Info column has "Batch has been executed with no data" >>Fill color of the cell will be Yellow
c) If Info column has "Batch has not been executed" >> Fill color of the cell will be Red
3. "Info" column with three possibles values as describe above

Column 1 and 3 are not a problem as they come from the data. But I am facing issues with the configuration of Status column.
I did some research in "Splunk answers" space and there are similar cases that propose using javascript and css file. I tried to adapt those codes but as I am not an expert on .js and .css i did not succeed.

I would really appreciate if someone can write the code of .js and .css for me.

Thanks in advance for helping me, I did mi best but it was not possible. I don't really know if it could be possible at the end o I have other ways

Re: Dashboard format: color a cell of a column (with no value) regarding the value of a cell of another column

manjunathmeti — Sat, 14 Mar 2020 16:42:31 GMT

hi @jaimelopez,

Try this:
color_cells.xml

<dashboard script="customize_js.js" stylesheet="customize_css.css">
  <label>Color cells</label>
  <row>
    <panel>
      <table id="customize_table">
        <search>
          <query>| makeresults 
| eval _raw="Country, Info
USA,Batch has been executed with data
India,Batch has been executed with no data
UK,Batch has not been executed" 
| multikv forceheader=1 
| eval Status=case(Info=="Batch has been executed with data", "green", Info=="Batch has been executed with no data", "yellow", 1==1, "red") 
| table Country, Status, Info
          </query>
          <earliest>-d</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</dashboard>

js code:
customize_js.js

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

    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender : function(cell) {
            /* Only use the cell renderer for the Status field */
            return cell.field == 'Status';
        },
        render : function($td, cell) {
            var value = cell.value;
            if (value == 'green') {
                $td.addClass('css_green');
            }
            if (value == 'yellow') {
                $td.addClass('css_yellow');
            }
            if (value == 'red') {
                $td.addClass('css_red');
            }
            /* Set 'Status' value to '' */
            $td.text('');
        }
    });

    var table_component = mvc.Components.get("customize_table");
    table_component.getVisualization(function(tableView) {
        /* Register custom cell renderer, the table will re-render automatically */
        tableView.table.addCellRenderer(new CustomRangeRenderer());
        tableView.table.render();
    });
});

css code:
customize_css.css

/* Row Coloring */
td.css_green {
    background-color: #008000 !important;
}

td.css_yellow {
    background-color: #FFFF00 !important;
}

td.css_red {
    background-color: #FF0000 !important;
}

Re: Dashboard format: color a cell of a column (with no value) regarding the value of a cell of another column

jaimelopez — Sun, 15 Mar 2020 12:22:10 GMT

Hi @manjunathmeti,
It works 🙂
Many thanks

Re: Dashboard format: color a cell of a column (with no value) regarding the value of a cell of another column

harish_ka — Fri, 19 Jun 2020 09:38:30 GMT

Hi @manjunathmeti,

Can you please help me with the javascript if i want to apply this for multiple columns.

Lets say, i have two columns Status & Old_status. I have to fill colours on both columns based on the value of cell.

Thanks in advance.

Re: Dashboard format: color a cell of a column (with no value) regarding the value of a cell of another column

niketn — Mon, 22 Jun 2020 18:10:31 GMT

@harish_ka You can refer to one of my older answers to apply table cell color based on one field for multiple other fields (The example colors the entire row by applying color to all fields, but you can restrict to specific fields you want to color).

PS: The answer does not require Simple JS Extension 🙂

https://community.splunk.com/t5/Dashboards-Visualizations/How-to-change-font-color-based-on-a-condition-for-a-particular/td-p/487257

Please try out and confirm and do up vote the answer if it works!