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.

Instructions for use

A tachograph is created using the <Gauge> element within the <Chart> element. The element can only be used in the layout of a Detail Component.

<Chart>
    <Gauge/>
</Chart>

The <Gauge> element can contain the following element:

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

Attribute

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. 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. Possible values: 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` or `120%` Keywords, e.g. `small` or `larger`
`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)
`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`
`foreground`	Defines a color for the foreground (text, etc.) of the control. Note: This setting overrides the default color of the color scheme. Possible values: Hexadecimal color value, e.g. `ff5a00` Note: Do not use a hash before the color value. Do not use an abbreviated notation of the color value. Color code from the color palette of the Web App, e.g. `A200` For more information, see Theming.

`<Gauge>` element

Specifies how the chart should be displayed.

In addition to the general attributes, you can define the following attributes for the <Gauge> element:

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 via 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 via 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: `0`) Note: `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`) Note: 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: `180`) Note: 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
`units`	Specifies the unit for the value that you specify using the value attribute. Possible values: Any string
`value`	Required Specifies which value of the data object is visualized. Possible values: Any string or data binding

`<Tooltip>` element

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

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

Example

XML

<Properties>
    <Property name="Gauge1" type="Integer"/>
    <Property name="Gauge2" type="Integer"/>
</Properties>
<FlowLayout>
    <Chart title="Gauge Chart 1">
        <Gauge value="#Gauge1"/>
    </Chart>
    <Chart title="Gauge Chart 2">
        <Gauge value="#Gauge2" min="0" max="300" startAngle="225" endAngle="-45">
            <Tooltip foreground="A700"/>
        </Gauge>
    </Chart>
</FlowLayout>

Output

The data supplied by the Technical Process are in the followoing format:

XML

<Ok>
	<Gauge1>75</Gauge1>
	<Gauge2>120</Gauge2>
</Ok>

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