Specifying cosmetics settings for gauges
When using the “Specify Gauge Settings” dialog box to create and configure gauges, these settings are all made on the “Cosmetics” tab. This tab includes these groups for different types of data settings:
- Number Formatting
- Cosmetics
- Padding & Margins
- Gradient
- Bulb
- Font
When modifying a gauge by script, use the GaugeSetProperty method or the GaugeGetProperty method to make these settings. Use the GaugeProperty enumeration.
Number Formatting group
This table lists the settings you can make in the “Number Formatting ”group box of the “Cosmetics” tab. GaugeSetProperty and GaugeGetProperty property names are also listed. These settings apply only to number values. Unless otherwise stated, they apply to all number values displayed on the gauge.
Cosmetics tab Fields / Options | Property name | Description / Comments |
---|---|---|
Default Number Scale | DefaultNumberScale | Specify the
unit that should be interpreted as the default value for any numbers.
For example, if the numbers to be formatted represent the number of seconds in a time sequence, then you would specify “seconds” in this field. |
Number Scale Unit | NumberScaleUnit | Specify the
units of conversion to be used when converting numbers from lesser units to
greater units. Specify units using a comma-separated list.
For example, to change the way numbers are displayed based on their values, you can specify a Thousands to Millions to Billions conversion sequence. To do this, you would specify “K, M, B” in this field. To make time conversions (minutes to hours to days to weeks, for example), you would specify “Min, Hr, Day, Wk” in this field. This specification must be used in conjunction with the “Number Scale Value” specification. 注意:The default number scale unit used is
thousands to millions (“K, M”).
|
Number Scale Value | NumberScaleValue | Specify the
conversion ratio to use from one unit to the next unit. You must have one value
here for each unit specified in the
“Number Scale Unit”
field. Specify these values using a comma-separated list.
For example, to convert from thousands to millions to billions, you would specify “1000, 1000, 1000” in this field. To convert from the default of seconds to minutes to hours to days to weeks, you specify “60, 60, 24, 7” in this field. This specification must be used in conjunction with the “Number Scale Unit” specification. 注意:The default number scale value used is
thousands to millions (“1000, 1000”).
|
Decimal Separator | DecimalSeparator | Specify the
character to be used as the decimal separator in numbers.
For example, in some countries, a period (which is the system default) is used to separate whole numbers from decimal parts. In other countries, a comma is used for this purpose. In this latter case, you would specify a comma (“,”) in this field. |
Thousand Separator | ThousandSeparator | Specify the
character to be used as the thousands separator in numbers.
For example, in some countries, a comma (which is the system default) is used to separate whole numbers with more than three digits with commas every three digits. In other countries, a period is used for this purpose. In this latter case, you would specify a period (“.”) in this field. |
Thousand Separator Position | ThousandSeparatorPosition | Specify the
number of digits after which the thousand separator character should be placed.
You can use multiple values, separated by commas.
For example, if you were to specify “2,3” in this field, a number with nine digits would be formatted with a comma between the second and third digit from the right, and every third digit after that. If the number to be formatted were 123456789, it would be formatted as 1,234,567,89. |
Format Number | FormatNumber | When selected
(default), this option specifies that numbers are to be formatted with commas
(Thousand Separators).
Otherwise, numbers are displayed without separators. |
Force Decimals | ForceDecimals | When selected,
this option specifies that all numbers on the gauge should display with the
designated number of decimal places, even if only some or no decimal places are
needed. This option adds zeroes, if necessary, to ensure that the designated
number of decimal places display.
Otherwise, all numbers display with only the number of decimal places required. |
Format Number Scale | FormatNumberScale | When selected
(default), this option specifies that numbers are to be displayed with a
trailing
“K” (for thousands) or
an
“M” (for millions)
after being truncated and rounded.
Otherwise, numbers are not truncated and rounded. |
Cosmetics group
This table lists the settings you can make in the “Cosmetics ”group box of the “Cosmetics” tab. GaugeSetProperty and GaugeGetProperty property names are also listed. These settings apply to the gauge component (the area surrounding the gauge image itself).
Cosmetics tab Fields / Options | Property name | Description / Comments |
---|---|---|
Back Color | BgColor | Specify the RGB
value for the background color, as a hexadecimal value (000000-FFFFFF).
You can double-click to display the “Color” dialog box, where you can select a color or define a custom color for the background (fill). The hexadecimal code displays after you click “” to exit the “Color” dialog box. To use a gradient fill, specify all the colors required for the gradient fill, separated by commas. |
Back Alpha | BgAlpha | For each
background color you specified, specify the transparency of the background,
from 0 (transparent) to 100 (opaque).
Separate multiple alpha values with commas. |
Back Ratio | BgRatio | Specify the
ratio of each color in the gradient on a scale of 100. The total of the ratios
must equal 100.
For example, to plot an equidistant gradient for two colors, specify the ratio as “50,50”. |
Back Angle | BgAngle | Specify the angle for the gradient fill, in degrees, from “0” to “360”. |
Show Border | ShowBorder | When selected, this option displays a border around the outside of the gauge component area (not the gauge image itself). |
Border Color | BorderColor | Specify the RGB
value for the border color, as a hexadecimal value (000000-FFFFFF).
You can double-click to display the “Color” dialog box, where you can select a color or define a custom color for the border. The hexadecimal code displays after you click “” to exit the “Color” dialog box. |
Border Thickness | BorderThickness | Specify, in pixels, the thickness of the border. |
Border Alpha | BorderAlpha | Specify the transparency of the border, from “0” (transparent) to “100” (opaque). |
Padding & Margins group
This table lists the settings you can make in the “Padding & Margins ”group box of the “Cosmetics” tab. GaugeSetProperty and GaugeGetProperty property names are also listed.
Cosmetics tab Fields / Options | Property name | Description / Comments |
---|---|---|
Left Margin
Right Margin Top Margin Bottom Margin |
ChartLeftMargin
ChartRightMargin ChartTopMargin ChartBottomMargin |
Specify, in
pixels, the thickness of any margins around the gauge component.
Margins refer to the spaces around the outside the actual gauge display, used to separate the gauge from surrounding material. Each of the margins-left, right, top, and bottom - must be set individually. Use these options to override the default spaces with higher values. This attribute can be helpful when you have multiple gauges and you want all of them to align with each other. |
Value Padding | ValuePadding | Specify, in
pixels, the thickness of any padding.
Padding refers to the amount of space between the value text and the edge of the data plot in which the value is displayed. |
Gradient group
The Gradient group settings can be used to provide a more attractive or 3D appearance to angular and linear gauge types.
This table lists the settings you can make in the “Gradient ”group box of the “Cosmetics” tab. GaugeSetProperty and GaugeGetProperty property names are also listed.
Cosmetics tab Fields / Options | Property name | Description / Comments |
---|---|---|
Gauge Fill Mix | GaugeFillMix | Specify a
gradient mix formula for the gauge. The formula can include any combination of
these values, using a list separated by commas:
|
Gauge Fill Ratio | GaugeFillRatio | Specify a
gradient fill ratio for the gauge.
The ratio determines how far a color spreads before it is mixed with the next color to form a gradient. Separate the ratios by commas, for example: 60,20,20. The sum of the ratio values should equal 100, and the number of ratios in the list should equal the number of colors you specify in the “Gauge Fill Mix” field. The system maps each ratio to the corresponding color in the mix. |
Bulb group
The “Bulb” group box has only one option: “3D”. When selected (default), this gives Bulb type gauges a three-dimensional appearance. Otherwise, Bulb gauges have a flat two-dimensional appearance.
The GaugeProperties enumeration property name for this is “Is3D”.
Font group
The “Font” group box controls font specifications for the base font (used by default when other specifications have not been made), the gauge component caption (title), and the sub-caption.
This table lists the settings you can make in the “Font ”group box of the “Cosmetics” tab. GaugeSetProperty and GaugeGetProperty property names are also listed.
Cosmetics tab Fields / Options | Property name | Description / Comments |
---|---|---|
Base Font | BaseFont | Specify the font or font family to use for all text on the gauge; for example, “Arial”. |
Base Font Size | BaseFontSize | Specify a font size, in points (0 to 72), for the base (description) text. |
Base Font Color | BaseFontColor | Specify the RGB
value for the base font color, as a hexadecimal value (000000-FFFFFF).
You can double-click to display the “Color” dialog box, where you can select a color or define a custom color for the base font. The hexadecimal code displays after you click “” to exit the “Color” dialog box. |
Caption Alignment | CaptionAlignment | Using the drop-down list, specify whether the caption should be aligned left, center, or right. |
Caption On Top | CaptionOnTop | When selected
(default), this option displays the caption above the gauge.
By default the caption displays underneath the gauge. |
Caption Font Size | CaptionFontSize | Specify a font size, in points (0 to 72), for the caption text. |
Caption Font | CaptionFont | Specify the font or font family to use for the caption text; for example, “Arial”. |
Caption Font Color | CaptionFontColor | Specify the RGB
value for the caption font color, as a hexadecimal value (000000-FFFFFF).
You can double-click to display the “Color” dialog box, where you can select a color or define a custom color for the caption font. The hexadecimal code displays after you click “” to exit the “Color” dialog box. |
Caption Font Bold | CaptionFontBold | When selected (default), uses the “Boldface” font attribute to display the caption. |
Caption Horizontal Padding | CaptionHorizontalPadding | For captions that are not center-justified, specify the number of spaces to be placed as padding to the left or right of the caption (for left-justified captions or right-justified captions, respectively). If the caption is justified center, this setting has no effect. |
Align Caption With Canvas | AlignCaptionWithCanvas | When selected
(default), causes the caption to be aligned with reference to the component
canvas.
Otherwise, the caption is aligned as set using the “Caption Alignment” setting. |
Sub-Caption Font Size | SubCaptionFontSize | Specify a font size, in points (0 to 72), for the sub-caption text. |
Sub-Caption Font | SubCaptionFont | Specify the font or font family to use for the sub-caption text; for example, “Arial”. |
Sub-Caption Font Color | SubCaptionFontColor | Specify the RGB
value for the sub-caption font color, as a hexadecimal value (000000-FFFFFF).
You can double-click to display the “Color” dialog box, where you can select a color or define a custom color for the sub-caption font. The hexadecimal code displays after you click “” to exit the “Color” dialog box. |
Sub-Caption Font Bold | SubCaptionFontBold | When selected (default), uses the “Boldface” font attribute to display the sub-caption. |
For more information about these and other gauge properties, see the FusionCharts Developer help (www.fusioncharts.com/dev/).