Splunk Search

To change the colour of the value in statistics table not the back ground

shruthiangadi
Explorer

Hi ,

I have a statistics table in which each column contains different value for eg:

Application Name Application ID Functional Fitness Digital Fitness
A 123 0.2 0.5
B 456 3 5
C 789 1 1.5

So now i want to change the color of the value (not the background) present in functional fitness and digital fitness based on the range, if the range is from 0 to 0.5 -- green colour, 0.6 to 3 --- red colour, 3.5 to 5 --- yellow colour

So can you please help me in changing the colour of the value present in each column based on the range.

Tags (3)
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@shruthiangadi

You can achieve this using javascript and css. Please check below XML and Javascript.

XML

<form script="status_dashboard.js">
  <label>Table Cell Value Color</label>
  <row>
    <panel>
      <table id="table1">
        <search>
          <query>| makeresults 
| eval _raw="
Application_Name,Application_ID,Functional_Fitness,Digital_Fitness
A,123,0.2,0.5
B,456,3,5
C,789,1,1.5" | multikv forceheader=1 | table Application_Name,Application_ID,Functional_Fitness,Digital_Fitness</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</form>

JavaScript:

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

    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return _(['Functional_Fitness','Digital_Fitness']).contains(cell.field);
        },
        render: function($td, cell) {
            var value = parseFloat(cell.value);
            console.log(value);

            if(value>=0 && value<=0.5) {
                $td.html("<div style=\"color: green;font-weight: bold;\">"+value+"</div>")
            }
            else if(value>0.5 && value<=3.0) { 
                $td.html("<div style=\"color: red;font-weight: bold;\">"+value+"</div>")
            }
            else if(value>3.5 && value<=5.0) { 
                $td.html("<div style=\"color: yellow;font-weight: bold;\">"+value+"</div>")
            }
            else{
                $td.html("<div>"+value+"</div>")
            }
        }
    });

    //List of table IDs to add icon
    var tableIDs = ["table1"];
    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();
            });
        }
    }    
});

alt text
Note: Here I have used inline CSS ( $td.html("<div style=\"color: green;font-weight: bold;\">"+value+"</div>") ) and you can use css class and use it in javaScript. You can change the if condition as per your requirement ( if(value>=0 && value<=0.5) { ). I hope after taking this exampl as reference you will achieve your requirement.

Thanks

View solution in original post

0 Karma

vnravikumar
Champion
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@shruthiangadi

You can achieve this using javascript and css. Please check below XML and Javascript.

XML

<form script="status_dashboard.js">
  <label>Table Cell Value Color</label>
  <row>
    <panel>
      <table id="table1">
        <search>
          <query>| makeresults 
| eval _raw="
Application_Name,Application_ID,Functional_Fitness,Digital_Fitness
A,123,0.2,0.5
B,456,3,5
C,789,1,1.5" | multikv forceheader=1 | table Application_Name,Application_ID,Functional_Fitness,Digital_Fitness</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</form>

JavaScript:

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

    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return _(['Functional_Fitness','Digital_Fitness']).contains(cell.field);
        },
        render: function($td, cell) {
            var value = parseFloat(cell.value);
            console.log(value);

            if(value>=0 && value<=0.5) {
                $td.html("<div style=\"color: green;font-weight: bold;\">"+value+"</div>")
            }
            else if(value>0.5 && value<=3.0) { 
                $td.html("<div style=\"color: red;font-weight: bold;\">"+value+"</div>")
            }
            else if(value>3.5 && value<=5.0) { 
                $td.html("<div style=\"color: yellow;font-weight: bold;\">"+value+"</div>")
            }
            else{
                $td.html("<div>"+value+"</div>")
            }
        }
    });

    //List of table IDs to add icon
    var tableIDs = ["table1"];
    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();
            });
        }
    }    
});

alt text
Note: Here I have used inline CSS ( $td.html("<div style=\"color: green;font-weight: bold;\">"+value+"</div>") ) and you can use css class and use it in javaScript. You can change the if condition as per your requirement ( if(value>=0 && value<=0.5) { ). I hope after taking this exampl as reference you will achieve your requirement.

Thanks

0 Karma

shruthiangadi
Explorer

Hi,

Thank you it worked

0 Karma

niketn
Legend

@kamlesh_vaghela recommended approach would be to add classes through JS and then override color through CSS. So that there is a separation of concern. Your approach applies CSS through JS directly.

As mentioned in the previous answer by @vnravikumar all that is required to change in the Simple XML JS/CSS extension of table is that instead of background-color the color style attribute needs to be overridden through CSS.

Adding a div to each of the table cell rendered and then applying CSS style is an overhead and also does not follow separation of concern.

https://answers.splunk.com/answers/798513/how-to-change-the-colour-of-the-value-based-on-the.html

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

Platform Highlights | November 2022 Newsletter

 November 2022 Skill Up on Splunk with our New Builder Tech Talk SeriesCan you build it? Yes you can! *play ...

Splunk Education - Fast Start Program!

Welcome to Splunk Education! Splunk training programs are designed to enable you to get started quickly and ...

Five Subtly Different Ways of Adding Manual Instrumentation in Java

You can find the code of this example on GitHub here. Please feel free to star the repository to keep in ...