Chart Controls

Erstellen Sie Diagramme mit X4 Activities Web Apps

Tutorial: Diagramme erstellen mit X4 Activities Web Apps

Das ist ein Tutorial aus der Reihe „Arbeiten mit X4 Activities Web Apps“. In dieser Reihe lernen Sie, wie Sie Web Apps mit X4 Activities zu erstellen.

Eine detailliertere Einführung finden Sie im Handbuch für X4 Activities.

Mit den Diagramm-Steuerelementen können verschiedene Diagramme in eine Web-Anwendung integriert werden, die mit X4 Activities Web Apps erstellt wurde.

Die Diagramm-Steuerelemente verfügen über die gleichen Grundeinstellungen wie die anderen Steuerelemente: Sie können in Layouts platziert werden und verhalten sich responsiv – Die Diagramme werden automatisch an die Bildschirmbreite des jeweiligen Geräts angepasst.

Folgende Diagrammarten können verwendet werden:

Liniendiagramm
Balkendiagramm
Kreis- bzw. Donutdiagramm
Tachodiagramm

In diesem Tutorial:

Erstellen Sie ein Web App-Projekt im X4 Designer.
Erstellen Sie verschiedene Diagramme mit Steuerelementen für Diagramme.
Prüfen Sie das Ergebnis im Browser.

In diesem Tutorial erstellen wir gemeinsam eine Web App, die alle Diagrammarten enthält.

Case

Arbeiten mit X4 Activities Web Apps

X4 Suite-Komponenten

X4 Activities Web Apps

Branchen

Branchenübergreifend

Sie können ein Template zu diesem Tutorial über den Button herunterladen. Entpacken Sie einfach die .zip-Datei und ziehen Sie das Template mit der Dateiendung .x4projecttemplate per Drag & Drop in den Repository Navigator des X4 Designers.

Template herunterladen

Liniendiagramm

Ein Liniendiagramm wird verwendet, um Datenreihen in Form von Linien anzuzeigen. Dabei werden die Datenpunkte durch gerade Liniensegmente verbunden. In einem Liniendiagramm können auch mehrere Zahlenreihen dargestellt werden. Mit einem Liniendiagramm können beispielsweise Trends oder Veränderungen im Zeitablauf dargestellt werden.

Um ein neues Web App Projekt anzulegen, klicken Sie im X4 Designer auf File > New > Web App Project

Der Project Creation Wizard öffnet sich.

Geben Sie für Project name ChartControls

Ein neues Web App Projekt wird angelegt.

Ein Projektname (Project name) darf kein Leerzeichen enthalten!

Klappen Sie das Projekt Chart Controls aus, indem Sie auf den Pfeil vor dem Projekt klicken.

Öffnen Sie die Definitions-Datei der Web App ChartControls.wad, indem Sie sie doppelt anklicken.

Wir wollen die Web App und den dazugehörigen Pfad umbenennen, damit wir direkt erkennen, um was es geht. Suchen Sie nach der Zeile <Module path="My Module" displayName="Module"> und ändern Sie sie folgendermaßen ab: <Module path="Charts" displayName="Charts">.

Das Element <Module> enthält alle Komponenten innerhalb eines Web App-Moduls.

Das Attribut displayName legt den Anzeigenamen des Moduls fest. Der Anzeigename wird im Browsertab angezeigt.

Das Attribut path legt den Pfad zu einem Modul fest. Der Pfad wird in der Adresszeile des Browsers angezeigt, z. B. http://localhost:8080/X4/webapp/ChartControls.

Wir passen nun die vorhandene Detail-Komponente Dashboard an. Ändern Sie das Attribut displayName="Dashboard" zu displayName="Line Chart" und das Attribut path="Dashboard" zu path="LineChart".

In unserem Beispiel wollen wir in einem Liniendiagramm zeigen, welchen Gewinn ein Unternehmen über 25 Jahre gemacht hat. Dazu müssen wir Properties angeben, die unsere zur Verfügung gestellten Daten definieren. Fügen Sie die folgende Properties-Definition zwischen <DetailComponent …> und <FlowLayout> ein:

<Properties>
    <Property name="DataSource" type="Complex">
        <Property name="Profit" type="List">
            <Property name="Years" type="Integer" />
            <Property name="Money" type="Integer" />
        </Property>
    </Property>
