Gauge Chart

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

<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

<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:

<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:

1. endAngle must be smaller than startAngle.
2. The connection from the start angle to the end angle is always clockwise.

3. 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" ...>