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!

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 ...

Splunk MCP & Agentic AI: Machine Data Without Limits

Discover how the Splunk Model Context Protocol (MCP) Server can revolutionize the way your organization uses ...