Hello Helical Team,
I am using helical insight EE version 5.0. There are many cells in crosstab which does not have data. I understand that there is color property but it is not affecting the empty cells.
So basically what I want is that if the cells are empty then it should be red color and if it has any values then it should be green color.
Thanks,
Netta.
Hello Netta,
You can create the crosstab report. Then in the “CSS” placeholder you can put the below mentioned code in the “Operations”
td.e-valuescontent
{
background-color: green !important;
}
td.e-valuescontent:has(div:empty)
{
background-color: red !important;
}
NB: this will work on all browsers except for Firefox
For Firefox, this will work, up until version 102
From version 103: this feature is behind the layout.css.has-selector.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. in your browser.
Thank You,
Helical Insight.
Further, in case if you would like to have values based on certain range of colors, then below kind of code can be put in Post Execution. The below code can be changed based on your conditions.
setTimeout(() =>{
const elements = document.querySelectorAll('td.e-valuescontent');
elements.forEach(element => {
if(element.textContent == ''){
element.style.backgroundColor = 'orange';
}
else if(element.textContent >= 0 && element.textContent <= 5000){
element.style.backgroundColor = 'green';
}
else if(element.textContent >= 5001 && element.textContent <= 10000){
element.style.backgroundColor = 'red';
}
else if(element.textContent >= 10001 && element.textContent <= 20000){
element.style.backgroundColor = 'yellow';
}
else{
element.style.backgroundColor = 'blue';
}
});
}, 1000)
Further in case if you want to replace cells which has no data with something else like Zero (0) etc then below code can be used. However note that no data is different from zero. Hence rather than replacing it with 0 better idea would be ‘No Data’ etc
setTimeout(() =>{
const elements = document.querySelectorAll(‘td.e-valuescontent’);
elements.forEach(element => {
if(element.textContent == ‘’){
element.textContent = 0 // this zero will be replaced where ever there is no/blank data
element.style.backgroundColor = ‘orange’;
}
else if(element.textContent >= 0 && element.textContent <= 5000){element.style.backgroundColor = ‘green’;
}
else if(element.textContent >= 5001 && element.textContent <= 10000){element.style.backgroundColor = ‘red’;
}
else if(element.textContent >= 10001 && element.textContent <= 20000){element.style.backgroundColor = ‘yellow’;
}
else{element.style.backgroundColor = ‘blue’;
}
});}, 1000)