Einstieg in Application Express: Ein Diagramm hinzufügen

Dieses Dokument beschreibt, wie man einer bestehenden Application Express-Anwendung ein Diagramm hinzufügt. Ausgangspunkt ist eine bestehende Seite einer Anwendung. Klicken Sie in der Developer Toolbar unten auf Erstellen (Abbildung 1).

Abbildung 1: Application Express Developer Toolbar: Neue Komponente erstellen

Ein Diagramm wird stets in einer Region dargestellt - klicken Sie daher Region auf dieser Seite an.

Abbildung 2: Neue Region erstellen

Es stehen verschiedene Komponenten zur Verfügung. Wählen Sie Diagramm aus.

Abbildung 3: Vorhandene Regionstypen

Flash-Diagramme bieten die meisten Darstellungsvarianten an. SVG-Diagramme sind aus Gründen den Rückwärtskompatibilität vorhanden und sollten nicht mehr genutzt werden. HTML Diagramme benötigen keinerlei Browser-Plugin, allerdings sind hier nur einfache Balkendiagramme möglich. Wählen Sie also Flash-Diagramm aus und klicken Sie auf Weiter .

Abbildung 4: Diagrammvarianten: Flash-Diagramme bieten die größte Darstellungsvielfalt

Wählen Sie nun den Diagrammtyp aus. Wir beginnen mit einem Spaltendiagramm .

Abbildung 5: Verfügbare Flash-Diagrammtypen"

Legen Sie im nächten Dialog den konkreten Diagrammtyp fest. Nehmen Sie für dieses Beispiel Gestapelte 3D-Spalte.

Abbildung 6: Verfügbare Flash-Diagrammtypen "Spalte"

Legen Sie dann wieder die üblichen Regionseigenschaften wie Titel, Layout-Template oder die Position auf der Seite fest.

Abbildung 7: Regionseinstellungen vornehmen

Nehmen Sie im nächsten Dialog (Abbildung 8) allgemeine Einstellungen zu Ihrem Diagramm vor. Für den Augenblick genügt es, einen Titel und ggfs. eine Diagrammanimation auszuwählen.

Abbildung 8: Allgemeine Angaben zum Diagramm

Im folgenden Dialog wird die SQL-Abfrage, welche die Daten für das Diagramm liefert, erwartet. Mit einem Klick auf Abfrage erstellen erreichen Sie einen Assistenten, der Ihnen beim Zusammenstellen der SQL-Abfrage hilft. In diesem Beispiel wird die in Abbildung 9 sichtbare Abfrage verwendet. SQL-Abfragen, die Daten für Diagramme zurückliefern, müssen in fast allen Fällen drei Ergebnisspalten zurückliefern: Zunächst einen Link, auf den verzweigt werden soll, wenn der Endanwender auf das Diagrammelement klickt, dann ein Label und schließlich den konkreten Wert für das Diagramm. Wenn Sie fertig sind, klicken Sie auf Region erstellen.

Abbildung 9: SQL-Abfrage als Datenquelle für das Diagramm hinterlegen"

Starten Sie die Seite anschließend. Das Ergebnis sollte in etwa wie in Abbildung 8 aussehen.

Abbildung 10: Das Diagramm ist fertig

Nun geht es daran, das Diagramm zu erweitern. Eine weitere Datenreihe soll hinzugefügt werden. Klicken Sie dazu wiederum in der Developer Toolbar auf Seite bearbeiten X.

Abbildung 11: Developer Toolbar: Seite bearbeiten

Abbildung 12 zeigt die "Steuerzentrale" für eine Application Express-Anwendungsseite. Von hier aus erreichen Sie alle Komponenten, die die Seite verwendet. Links unter Regionen sehen Sie die von Ihnen erzeugte Diagrammregion. Um die Eigenschaften zu ändern, klicken Sie die rechte Maustaste und wählen Sie im Kontextmenü Diagramm bearbeiten aus.

Abbildung 12: "Steuerzentrale" für eine Application Express-Seite

Sie erreichen einen Dialog, mit dem Sie die Eigenschaften des Diagramms bearbeiten können. Mit einem Klick auf Diagrammreihe in der Leiste oben (Abbildung 13) schränken Sie die Ansicht auf die Datenreihen für das Diagramm ein. Klicken Sie dann auf die Schaltfläche Datenreihe hinzufügen.

Abbildung 13: Diagrammeigenschaften bearbeiten

Geben Sie der Datenreihe einen Namen und hinterlegen Sie die SQL-Abfrage. Mit Klick auf Abfrage erstellen erreichen Sie wiederum einen Assistenten.

Abbildung 14: SQL-Abfrage für die neue Datenreihe angeben

Mit einem Klick auf Änderungen anwenden speichern Sie die Datenreihe ab und mit einem nochmaligen Klick auf Änderungen anwenden speichern Sie das Diagramm ab. Anschließend werden Sie wieder in die "Steuerzentrale" für die Application Express-Seite verzweigt. Starten Sie die Seite anschließend nochmals neu. Auch in der "Steuerzentrale" gibt es dazu oben rechts eine kleine Ampel.

Anwendungsseite starten

Das Endergebnis sollte dann wie in Abbildung 16 aussehen.

Abbildung 16: Das fertige Diagramm

Zurück zur Community-Seite