</Properties>

Um das Liniendiagramm in der Web App einzubinden, müssen wir ein Diagramm-Steuerelement verwenden. Anschließend definieren wir, welche Art von Diagramm wir verwenden möchten. Löschen Sie die Zeile <Header value="Welcome to my new Web App!"/> und fügen Sie stattdessen die folgenden Zeilen ein:

<Chart>
    <Line> </Line>
</Chart>

Um Daten für das Diagramm zu hinterlegen, benötigen wir das Element <LineData>. Fügen Sie das Element <LineData> zwischen dem öffnenden und den schließenden <Line>-Tag ein:

<LineData data="#DataSource.Profit" xValues="#Years" yValues="#Money" />

Das Element <LineData> gibt an, welche Daten im Diagramm angezeigt werden sollen.

Das Attribut data gibt die Property an, die die Daten enthält, in unserem Fall also #DataSource.Profit. Achten Sie darauf, die Property als Data-Binding-Ausdruck anzugeben!

Das Attribut xValues bzw. yValues gibt an, welche Werte auf der x- bzw. auf der y-Achse abgebildet werden. Auch hier müssen die Angaben als Data-Binding-Ausdruck gemacht werden. Der Data-Binding-Ausdruck ist relativ zur Angabe im Element data!

Die Web App-Definition sieht nun folgendermaßen aus:

<?xml version="1.0" encoding="UTF-8"?>
<WebApp xmlns="https://www.softproject.de/webapp/1.0" displayName="My New Web App" path="ChartControls">
    <Modules>
        <Module displayName="Chart" path="Chart">
            <Components>
                <DetailComponent default="true" displayName="Line Chart" path="LineChart">
                    <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>
                            <Line>
                                <LineData data="#DataSource.Profit" xValues="#Years" yValues="#Money" />
                            </Line>
                        </Chart>
                    </FlowLayout>
                </DetailComponent>
            </Components>
        </Module>
    </Modules>
</WebApp>

Um Daten in einem Diagramm anzuzeigen, müssen die Daten von einem Prozess geliefert werden. Diesen Prozess legen wir gleich an. Zunächst verknüpfen wir den Prozess mit dem Diagramm. Dazu ergänzen wir beim Element <DetailComponent> das Attribut process=“LineData.wrf“:

<DetailComponent default="true" displayName="Line Chart" path="LineChart" process="LineData.wrf">

Nun legen wir den Prozess an. Klicken Sie dazu mit der rechten Maustaste im Ordner Services auf den Ordner Processes.

Das Kontextmenü öffnet sich.

Klicken Sie im Kontextmenü auf New > Process.

Der Process Creation Wizard öffnet sich.

Geben Sie für Process name LineData.wrf ein. Achten Sie darauf, dass der Name genau dem entspricht, was wir für das Attribut process in der Web App-Definition angegeben haben!

Um den Prozess zu erzeugen, klicken Sie auf Finish.

Nun benötigen wir noch Daten, die wir über den Prozess an das Diagramm übergeben. Üblicherweise kommen diese Daten z. B. aus externen Anwendungen. In unserem Tutorial verwenden wir eine manuell erzeugte XML-Datei als Datenquelle, damit das Tutorial etwas einfacher ist.

Klicken Sie im Kontextmenü auf New > XML Document.

Der File Creation Wizard öffnet sich.

Geben Sie für File name DataSourceLineChart.xml ein.

Um die Datei zu erzeugen, klicken Sie auf Finish.

Die Datei DataSourceLineChart.xml wird erzeugt und geöffnet. Falls die Datei nicht automatisch geöffnet wird, öffnen Sie sie per Doppelklick.

Der Inhalt der Datei DataSourceLineChart.xml muss folgendermaßen sein:

<?xml version="1.0" encoding="UTF-8"?>
<Ok>
    <Object property="DataSource">
        <Object property="Profit">
            <Integer property="Years" value="0" />
            <Integer property="Money" value="0" />
        </Object>
        <Object property="Profit">
            <Integer property="Years" value="5" />
            <Integer property="Money" value="200000" />
        </Object>
        <Object property="Profit">
            <Integer property="Years" value="10" />
            <Integer property="Money" value="250000" />
        </Object>
        <Object property="Profit">
            <Integer property="Years" value="15" />
            <Integer property="Money" value="400000" />
        </Object>
        <Object property="Profit">
            <Integer property="Years" value="20" />
            <Integer property="Money" value="350000" />
        </Object>
        <Object property="Profit">
            <Integer property="Years" value="25" />
            <Integer property="Money" value="600000" />
        </Object>
    </Object>
