UPCOMING WEBINAR: The complete guide to analyzing NPS This article describes how to modify table cells by adding cell text, cell color, and blanking cells.
Requirements
Please note these steps require a Displayr license.
- A table with a Rule applied.
- This article assumes you are already in the New custom rule (write your own JavaScript) > Edit JavaScript view specified in How to Create a Custom Rule.
- You have read How to Access Statistics from a Table in a Rule.
Method
For each of the below methods, we will use the same basic condition: When the percentages are less than 10, perform this change. The examples include:
- Appending an asterisk next to the first statistic in the cell.
- Changing the color of the cell to red.
- Blanking the contents of the cell.
- Changing the font color of the cell to red.
We begin by setting the target and extracting the primary statistic values from the table:
// Set target
var min = 10;
// Get the values for the first statistic shown on the table.
var values = table.get(table.statistics[0]);
Changing or adding cell text
In order to change the cell text property, we need to first return its contents as an array so we can update it:
var cell_texts = table.cellText;
Next, we loop through each row and column, return the current value for that cell, and insert an asterisk as an array into our declared cell_texts variable:
// Loop through each cell...
for (var row = 0; row < table.numberRows; row++) {
for (var column = 0; column < table.numberColumns; column++) {
var value = values[row][column];
if (value < min) {
cell_texts[row][column] = ['*'];
}
}
}
Finally, we pass the updated cell text array back to the table:
table.cellText = cell_texts;
Adding cell color
In order to change the cell color property, we need to first return its contents as an array so we can update it:
var cell_colors = table.cellColors;
We then need to set the color using either the HTML color hex value or the RGB color value:
var color = "#FF0000";
var color = [255, 0, 0];
See JavaScript Color Table for examples.
Next, we loop through each row and column, return the current value for that cell, and set the color in our declared cell_colors variable:
// Loop through each cell...
for (var row = 0; row < table.numberRows; row++) {
for (var column = 0; column < table.numberColumns; column++) {
var value = values[row][column];
if (value < min) {
cell_colors[row][column] = color;
}
}
}
Finally, we pass the updated cell color array back to the table:
table.cellColors = cell_colors;
Blanking cells
Unlike the previous examples, this example doesn't require any further cell declarations or table settings.
We loop through each row and column, return the current value for that cell, and use the table.blankCell function to remove its contents:
// Loop through each cell...
for (var row = 0; row < table.numberRows; row++) {
for (var column = 0; column < table.numberColumns; column++) {
var value = values[row][column];
if (value < min) {
table.blankCell(row, column);
}
}
}
Adding font color
Font color in Displayr is reserved for significance testing but can be overwritten by rules. Importantly, this method requires Appearance > Significance on the table to be set to Font colors and a statistic that would otherwise show significance, i.e. any % statistic but not sample ones.
In order to change the cell font property, we need to first return its contents as an array so we can update it:
var font_colors = table.cellFontColors;
As we are overwriting the significance testing, we need to also return an array of cell significance:
var cell_significances = table.cellSignificance;
We then need to set the color again using either the HTML color hex value or the RGB color value:
var color = "#FF0000";
Next, we loop through each row and column, return the current value for that cell, and set the font color in our declared font_colors variable. Additionally, we need to turn cell significance on when we apply the font color and turn it off when we do not:
// Loop through each cell...
for (var row = 0; row < table.numberRows; row++) {
for (var column = 0; column < table.numberColumns; column++) {
var value = values[row][column];
if (value < min) {
cell_significances[row][column] = true;
font_colors[row][column] = color;
} else {
cell_significances[row][column] = false;
}
}
}
Finally, we pass the updated cell significance and font color arrays back to the table:
table.cellSignificance = cell_significances;
table.cellFontColors = font_colors;
Next
How to Create User Input Fields in a Rule
See Also
How to Add Text to Table Cells with Large Numbers
How to Change the Color of Table Cells with Small Sample Sizes
How to Blank Table Cells with Small Values