|
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
Wie bei jeder neuen Region legen Sie nun Überschrift, Anzeigepunkt und
ggfs. ein Layout-Template fest. Sie können dabei die Voreinstellungen übernehmen.
Abbildung 5: Überschrift, Anzeigepunkt und Regionslayout festlegen
Im nöchsten Dialog (Abbildung 6) legen Sie fest, welchen Diagrammtyp
Sie nutzen möchten. Mit Klick auf die Schaltfläche
Aktualisieren können
Sie sich eine Vorschau ansehen. In diesem Beispiel
wird Gestapelte 3D-Spalte ausgewählt.
Wenn Sie mit der Auswahl fertig sind,
klicken Sie auf Weiter.
Abbildung 6: Diagrammeinstellungen vornehmen
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 7 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 7: 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 8: 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 9: Developer Toolbar: Seite bearbeiten
Abbildung 10 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 dargestellt, auf den Link Flash-Diagramm.
Abbildung 10: "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 11) schränken Sie die Ansicht auf die Datenreihen für das
Diagramm ein. Klicken Sie dann auf die Schaltfläche
Datenreihe hinzufügen.
Abbildung 11: 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 12: "Steuerzentrale" für eine Application Express-Seite
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.
Das Endergebnis sollte dann wie in Abbildung 13 aussehen.
Abbildung 13: Das fertige Diagramm
Zurück zur Community-Seite
|