</Ok>

Das Wurzelelement der XML-Datei muss <Ok> sein! Wenn das nicht der Fall ist, dann wird das Diagramm nicht angezeigt.

Diese XML-Datei fügen wir nun per Drag & Drop aus dem Repository in den Prozess LineData.wrf ein. Der Prozess sieht dann so aus:

Damit das Liniendiagramm noch besser aussieht, fügen wir dem Diagramm Achsenbeschriftungen hinzu. Dazu wechseln wir wieder zur Web App-Definition. Wir ergänzen vor dem Element <LineData /> die folgende Zeile:

<Axis horizontalLabel="Years" verticalLabel="Euro" />

Das Element <Axis> definiert die Achsenbeschriftungen des Diagramms.

Das Attribut horizontalLabel definiert die Beschriftung der x-Achse.

Das Attribut verticalLabel definiert die Beschriftung der y-Achse.

Wenn alle Dateien gespeichert sind, können wir uns das Ergebnis jetzt im Browser ansehen. Klicken Sie dazu mit der rechten Maustaste auf das Web App-Projekt.

Das Kontextmenü öffnet sich.

Klicken Sie im Kontextmenü auf Open Web App in browser.

Melden Sie sich in der Web App mit den Zugangsdaten an. Es öffnet sich die Komponente LineChart mit unserem Liniendiagramm:

Mit dem Attribut marker des Elements <LineData> können Sie sie die Markierung der Datenpunkte anpassen. Standardmäßig ist ein Kreis (circle) angeben. Sie können zwischen 8 verschiedenen Markern wählen:

circle: Kreis

rect: Rechteck

roundRect: Rechteck mit abgerundeten Ecken

triangle: Dreieck

diamond: Raute

none: kein Marker

pin: Stecknadel

arrow: Pfeil

Der Wertebereich der x- und y-Achse wird automatisch an die vorhandenen Werte angepasst. Der Wertebereich kann über die folgenden Attribute des Elements <Axis> aber auch individuell festgelegt werden:

horizontalMin: kleinster Wert auf der x-Achse
horizontalMax: größter Wert auf der x-Achse
verticalMin: kleinster Wert auf der y-Achse
verticalMax: größter Wert auf der y-Achse

Balkendiagramm

Mit den Diagrammsteuerelementen in X4 Activities Web Apps können auch Balkendiagramme erzeugt werden. Bei einem Balkendiagramm werden Werte als unterschiedlich hohe Balken dargestellt. Mit diesem Diagrammtyp können z. B. mehrere Variablen mit einem einzelnen Wert verglichen werden. Balkendiagramme sind nützlich, um Kategorien zu vergleichen.

Um ein Balkendiagramm anzuzeigen, müssen wir eine Liste von sog. Kategorien definieren, mit denen die x-Achse befüllt wird. Diesen Kategorien auf der x-Achse kann dann ein Wert zugeordnet werden.

Um ein Balkendiagramm anzuzeigen, benötigen wir zunächst eine neue Komponente. Öffnen Sie die Web App-Definition, indem Sie doppelt auf die Datei ChartControls.wad klicken.

Fügen Sie unterhalb der Detail-Komponente Line Chart mit dem Element <DetailComponent> eine weitere Detail-Komponente hinzu. Legen Sie für das Attribut displayName Bar Chart fest, für das Attribut path BarChart und für das Attribut process BarData.wrf.

Falls Sie die Detail-Komponente Line Chart kopiert haben, dann entfernen Sie das Attribut default="true" oder setzen Sie es auf default="false". Mit diesem Attribut wird angegeben, welche Komponente nach der Anmeldung in der Web App zuerst geöffnet wird. Es darf daher nur eine Default-Komponente geben.

Die Daten, die im Diagramm angezeigt werden, werden wieder von einem Prozess, in unserem Fall BarData.wrf geliefert. Damit die Daten angezeigt werden können, müssen wir zunächst die Properties definieren:

<Properties>
    <Property name="DataSource" type="Complex">
        <Property name="Categories" type="List">
            <Property name="Category" type="String" />
        </Property>
        <Property name="CompanyX" type="List">
            <Property name="Category" type="String" />
            <Property name="Money" type="Integer" />
        </Property>
    </Property>
</Properties>

Anschließend legen wir innerhalb der Detail-Komponente Bar Chart mit dem Element <FlowLayout> ein Flow-Layout an.

Innerhalb des Flow-Layouts legen wir fest, wie unser Balkendiagramm angezeigt werden soll:

<Chart>
    <Bar>
        <BarData data="#DataSource.CompanyX" category="#Category" value="#Money" name="Company X" />
    </Bar>
</Chart>

<BarData> ist ein Kindelement von <Bar> und definiert, wie die Daten angezeigt werden sollen. Für jede Kategorie im Balkendiagramm muss ein <BarData>-Element definiert werden.

Nun fehlen uns nur noch die Daten selbst, die wir in unserem Balkendiagramm anzeigen wollen. Diese Daten werden uns von einem Prozess geliefert. Legen Sie einen neuen Prozess an. Klicken Sie dazu mit der rechten Maustaste im Ordner Services auf den Ordner Processes.

Das Kontextmenü öffnet sich.

Klicken Sie im Kontextmenü auf New > Process.

Der Process Creation Wizard öffnet sich.

Geben Sie für Process name BarData.wrf ein. Achten Sie darauf, dass der Name genau dem entspricht, was wir für das Attribut process in der Web App-Definition angegeben haben!

Um den Prozess zu erzeugen, klicken Sie auf Finish.

Der Prozess soll uns Daten für unser Balkendiagramm als XML-Datei liefern. Diese XML-Datei legen wir nun an. Klicken Sie dazu mit der rechten Maustaste im Ordner Services auf den Ordner Resources.

Das Kontextmenü öffnet sich.

Klicken Sie im Kontextmenü auf New > XML Document.

Der File Creation Wizard öffnet sich.

Geben Sie für File name DataSourceBarChart.xml ein.

Um die Datei zu erzeugen, klicken Sie auf Finish.

Die Datei DataSourceBarChart.xml wird erzeugt und geöffnet. Falls die Datei nicht automatisch geöffnet wird, öffnen Sie sie per Doppelklick.

Der Inhalt der Datei DataSourceBarChart.xml muss folgendermaßen sein:

<?xml version="1.0" encoding="UTF-8"?>
<Ok>
    <Object property="DataSource">
        <Object property="CompanyX">
            <String property="Category" value="1995" />
            <Integer property="Money" value="200000" />
        </Object>
        <Object property="CompanyX">
            <String property="Category" value="2000" />
            <Integer property="Money" value="250000" />
        </Object>
        <Object property="CompanyX">
            <String property="Category" value="2005" />
            <Integer property="Money" value="400000" />
        </Object>
        <Object property="CompanyX">
            <String property="Category" value="2010" />
            <Integer property="Money" value="350000" />
        </Object>
        <Object property="CompanyX">
            <String property="Category" value="2015" />
            <Integer property="Money" value="100000" />
        </Object>
    </Object>
</Ok>

Das Wurzelelement der XML-Datei muss <Ok> sein! Wenn das nicht der Fall ist, dann wird das Diagramm nicht angezeigt.

Wenn alle Dateien gespeichert sind, können wir uns das Ergebnis jetzt im Browser ansehen. Klicken Sie dazu mit der rechten Maustaste auf das Web App-Projekt.

Das Kontextmenü öffnet sich.

Diese XML-Datei fügen wir nun per Drag & Drop aus dem Repository in den Prozess BarData.wrf ein. Der Prozess sieht dann so aus:

Klicken Sie im Kontextmenü auf Open Web App in browser.

Melden Sie sich in der Web App mit den Zugangsdaten an. Es öffnet sich die Komponente LineChart mit unserem Liniendiagramm. Um sich unser Balkendiagramm anzusehen, klicken Sie im Menü auf der linken Seite auf Bar Chart.

Unser Balkendiagramm wird angezeigt:

