Gauge Chart | X4Documentation

A gauge chart can be used to show states with different valuations. It is well suited to compare target/actual values, e.g. for key figures, customer satisfaction or quality measurements.

A gauge chart can contain the following elements:

<Gauge>: Defines how the diagram is displayed.
<Tooltip>: Defines how the tooltip for the single values within the chart is displayed.

General Attributes

The following attributes are provided for all elements of a gauge chart:

Attributes	Description
`fontFamily`	Defines the font family. This attribute overrides the default font of the Web App for this control. If the attribute is defined on an element, the font family is inherited by the element's child elements, unless the child elements have the `fontFamily` attribute explicitly set. This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls. Possible values: `MainFont`: Stored main font Font code from the font palette, e.g. `Font04`
`fontSize`	Defines the font size. This attribute overrides the default font size of the Web App for this control. This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls. Possible values: Any integer or decimal number with a dot as decimal separator, e.g. `20`; `20.8`; `.9` Font size in pixels, e.g. `20px` Font size in points, e.g. `18pt` Font size compared to the font size of the parent element, e.g. `.8em` or `120` Key words: `xx-Small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`, `smaller`, `larger`
`fontStretch`	Sets the width of the single characters. This attribute overrides the default width of the characters of the Web App for this control. Possible values: `Condensed` `Expanded` `ExtraCondensed` `ExtraExpanded` `Medium` `Normal` (default) `SemiCondensed` `SemiExpanded` `UltraCondensed` `UltraExpanded` This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls.
`fontStyle`	Defines the font style. This attribute overrides the default style of the characters of the Web App for this control. Possible values: `italic`: italic characters `normal`: normal characters (default) `oblique`: italic characters (calculated) This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls.
`fontWeight`	Defines the font weight. This attribute overrides the default font weight of the Web App for this control. Possible values: `Black` `Bold` `DemiBold` `ExtraBlack` `ExtraBold` `ExtraLight` `Heavy` `Light` `Medium` `Normal` (default) `Regular` `SemiBold` `Thin` `UltraBlack` `UltraBold` `UltraLight` This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls.
`foreground`	Defines the font color. This setting overwrites the default color of the color scheme! Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash in front of the color value! Do not use a shortened notation of the color value! Color code from the color palette of the Web App (see (7.4.0-en) Theming), e.g. `A200`

Gauge

<Gauge>: Defines how the diagram is displayed.

In addition to the general attributes, <Gauge> can have the following attributes:

Attribute	Description
`axisMax`	Defines the end range of the gauge chart in percent. The color of the area is defined within the Theming Editor via the color property `GaugeAxisMax`. Possible values: Integer between `0` and `100` (default: `100`) Example The default values (`axisMin="20"`, `axisMiddle="80"`, `axisMax="100"`) define a gauge chart in which the range from 0 to 20 %, from 20 to 80 % and from 80 to 100 % is displayed in different colors.
`axisMiddle`	Defines the middle range of the gauge chart in percent. The color of the area is defined within the Theming Editor via the color property `GaugeAxisMiddle`. Possible values: Integer between `0` and `100` (default: `80`)
`axisMin`	Defines the initial range of the gauge chart in percent. The color of the area is defined within the Theming Editor via the color property `GaugeAxisMin`. Possible values: Integer between `0` and `100` (default: `20`)
`endAngle`	Defines the endpoint of the gauge chart. Possible values: Integer between `-360` and `360` (default: `45`) `endAngle` must always be smaller than `startAngle`.
`legend`	Defines if a legend is displayed. Possible values: `true` (default) / `false`
`max`	Defines the maximum value of the gauge chart. Possible values: Integer (default: `100`)
`min`	Defines the minimum value of the gauge chart. Possible values: Integer (default: `0`) The connection from `min` to `max` is always clockwise.
`startAngle`	Defines the start point of the gauge chart. Possible values: Integer between `-360` and `360` (default: `255`) For this setting, the following integers correspond to the following positions on a clock face: `0`: 3 o'clock `90`: 12 o'clock `180`: 9 o'clock `270`: 6 o'clock
`value`	Defines which value of the data object is visualized. Possible values: Any string or Data Binding

<Tooltip>: Child element of <Gauge>. Defines how the tooltip for the single values within the chart is displayed.

For <Tooltip> the general attributes (see above) can be defined.

Examples

XML

<Properties>
	<Property name="DataSource" type="Complex">
		<Property name="Satisfaction" type="Integer"/>
	</Property>
</Properties>
<FlowLayout>
	<Chart fontFamily="Font03" title="Employee Satisfaction">
		<Gauge  max="0" min="100" value="#DataSource.Satisfaction">
			<Tooltip fontFamily="Font02" fontSize="12"/>
		</Gauge>
	</Chart>
</FlowLayout>

The above example creates the following diagram:

XML

<Property name="Datasource" type="Complex">
	<Property name="gauge" type="Integer"/>
	...
	...
	...
</Property>
<Chart title="Gauge">
	<Gauge value="#Datasource.gauge" min="0" max="250" startAngle="-60" endAngle="-270" axisMin="0" axisMiddle="50" />
</Chart>
<Chart title="Gauge">
	<Gauge value="#Datasource.gauge" min="0" max="15" startAngle="75" axisMin="80" axisMiddle="90" />
</Chart>
<Chart title="Gauge">
	<Gauge value="#Datasource.gauge" min="-1" max="250" startAngle="120" />
</Chart>

The above example creates the following diagrams:

Functionality and further examples for gauge charts

The following must be observed for gauge charts:

endAngle must be smaller than startAngle.
The connection from the start angle to the end angle is always clockwise.
The connection from min to max (scale) is always clockwise.

The following are further examples of gauge charts with explanations to illustrate how the start and end angles work.

Definition	Result	Explanation
`<Gauge startAngle="0" endAngle="-180" min="0" max="100" ...>`
`<Gauge startAngle="90" endAngle="-90" min="0" max="100" ...>`
`<Gauge startAngle="180" endAngle="0" min="0" max="100" ...>`
`<Gauge startAngle="-90" endAngle="-270" min="0" max="100" ...>`
`<Gauge startAngle="240" endAngle="-60" min="0" max="100" ...>`