To improve the visualization of data within table widgets, different cell shading can be applied based on the data value. For example, cells with values above 50 could be shaded red and cells with values below 50 in green. This is achieved using settings located in the Settings tab under the Colors & Highlights heading.
Cell color rules
A set of space-delimited rules where each rule has the form <test>(<value>, <style-if-match>, <style-if-not-match>?,<indicator-key>?), for example lessthan(100, #ccffcc, #ffaaaa).
<test> can be simple and apply to either text or numeric values – one of:
equalsnotequal
or <test> can be mathematical:
greaterthangreaterthanorequallessthanlessthanorequal
(Advanced users can use the shorter mathematical symbols (==, !=, >, >=, <, <=) instead of the keywords above but this does make your rules harder to read!)
Or <test> can be a list or text-based comparator:
containsdoesnotcontaininnotin
<value> is the value to test against – either a simple value (number or text), for example 99, or a dynamic value from the same dataset using the syntax #VALUE{<feature-id>} (see examples below).
<style-> is either of form:
<color>;<font-weight>;<font-style>;<font-size>
or
class:<css-class-name>
The class:<css-class-name> syntax gives more control over the final output but is more complex and requires the use of advanced styling.
<style-if-match> is required and is the style that will be applied when the value in a given table cell matches or “passes” the test.
<style-if-not-match> is optional and is the style that will be applied when the value in a given table cell does not match or “fails” the test. If it is not specified no extra styling will be applied to the cell.
<indicator-key> is optional and restricts the rule to cells that contain values for the given indicator ID (you can get this ID from the metadata in the data tab). If it is not specified the rule will be evaluated for every table cell/value. Note – to use <indicator-key> without a <style-if-not-match> use two commas in the rule, for example greaterthan(90, #ffaaaa,, I2776).
Cell rules color style
This can be background or text. If text, then the above color rules will apply to text color. If background, the background of the cell will be shaded instead.
Examples
To shade cells red where the percentage of benefit claimants is above 50 can be achieved by giving Cell color rules a value of greaterthan(50, #ff0000). Note that there are many web pages that list color codes, such as http://www.w3schools.com/colors/colors_picker.asp.
This is the resulting table.
To display cells that have values above 50 shaded red and those with values equal to or less than 50 shaded green, the setting rule would be greaterthan(50 #ff0000,#00ff00).
To assign more than two colours e.g. cells with values above 50 shaded red, cells with values between 50 and 20 amber and those with values equal to or less than 20 shaded green, the setting rule would be greaterthan(50, #ff0000) lessthanorequal(20, #00ff00) lessthan(50, #ffbf00).
Please note that the order of the rules is important. The string is read from left to right and as soon as the table widget finds a rule that is true, it applies the respective style and then ignores all further rules. So giving the Rule a value of greaterthan(50, #ff0000) lessthanorequal(50, #ffbf00) lessthanorequal(20, #00ff00) will not shade any cells green.
To shade the values rather than the cells, change the Cell rules color style to text. The table widget below is using a Cell color rules value of greaterthan(50, #ff0000) lessthanorequal(50, #00ff00).
To display values above 50 as red, bold, italic and 1.2 times the base font size and those equal to or less than 50 to be green and bold give the Cell color rules a value of greaterthan(50, #ff0000;bold;italic;1.2em) lessthanorequal(50, #00ff00;bold).
Note that 1em is equal to the current font size. 2em means 2 times the size of the current font. The ’em’ is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses.
Comparison to other feature values
Rules can use dynamic values in tests – an obvious example is to compare cell values with a comparison feature’s value e.g. comparing values with that of another region:
greaterthan(#VALUE{C:E0200001}, #ffcccc, #ccffcc)
Note: the ID (E0200001) is obtained from the data table in ArcGIS Online.
The above rule will shade cells red if the cell value is greater than the value for the comparison feature with ID E0200001 and green if not. The syntax is similar to text widget variables but only acts on the current indicator.
As well as comparing cells to other feature values, cells can be compared to the currently selected feature:
greaterthan(#FVALUE, #ffcccc)
This will turn cells red whose value is greater than the value for the currently selected feature.