From the contributor
How to use this sample
Summary
This sample demonstrates displaying a linear gauge from a regular string set to the split operator.
View requirements
- This format can be applied to a Number column.
How to apply this sample
This sample needs modification for your specific use. Two changes are required.
Step 1: Set the min and max values
Find the split operator on line 31 of the JSON.
Adjust the min and max values to match your desired range.
"forEach": "_overallRange in split('min:MIN_VALUE,max:MAX_VALUE','^')", # Example 1 "forEach": "_overallRange in split('min:0,max:100','^')", # Example 2 "forEach": "_overallRange in split('min:-150,max:250','^')", # Example 3 "forEach": "_overallRange in split('min:0,max:1','^')",
Step 2: Set numerical range, background color, and range name
Find the split operator on line 50 of the JSON.
Adjust the numerical range, background color, and range name for each range according to your use case. Use a comma-separated format.
"forEach": "_range in split('RANGE_MIN[<= or <]n[<= or <]RANGE_MAX:BACKGROUND_COLOR:RANGE_NAME',',')", # Example 1 "forEach": "_range in split('0<=n<30:#9ED9D2:C,30<=n<80:#F7D358:B,80<=n<=100:#F4A7B9:A',',')", # Example 2 "forEach": "_range in split('-99999<=n<0:#c190f0:D,0<=n<100:#9ED9D2:C,100<=n<200:#F7D358:B,200<=n<=99999:#F4A7B9:A',',')", # Example 3 "forEach": "_range in split('0<=n<0.4:#9ED9D2:C,0.4<=n<0.8:#F7D358:B,0.8<=n<=1:#F4A7B9:A',',')",RANGE_MIN[<= or <]n[<= or <]RANGE_MAX: Specifies the range of values for each segment of the linear gauge.
- Example:
0<=n<30,0<n<=30,0<=n<=30,0<n<30
- Example:
BACKGROUND_COLOR: Defines the background color for the respective range.
- Example:
#9ED9D2,Blue
- Example:
RANGE_NAME: Set the text to be displayed in the range.
- Example:
A,Range_B,Great
- Example:
[!NOTE]
- Expressions such as
n>=20or20<nare not acceptable for numeric ranges. Please strictly adhere to the specified formatRANGE_MIN[<= or <]n[<= or <]RANGE_MAX.- The value range can exceed the linear gauge's min and max.
- Make sure that the values do not overlap between ranges.
- Avoid single-byte spaces in the string to prevent errors. For single-byte spaces in range names, use an underscore (_) instead. The underscore (_) will be converted to half-width spaces when displayed. (Related link: #642)
- Do not use
<,:,=, and,in range names.- When configuring percentage values, ensure that they are set as decimals. For example, if you want to represent 50%, set the value as
0.5instead of50.
Range setting examples:
Using HTML color code:
80<=n<=100:#F4A7B9:AUsing HTML color name:
30<=n<80:Yellow:BRange name not set:
50<=n<60:#00FF00:Using an underscore (_) instead of single-byte spaces in the range name:
90<=n<=100:#FFD700:Range_D
Sample
| Solution | Author(s) |
|---|---|
| number-linear-gauge.json | Tetsuya Kawahara |
Version history
| Version | Date | Comments |
|---|---|---|
| 1.0 | December 1, 2023 | Initial release |
Disclaimer
THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
Additional notes
About the size of the linear gauge
The linear gauge adjusts based on the column width.
About formulas in JSON
The style properties of each range are set to the following values:
| Style | Value |
|---|---|
| display |
|
| width |
|
| max-width |
|
| left |
|
The characters used in the above formula and their meanings are as follows:
| Character | Meaning | Formula in JSON |
|---|---|---|
| $$G_{max}$$ | Max value of linear gauge | Number(substring([$_overallRange],indexOf([$_overallRange],'max:')+4,indexOf([$_overallRange]+'^','^'))) |
| $$G_{min}$$ | Min value of linear gauge | Number(substring([$_overallRange],indexOf([$_overallRange],'min:')+4,indexOf([$_overallRange],','))) |
| $$R_{max}$$ | Max value of each range | Number(replaceAll(substring([$_range],lastIndexOf([$_range],'<')+1,indexOf([$_range],':')),'=','')) |
| $$R_{min}$$ | Min value of each range | Number(substring([$_range],0,indexOf([$_range],'<'))) |