Jetzt können wir unserem Balkendiagramm einen weiteren Balken hinzufügen. Ergänzen Sie in den Properties der Komponente BarChart CompanyY mit den gleichen Eigenschaften wie CompanyX. Achten Sie darauf, dass sich alle Einträge (für CompanyX und CompanyY) innerhalb des Elements <Object property="Datasource"> befinden!

<Properties>
    <Property name="DataSource" type="Complex">
        <Property name="Categories" type="List">
            <Property name="Category" type="String" />
        </Property>
        <Property name="CompanyX" type="List">
            <Property name="Category" type="String" />
            <Property name="Money" type="Integer" />
        </Property>
        <Property name="CompanyY" type="List">
            <Property name="Category" type="String" />
            <Property name="Money" type="Integer" />
        </Property>
    </Property>
</Properties>

Ergänzen Sie im Element <Bar> ein weiteres Element <BarData> und verbinden Sie es mit den neuen Properties CompanyY:

<Bar>
    <BarData data="#DataSource.CompanyX" category="#Category" value="#Money" name="Company X" />
    <BarData data="#DataSource.CompanyY" category="#Category" value="#Money" name="Company Y" />
</Bar>

Ergänzen Sie beim Element <Chart> das Attribut title mit dem Wert Profit Comparison between Two Companies.

Ergänzen Sie fünf neue Einträge am Ende des XML-Dokuments DataSourceBarChart.xml:

<Object property="CompanyY">
    <String property="Category" value="1995" />
    <Integer property="Money" value="450000" />
</Object>
<Object property="CompanyY">
    <String property="Category" value="2000" />
    <Integer property="Money" value="500000" />
</Object>
<Object property="CompanyY">
    <String property="Category" value="2005" />
    <Integer property="Money" value="350000" />
</Object>
<Object property="CompanyY">
    <String property="Category" value="2010" />
    <Integer property="Money" value="400000" />
</Object>
<Object property="CompanyY">
    <String property="Category" value="2015" />
    <Integer property="Money" value="550000" />
</Object>

Aktualisieren Sie nun die Web App im Browser und lassen Sie sich das Balkendiagramm anzeigen. Wir sehen nun ein Balkendiagramm mit Balken in unterschiedlichen Farben:

Balkendiagramm (BarChart) mit mehreren Balken

Balkendiagramme unterstützen außerdem folgende Funktionen:

Keine Daten vorhanden: Wenn für eine Kategorie keine Daten vorhanden sind, wird für diesen Fall der Wert 0 angenommen.
Negative Werte: Werte unter 0 können problemlos angezeigt werden.
Stacking: Die verschiedenen Kategorien können auch als gestapelte Balken angezeigt werden. Setzen Sie dazu im Element <Bar> das Attribut stacked auf true.

Kreis- und Donutdiagramm

Ein Kreis- oder Donutdiagramm wird verwendet, um proportionale Daten in einem Kreis oder einem Ring anzuzeigen. Mit einem Kreisdiagramm kann z. B. der Anteil einzelner Daten an der Gesamtheit veranschaulicht werden.

Fügen Sie unterhalb der Detail-Komponente Bar Chart mit dem Element <DetailComponent> eine weitere Detail-Komponente hinzu. Legen Sie für das Attribut displayName Pie Chart fest, für das Attribut path PieChart und für das Attribut process PieData.wrf.

Die Daten, die im Diagramm angezeigt werden, werden wieder von einem Prozess, in unserem Fall PieData.wrf geliefert. Damit die Daten angezeigt werden können, müssen wir zunächst die Properties definieren:

<Properties>
    <Property name="DataSource" type="Complex">
        <Property name="ABC-Analysis" type="List">
            <Property name="ItemGroup" type="String" />
            <Property name="Profit" type="Integer" />
        </Property>
    </Property>
</Properties>

Anschließend legen wir innerhalb der Detail-Komponente Pie Chart mit dem Element <FlowLayout> ein Flow-Layout an.

Innerhalb des Flow-Layouts definieren wir mit dem Element <Pie> zwei Diagramme und legen fest, wie unser Kreis- bzw. unser Donutdiagramm angezeigt werden soll:

<Chart title="ABC Analysis / Profit from Different Item Groups">
    <Pie data="#DataSource.ABC-Analysis" name="#ItemGroup" value="#Profit" normals="true"/>
</Chart>
<Chart title="ABC Analysis / Profit from Different Item Groups">
    <Pie data="#DataSource.ABC-Analysis" name="#ItemGroup" value="#Profit" donut="true" />
</Chart>

Im Element <Pie> legt das Attribut donut="true" fest, dass das Diagramm als Donutdiagramm angezeigt wird.

Nun fehlen uns nur noch die Daten selbst, die wir in unserem Kreis- bzw. Donutdiagramm anzeigen wollen. Diese Daten werden uns von einem Prozess geliefert. Legen Sie einen neuen Prozess an. Klicken Sie dazu mit der rechten Maustaste im Ordner Services auf den Ordner Processes.

Das Kontextmenü öffnet sich.

Klicken Sie im Kontextmenü auf New > Process.

Der Process Creation Wizard öffnet sich.

Geben Sie für Process name PieData.wrf ein. Achten Sie darauf, dass der Name genau dem entspricht, was wir für das Attribut process in der Web App-Definition angegeben haben!

Um den Prozess zu erzeugen, klicken Sie auf Finish.

Der Prozess soll uns Daten für unser Kreisdiagramm als XML-Datei liefern. Diese XML-Datei legen wir nun an. Klicken Sie dazu mit der rechten Maustaste im Ordner Services auf den Ordner Resources.

Das Kontextmenü öffnet sich.

Klicken Sie im Kontextmenü auf New > XML Document.

Der File Creation Wizard öffnet sich.

Geben Sie für File name DataSourcePieChart.xml ein.

Um die Datei zu erzeugen, klicken Sie auf Finish.

Die Datei DataSourcePieChart.xml wird erzeugt und geöffnet. Falls die Datei nicht automatisch geöffnet wird, öffnen Sie sie per Doppelklick.

Mit unserem Kreis- bzw. Donutdiagramm wollen wir eine ABC-Analyse machen. Deshalb haben wir in unserem Input die drei Produktgruppen A, B und C. Der Inhalt der Datei DataSourcePieChart.xml muss folgendermaßen sein:

<?xml version="1.0" encoding="UTF-8"?>
<Ok>
    <Object property="DataSource">
        <Object property="ABC-Analysis">
            <String property="ItemGroup" value="A" />
            <Integer property="Profit" value="1200000" />
        </Object>
        <Object property="ABC-Analysis">
            <String property="ItemGroup" value="B" />
            <Integer property="Profit" value="500000" />
        </Object>
        <Object property="ABC-Analysis">
            <String property="ItemGroup" value="C" />
            <Integer property="Profit" value="90000" />
        </Object>
    </Object>
</Ok>

Das Wurzelelement der XML-Datei muss <Ok> sein! Wenn das nicht der Fall ist, dann wird das Diagramm nicht angezeigt.

Diese XML-Datei fügen wir nun per Drag & Drop aus dem Repository in den Prozess PieData.wrf ein. Der Prozess sieht dann so aus:

Wenn alle Dateien gespeichert sind, können wir uns das Ergebnis jetzt im Browser ansehen. Klicken Sie dazu mit der rechten Maustaste auf das Web App-Projekt.

Das Kontextmenü öffnet sich.

Klicken Sie im Kontextmenü auf Open Web App in browser.

Melden Sie sich in der Web App mit den Zugangsdaten an. Es öffnet sich die Komponente LineChart mit unserem Liniendiagramm. Um sich unser Kreis- bzw. Donutdiagramm anzusehen, klicken Sie im Menü auf der linken Seite auf Pie Chart.

Unser Kreis- und unser Donutdiagramm wird angezeigt:

Ergebnis Kreisdiagramm / Balkendiagramm (PieChart)

Tachodiagramm

Ein Tachodiagramm wird verwendet, um einen einzelnen Wert auf einer Runden Achse anzuzeigen, die wie ein Geschwindigkeitsmesser aussieht. Mit einem Tachodiagramm kann man gut Soll-/Ist-Werte vergleichen, z. B. bei Kennzahlen, Kundenzufriedenheits- oder Qualitätsmessungen.

Um ein Tachodiagramm anzuzeigen, benötigen wir zunächst eine neue Komponente. Öffnen Sie die Web App-Definition, indem Sie doppelt auf die Datei ChartControls.wad klicken.

Fügen Sie unterhalb der Detail-Komponente Pie Chart mit dem Element <DetailComponent> eine weitere Detail-Komponente hinzu. Legen Sie für das Attribut displayName Gauge Chart fest, für das Attribut path GaugeChart und für das Attribut process GaugeData.wrf.

Die Daten, die im Diagramm angezeigt werden, werden wieder von einem Prozess, in unserem Fall GaugeData.wrf geliefert. Damit die Daten angezeigt werden können, müssen wir zunächst die Properties definieren:

<Properties>
    <Property name="DataSource" type="Complex">
        <Property name="Satisfaction" type="Integer" />
    </Property>
</Properties>

Anschließend legen wir innerhalb der Detail-Komponente Gauge Chart mit dem Element <FlowLayout> ein Flow-Layout an.

Innerhalb des Flow-Layouts legen wir fest, wie unser Tachodiagramm angezeigt werden soll:

<Chart title="Employee Satisfaction">
    <Gauge value="#DataSource.Satisfaction" min="100" max="0" />
</Chart>

Im Element <Gauge> legen wir mit den Attributen min="100" und max="0" den Minimal- und den Maximalwert des Tachodiagramms fest.

Nun fehlen uns nur noch die Daten selbst, die wir in unserem Tachodiagramm anzeigen wollen. Diese Daten werden uns von einem Prozess geliefert. Legen Sie einen neuen Prozess an. Klicken Sie dazu mit der rechten Maustaste im Ordner Services auf den Ordner Processes.

Das Kontextmenü öffnet sich.

Klicken Sie im Kontextmenü auf New > Process.

Der Process Creation Wizard öffnet sich.

Geben Sie für Process name GaugeData.wrf ein. Achten Sie darauf, dass der Name genau dem entspricht, was wir für das Attribut process in der Web App-Definition angegeben haben!

Um den Prozess zu erzeugen, klicken Sie auf Finish.

Der Prozess soll uns Daten für unser Tachodiagramm als XML-Datei liefern. Diese XML-Datei legen wir nun an. Klicken Sie dazu mit der rechten Maustaste im Ordner Services auf den Ordner Resources.

Das Kontextmenü öffnet sich.

Klicken Sie im Kontextmenü auf New > XML Document.

Der File Creation Wizard öffnet sich.

Geben Sie für File name DataSourceGaugeChart.xml ein.

Um die Datei zu erzeugen, klicken Sie auf Finish.

Die Datei DataSourceGaugeChart.xml wird erzeugt und geöffnet. Falls die Datei nicht automatisch geöffnet wird, öffnen Sie sie per Doppelklick.

Mit unserem Tachodiagramm wollen wir die Mitarbeiterzufriedenheit anzeigen. Der Inhalt der Datei DataSourceGaugeChart.xml muss folgendermaßen sein:

<?xml version="1.0" encoding="UTF-8"?>
<Ok>
    <Object property="DataSource">
        <Integer property="Satisfaction" value="88" />
    </Object>
</Ok>

Ein Tachodiagramm kann nur einen Wert anzeigen!

Diese XML-Datei fügen wir nun per Drag & Drop aus dem Repository in den Prozess GaugeData.wrf ein. Der Prozess sieht dann so aus:

Wenn alle Dateien gespeichert sind, können wir uns das Ergebnis jetzt im Browser ansehen. Klicken Sie dazu mit der rechten Maustaste auf das Web App-Projekt.

Das Kontextmenü öffnet sich.

Klicken Sie im Kontextmenü auf Open Web App in browser.

Unser Tachodiagramm wird angezeigt:

Details des Tachodiagramms können direkt in der Web App-Definition über Attribute des Elements <Gauge> festgelegt werden.

legend: Gibt an, ob eine Legende angezeigt wird.
startAngle: Gibt den Startpunkt des Tachodiagramms an.
endAngle: Gibt den Endpunkt des Tachodiagramms an.
green: Gibt anteilig den Bereich an, der grün dargestellt wird.
normal: Gibt anteilig den Bereich an, der blau dargestellt wird.
red: Gibt anteilig den Bereich an, der rot dargestellt wird.

Beispiel für Tachodiagramme mit verschiedenen Winkeln

startAngle="0" endAngle="-180"

startAngle="90" endAngle="-90"

startAngle="180" endAngle="0"

startAngle="-90" endAngle="-270"