Liniendiagramm

Mit einem Liniendiagramm können Trends oder Veränderungen im Zeitablauf dargestellt werden. Dabei werden Datenpunkte durch gerade Liniensegmente verbunden. In einem Liniendiagramm können auch mehrere Zahlenreihen dargestellt werden.

Ein Liniendiagramm kann folgende Elemente enthalten:

<Line>: Enthält alle Elemente, die zum Liniendiagramm gehören.
<Axis>: Definiert die Achsenbeschriftungen.
<LineData>: Definiert, wie die Daten angezeigt werden sollen. Für jeden Datensatz, also jede Linie im Liniendiagramm muss ein <LineData>-Element definiert werden.
<Tooltip>: Definiert, wie der Tooltip für die einzelnen Werte im Diagramm angezeigt werden soll.

Allgemeine Attribute

Folgende Attribute sind für alle Elemente eines Liniendiagramms verfügbar:

Attribut	Beschreibung
`fontFamily`	Legt die Schriftfamilie fest. Mit diesem Attribut wird die Standardschrift der Web App für dieses Control überschrieben. Wird das Attribut auf einem Element definiert, so wird die Schriftfamilie an die Kindelemente des Elementes vererbt, sofern die Kindelemente das Attribut `fontFamily` nicht explizit gesetzt haben. Dieses Attribut funktioniert nicht für die Elemente `Image`, `Map` und `HtmlDocument`. Mögliche Werte: `MainFont`: hinterlegte Hauptschrift Fontcode aus der Font-Palette, z. B. `Font04`
`fontSize`	Legt die Schriftgröße fest. Mit diesem Attribut wird die Standardschriftgröße der Web App für dieses Control überschrieben. Dieses Attribut funktioniert nicht für die Elemente `Image`, `Map` und `HtmlDocument`. Mögliche Werte: Beliebige ganze Zahl oder Dezimalzahl mit einem Punkt als Dezimaltrennzeichen, z. B. `20` ; `20.8` ; `.9` Schriftgröße in Pixel, z. B. `20px` Schriftgröße in Punkt, z. B. `18pt` Schriftgröße im Vergleich zur Schriftgröße des Elternelements, z. B. `.8em` oder `120%` Schlüsselwörter: `xx-Small` , `x-small` , `small` , `medium` , `large` , `x-large` , `xx-large` , `smaller` , `larger`
`fontStretch`	Legt die Breite der einzelnen Schriftzeichen fest. Mit diesem Attribut wird die Standardbreite der Schriftzeichen für dieses Control überschrieben. Mögliche Werte: `Condensed` `Expanded` `ExtraCondensed` `ExtraExpanded` `Medium` `Normal` (Standard) `SemiCondensed` `SemiExpanded` `UltraCondensed` `UltraExpanded` Dieses Attribut funktioniert nicht für die Elemente `Image`, `Map`, `Chart` und `HtmlDocument`.
`fontStyle`	Legt die Neigung der Schrift fest. Mit diesem Attribut wird die Standardneigung der Schriftzeichen für dieses Control überschrieben. Mögliche Werte: `italic`: kursive Schrift `normal`: normale Schrift (Standard) `oblique`: schräg gestellter Schriftstil (berechnet) Dieses Attribut funktioniert nicht für die Elemente `Image`, `Map` und `HtmlDocument`.
`fontWeight`	Legt die Schriftstärke fest. Mit diesem Attribut wird die Standardstärke der Schriftzeichen für dieses Control überschrieben. Mögliche Werte: `Black` `Bold` `DemiBold` `ExtraBlack` `ExtraBold` `ExtraLight` `Heavy` `Light` `Medium` `Normal` (Standard) `Regular` `SemiBold` `Thin` `UltraBlack` `UltraBold` `UltraLight` Dieses Attribut funktioniert nicht für die Elemente `Image`, `Map` und `HtmlDocument`.
`foreground`	Definiert die Schriftfarbe. Diese Einstellung überschreibt die Standardfarbe des Farbschemas! Mögliche Werte: Hexadezimaler Farbwert, z. B. `ff5a00` Verwenden Sie keine Raute vor dem Farbwert! Verwenden Sie keine verkürzte Schreibweise des Farbwerts! Farbcode aus der Farbpalette der Web App (vgl. (7.3.3-de) Theming), z. B. `A200`

Line

<Line>: Enthält alle Elemente, die zum Liniendiagramm gehören.

Zusätzlich zu den allgemeinen Attributen kann <Line> folgende Attribute haben:

Attribut Beschreibung

legend

Gibt an, ob eine Legende angezeigt werden soll.

Mögliche Werte: true (Standard) / false

Axis

<Axis>: Kindelement von <Line>. Definiert die Achsenbeschriftungen.

Zusätzlich zu den allgemeinen Attributen kann <Axis> folgende Attribute haben:

