topic Re: To change the colour of the value in statistics table not the back ground in Splunk Search

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

shruthiangadi — Mon, 03 Feb 2020 07:56:15 GMT

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.

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

kamlesh_vaghela — Mon, 03 Feb 2020 15:13:56 GMT

@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();
            });
        }
    }    
});

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

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

vnravikumar — Tue, 04 Feb 2020 03:50:28 GMT

It looks duplicate questions of

https://answers.splunk.com/answers/799479/how-to-change-colors-in-a-table.html and
https://answers.splunk.com/answers/798513/how-to-change-the-colour-of-the-value-based-on-the.html Please don't post same question multiple times.

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

shruthiangadi — Thu, 06 Feb 2020 06:12:40 GMT

Hi,

Thank you it worked

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

niketn — Thu, 06 Feb 2020 06:24:57 GMT

@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