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

[shruthiangadi]

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.

[vnravikumar]

Hi

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.

[kamlesh_vaghela · Accepted solution]

@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

[shruthiangadi]

Hi,

Thank you it worked

[niketn]

@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