Attribut	Beschreibung
`color`	Legt die Farbe der Achsten fest. Mögliche Werte: Hexadezimaler Farbwert, z. B. `ff5a00` Verwenden Sie keine Raute vor dem Farbwert! Verwenden Sie keine verkürzte Schreibweise des Farbwerts! Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. `A200`
`horizontalLabel`	Definiert die Beschriftung der x-Achse. Mögliche Werte: Beliebige Zeichenkette
`horizontalMax`	Maximalwert der x-Achse Mögliche Werte: Ganzzahl
`horizontalMin`	Minimalwert der x-Achse Mögliche Werte: Ganzzahl
`horizontalUnits`	Einheit der x-Achse Mögliche Werte: Ganzzahl
`verticalLabel`	Definiert die Beschriftung der y-Achse. Mögliche Werte: Beliebige Zeichenkette
`verticalMax`	Maximalwert der y-Achse Mögliche Werte: Ganzzahl
`verticalMin`	Minimalwert der y-Achse Mögliche Werte: Ganzzahl
`verticalUnits`	Einheit der y-Achse Mögliche Werte: Ganzzahl

LineData

<LineData>: Kindelement von <Line>. Definiert, wie die Daten angezeigt werden sollen. Für jeden Datensatz, also jede Linie im Liniendiagramm muss ein <LineData>-Element definiert werden.

Zusätzlich zu den allgemeinen Attributen kann <LineData> folgende Attribute haben:

Attribut	Beschreibung
`color`	Definiert die Farbe der Linie. Mögliche Werte: Hexadezimaler Farbwert oder Ausdruck für Data Binding (`Color`) Wird das Attribut `color` nicht definiert, werden die im Theming Editor definierten Farben verwendet.
`data`	Gibt an, welche Daten im Diagramm dargestellt werden. Mögliche Werte: Data Binding
`labels`	Gibt an, ob die Datenpunkte mit dem jeweiligen Wert beschriftet werden. Mögliche Werte: `true` / `false` (Standard)
`marker`	Gibt an, wie ein Datenpunkt dargestellt wird. Mögliche Werte: `circle`: Kreis `rect`: Rechteck `roundRect`: Rechteck mit abgerundeten Ecken `triangle`: Dreieck `diamond`: Raute `pin`: Stecknadel `arrow`: Pfeil `none`: kein Marker
`markersEnabled`	Gibt an, ob ein Datenpunkt markiert werden soll. Mögliche Werte: `true` / `false`
`name`	Name des Datensatzes, der in der Legende angezeigt wird. Mögliche Werte: Beliebige Zeichenkette
`xValues`	Gibt an, welche Daten im Diagramm auf der x-Achse dargestellt werden. Die angegebene Zeichenkette bezieht sich auf eine definierte Property innerhalb der Daten, die für `data` angegeben werden. Mögliche Werte: Data Binding
`yValues`	Gibt an, welche Daten im Diagramm auf der y-Achse dargestellt werden. Die angegebene Zeichenkette bezieht sich auf eine definierte Property innerhalb der Daten, die für `data` angegeben werden. Mögliche Werte: Data Binding

<Tooltip>: Kindelement von <Line>. Definiert, wie der Tooltip für die einzelnen Werte im Diagramm angezeigt werden soll.

Für <Tooltip> lassen sich die allgemeinen Attribute (s.o.) definieren.

Beispiele für Liniendiagramme

Beispiel 1:

XML

<Properties>
	<Property name="DataSource" type="Complex">
		<Property name="Profit" type="List">
			<Property name="Years" type="Integer"/>
			<Property name="Money" type="Integer"/>
		</Property>
	</Property>
</Properties>
<FlowLayout>
	<Chart  fontFamily="Font01" title="Profit over 25 Years">
		<Line fontSize="medium" fontStyle="normal" fontFamily="Font02" fontWeight="Black" foreground="A700" legend="true">
			<Tooltip fontFamily="Font01" fontSize="30"/>
			<Axis fontFamily="Font03" horizontalLabel="Years" verticalLabel="Euro"/>
			<LineData data="#DataSource.Profit" labels="true" name="Profit" xValues="#Years" yValues="#Money"/>
		</Line>
	</Chart>
</FlowLayout>

Output-Format des Prozesses

Beispiel 2

XML

<Property name="Datasource" type="Complex">
    <Property name="LineDataSet1" type="List">
        <Property name="xValue" type="Integer"/>
        <Property name="yValue" type="Integer"/>
    </Property>
    <Property name="LineDataSet2" type="List">
        <Property name="xValue" type="Integer"/>
        <Property name="yValue" type="Integer"/>
    </Property>
</Property>
	...
<Chart title="Some data">
    <Line>
        <Axis horizontalLabel="D, mm" verticalLabel="L, s" />
        <LineData data="#Datasource.LineDataSet1" xValues="#xValue"
            yValues="#yValue" name="Series 1" marker="diamond" labels="true" />
        <LineData data="#Datasource.LineDataSet2" xValues="#xValue"
            yValues="#yValue" name="Series 2" marker="pin" />
    </Line>
</Chart>

Um eine Linie im Diagramm darzustellen, wird das Element LineData verwendet. Die dargestellten Daten selbst sind in der Property Datasource enthalten. Im obigen Beispiel werden die Daten über den Data-Binding-Ausdruck #Datasource.LineDataSet1 abgerufen.

Output-Format des Prozesses

Das obige Beispiel führt zu folgendem Diagramm: