How can I create color Tables based on Dynamic Values in Splunk 7?

[robertlynch2020]

Hi

I have the following data

column_A column_B
10              20
15              5
16              100

I want to add logic, if column B > column A the cell goes red if not go green.
I have tried $result.column_B$ > $result.column_B$ in the but no luck

any ideas?
Cheers in advance 🙂

[kamlesh_vaghela]

Hi @robertlynch2020,

Can you please try this?

Change searc hquesry and css as per you requirement.

<dashboard script="summary.js" stylesheet="summary.css">
  <label>Color IN table</label>
  <row>
    <panel>
      <table id="my_table">
        <search>
          <query>| makeresults | eval column_A="10", column_B="20" | append [| makeresults | eval column_A="15", column_B="5" ] | append [| makeresults | eval column_A="16", column_B="200" ]| eval Your_logic="Just Comments" | eval column1=column_A."|".column_B,column2=column_A."|".column_B | table column1 column2</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="count">2</option>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</dashboard>

summary.css

.circle_green { 
padding:10px 9px;
border:0px solid #a1a1a1;
background-color:rgb(7,245,7);
}
.circle_yellow { 
padding:10px 9px;
border:0px solid #a1a1a1;
background-color:rgb(245,245,0);
}
.circle_red { 
padding:10px 9px;
border:0px solid #a1a1a1;
background-color:rgb(245,7,7);
}

summary.js

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

        var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
            canRender: function(cell) {
                return _(['column1','column2']).contains(cell.field);
            },
            render: function($td, cell) {
                var column1=cell.value.split("|")[0];
                var column2=cell.value.split("|")[1];
                var value="";
                if(cell.field=="column1")
                {
                    value=column1;
                }
                else 
                {
                    value=column1;
                }
                if( Number(column2) > Number(column1))
                {
                    $td.html("<div class='circle_red'>"+value+"</div>")
                } else 
                {
                    $td.html("<div class='circle_green'>"+value+"</div>")
                }
            }
        });
        //List of table IDs to add icon
        var tableIDs = ["my_table"];
        for (i=0;i<tableIDs.length;i++) {
            var sh = mvc.Components.get(tableIDs[i]);
            if(typeof(sh)!="undefined") {
                sh.getVisualization(function(tableView) {
                    // Add custom cell renderer and force re-render
                    tableView.table.addCellRenderer(new CustomRangeRenderer());
                    tableView.table.render();
                });
            }
        }    
    });

Thanks

[kamlesh_vaghela]

Hi @robertlynch2020,
Have you tried this ?

[robertlynch2020]

Hi

Thanks for this. I will give it a go next week to see if it works. God moved onto something else this week.

Cheers