In a Spotfire Text area I have calculated values set in a table that tracks a monthly score.
These are custom calculations.
the first row has the goals
The second row has actual scores.
Both goals and actuals are roll up of multiple different depts that contribute both to the score and the goal that I need to be able to drill down and make a report off of.
I am looking for a way for the actuals to dynamically change color in comparison to the goals.
| Month | Jan | Feb |
|---|---|---|
| Goal | 25.22 | 75.78 |
| Score | 66.12 | 30.87 |
in this example. The score for Jan should be red and the score for Feb would be green.
The Spotfire calculated values do not allow for dynamic colors that do not compare it to itself.
I have tried assigning the calculated values in HTML and Referencing them as variables.
I have tried an if statement with duplicates of the value. One in Red and one in green to show up if a third had a difference greater than zero.
have also tried assigning the caluclated values to javascript and having them returned recolored. but I cannot get it to reference or return
<!DOCTYPE html>
<html>
<head>
<style>
.value {
font-size: 24px;
font-weight: bold;
}
.red {
color: red;
}
.green {
color: green;
}
.black {
color: black;
}
</style>
</head>
<body>
<div id="value1" class="value" hidden><spotfireControl id="12345"></spotfireControl></div>
<div id="value2" class="value" hidden><spotfireControl id="67890"></spotfireControl></div>
<script>
function updateValues() {
// Fetch Spotfire values from controls
var value1 = parseFloat(document.querySelector('[spotfireControl][id="12345"]').innerText)|| 0;
var value2 = parseFloat(document.querySelector('[spotfireControl][id="67890"]').innerText)|| 0;
var value1Element = document.getElementById('value1');
var value2Element = document.getElementById('value2');
// Function to update color based on the value comparison
function updateColor(element, value) {
if (isNaN(value) || value === '') {
element.className = 'value black';
} else if (value > 0) {
element.className = 'value green';
} else if (value < 0) {
element.className = 'value red';
}
}
// Update both values
updateColor(value1Element, value1);
updateColor(value2Element, value2);
}
// Run the function to update values and colors
updateValues();
</script>
</body>
</html>
Danton Campbell is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.