Dashboards & Visualizations

How to set color to field in table that greater than field value in other column?

AntonB
Loves-to-Learn Lots

Hi,

I need to color the value in update.version column when this is greater than value in version column
how can I do this?

AntonB_0-1677242187152.png


Thank you

Labels (2)
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@AntonB 

 

You can achieve this by using JS extension.  Try the below code.

<dashboard version="1.1" script="a.js">
  <label>version column</label>
  <row>
    <panel>
      <table id="tknTable">
        <search>
          <query>| makeresults 
| eval title="XYZ", version="3.0.0", updatedversion="3.0.1" 
| eval flag= if(updatedversion &gt; version, "1","0")
| eval updatedversion=updatedversion+"|"+flag
| table title version updatedversion</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</dashboard>

 

require([
  'underscore',
  'jquery',
  'splunkjs/mvc',
  'splunkjs/mvc/tableview',
  'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
        
  var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
          canRender: function(cell) {
                  //console.log("Enable this custom cell renderer for field");
                  return _(["updatedversion"]).contains(cell.field);
          },
          render: function($td, cell) {
            var strCellValue = cell.value.split("|")[0];
            var strFlag = cell.value.split("|")[1];

                  if (cell.field === "updatedversion" && strFlag=="1") {
                    var strHtmlInput="<div style='background-color:DodgerBlue'>"+strCellValue+"</div>";
                  } else {
                    var strHtmlInput="<div>"+strCellValue+"</div>";
                  }
                 $td.append(strHtmlInput);
          }
  });

  mvc.Components.get('tknTable').getVisualization(function(tableView) {
          // Add custom cell renderer, the table will re-render automatically.
          tableView.table.addCellRenderer(new CustomRangeRenderer());
          tableView.table.render();
  });
});

Screenshot 2023-02-28 at 10.22.22 AM.png

 

Note: Change style as per your requirement.

I hope this will help you.

Thanks
KV
If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

 

 

Tags (1)
0 Karma
Get Updates on the Splunk Community!

Data Management Digest – December 2025

Welcome to the December edition of Data Management Digest! As we continue our journey of data innovation, the ...

Index This | What is broken 80% of the time by February?

December 2025 Edition   Hayyy Splunk Education Enthusiasts and the Eternally Curious!    We’re back with this ...

Unlock Faster Time-to-Value on Edge and Ingest Processor with New SPL2 Pipeline ...

Hello Splunk Community,   We're thrilled to share an exciting update that will help you manage your data more ...