Spotfire HTML changing background colour based on dynamic value

Question

I am trying to get JQuery to color boxes in an HTML table based on the value inside the box which is a calculated value in Spotfire.

I saw an answer to another question on here where Ashok Podugu used this code:

function refreshWidth() {

$('#table_id td.y_n').each(function(){
    if ($(this).text() == 'N') {
        $(this).css('background-color','#f00');
    }
    else if ($(this).text() == 'Y') {
        $(this).css('background-color','green');
    }
});
}


//MutationObserver to refresh when needed. Works better than running every second as that causes issues with exporting in newer versions of Spotfire
var target = document.getElementById('watcher');
var observer = new MutationObserver(refreshWidth);
var config = { attributes: true, childList: true, characterData: true, subtree: true};
observer.observe(target, config);
<div id="watcher">

<table id="table_id">
 <tr><th>Question</th><th>Y/N?</th></tr>
 <tr><td>I am me.</td><td class="y_n"><SpotfireControl id="2bb8174ce9a8465a84be2ef7c0eb2797" /></td></tr>
 <tr><td>I am him.</td><td class="y_n"><SpotfireControl id="9ef686aa45d847ee98fafb94c7dfe880" /></td></tr>
 <tr><td>I am not sure.</td><td class="y_n"><SpotfireControl id="e8ceaec4965c480587bbf352e46e7d2a" /></td></tr>
 <tr><td>This is a table.</td><td class="y_n"><SpotfireControl id="67b9c407bef24eb888ece4875b5807c2" /></td></tr>

</table>

</div>

Now that is exactly what I need to do but I am dealing with Numbers not text and need it to check variables.

My code is this:

function RefreshColor() {

$('td.SCOValue').each(function(){
    if ($(this).text() <= "0.1%") {
        $(this).css('background-color','#5DADE2');
    }
    else if ($(this).text() <= "0.15%") {
        $(this).css('background-color','#52BE80 ');
    }
    else if ($(this).text() <= "0.3%") {
        $(this).css('background-color','#F5B041 ');
    }
    else if ($(this).text() <= "100%") {
        $(this).css('background-color','#EC7063');
    }
});
}

var target = document.getElementById('watcher');
var observer = new MutationObserver(Refreshcolor);
var config = { attributes: true, childList: true, characterData: true, subtree: true};
observer.observe(target, config);

So any Table TD with a class of SCOValue should be affected, which it is but sometimes with strange results.

Is this the correct way to deal with numbers or Percentages or is there a better way of doing it?

Your issue is *likely* to do with the lines like `$(this).text() <= "0.1%"` which does a *text comparison*, for example sorted numbers would be `"1", "15", "2"`. You need to convert `$(this).text()` to a number and compare with `0.1` (not `"0.1"`) — freedomn-m, Feb 22 '22 at 15:57
[This answer](https://stackoverflow.com/a/1133814/2181514) provides various ways to convert to a number (hint: don't convert to an *integer* if you want decimal comparisons...) — freedomn-m, Feb 22 '22 at 15:59
`if ($(this).text() <= "0.1%") {` -> `if (+$(this).text() <= 0.1) {` (note the extra `+`) — freedomn-m, Feb 22 '22 at 16:00

Spotfire HTML changing background colour based on dynamic value

0 Answers0