Tachograph | X4Documentation

A tachograph can be used to display states with different ratings. It is well suited to compare target/actual values, e.g. for key performance indicators, customer satisfaction, or quality measurements.

A tachograph can contain the following elements:

<Gauge>: Defines how the chart is displayed.
<Tooltip>: Child element of <Gauge>. Defines how the tooltip for each value should be displayed in the chart.

General attributes

The following attributes are available for all elements of a Tachograph:

Attribute	Description
`fontFamily`	Specifies the font family. This attribute overwrites the default Web App font for this layout. If the attribute is defined on an element, the font family is inherited by any child elements unless the `fontFamily` attribute is explicitly defined for the child elements. This attribute does not work for the `Image`, `Map` , and `HtmlDocument` elements. Possible values: `MainFont`: stored main font Fontcode from the font palette, e.g. `Font04`
`fontSize`	Sets the font size. This attribute overrides the default Web App font size for this layout. This attribute does not work for the `Image`, `Map` , and `HtmlDocument` elements. Possible values: Any integer or decimal number with a period as a 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` oder `120%` Keywords: `xx-Small` , `x-small` , `small` , `medium` , `large` , `x-large` , `xx-large` , `smaller` , `larger`
`fontStretch`	Defines the width of each character. This attribute overrides the default character width for this layout. Possible values: `Condensed` `Expanded` `ExtraCondensed` `ExtraExpanded` `Medium` `Normal` (default) `SemiCondensed` `SemiExpanded` `UltraCondensed` `UltraExpanded` This attribute does not work for the `Image`, `Map`, `Chart`, and `HtmlDocument` elements.
`fontStyle`	Defines the tilt of the font. This attribute overrides the default font tilt for this layout. Possible values: `italic`: Italic font `normal`: Normal font (default) `oblique`: Slanted font style (calculated) This attribute does not work for the `Image`, `Map` , and `HtmlDocument` elements.
`fontWeight`	Defines the font weight. This attribute overrides the default font weight for this layout. Possible values: `Black` `Bold` `DemiBold` `ExtraBlack` `ExtraBold` `ExtraLight` `Heavy` `Light` `Medium` `Normal` (default) `Regular` `SemiBold` `Thin` `UltraBlack` `UltraBold` `UltraLight` This attribute does not work for the `Image`, `Map` , and `HtmlDocument` elements.
`foreground`	Defines the font color. This setting overrides the default color of the color scheme! Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash before the color value! Do not use a shortened notation of the color value! Color code from the color palette of the Web App (cf. Theming), e.g. `A200`

<Gauge> :

<Gauge>: Defines how the chart is displayed.

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

Attribute	Description
`axisMax`	Specifies the end range of the tachograph in percent. The color of the area is defined in the Theming Editor via the `GaugeAxisMax` color property. Possible values: Integer between `0` and `100` (default: `100`) Example The default values (`axisMin="20"` , `axisMiddle="80"`, `axisMax="100"`) define a tachograph in which the ranges from 0 to 20%, 20 to 80% and 80 to 100% are displayed in different colors.
`axisMiddle`	Specifies the center portion of the tachograph in percent. The color of the area is defined in the Theming Editor using the `GaugeAxisMiddle` color property. Possible values: Integer between `0` and `100` (default: `80`)
`axisMin`	Specifies the starting range of the tachograph in percent. The color of the area is defined in the Theming Editor using the `GaugeAxisMin` color property. Possible values: Integer between `0` and `100` (default: `20`)
`endAngle`	Specifies the endpoint of the tachograph. Possible values: Integer between `-360` and `360` (default: `-45`) `endAngle` must always be smaller than `startAngle`.
`legend`	Specifies whether to display a legend. Possible values: `true` (default) / `false`
`max`	Specifies the maximum value of the tachograph. Possible values: Integer (default: `100`)
`min`	Specifies the minimum value of the tachograph. Possible values: Integer (default: `0`) The connection from `min` to `max` is always clockwise.
`startAngle`	Specifies the start point of the tachograph. Possible values: Integer between `-360` and `360` (default: `255`) When defining values, the following integers correspond with the following positions on a clock: `0`: 3 am `90`: 12 am `180`: 9 am `270`: 6 am
`value`	Specifies 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 each value should be displayed in the chart.

For <Tooltip> , you can define the general attributes (see above).

Examples

Example 1:

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 example above results in the following chart:

Example 2:

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 example above results in the following charts:

How it works and other examples of tachographs

For tachographs, the following must be observed:

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 tachograms with explanations to illustrate the function of the start and end angle.

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