Diagramme erzeugen: "Nativ" und ohne Browser Plugin!

Zur Darstellung von Diagrammen wird in Application Express die SVG- oder (neu in APEX 3.0) die Flash-Technologie genutzt. In manchen Fällen reichen die von Application Express angebotenen Diagramm-Möglichkeiten jedoch nicht aus - daher wurde bereits vor einiger Zeit ein Community-Tipp zur Erstellung eigener Grafiken bzw. Diagramme mit SVG veröffentlicht. Heute erfahren Sie, wie Sie eigene Diagramme direkt als Bilddatei generieren können - die Diagramme können als GIF, JPEG oder PNG erzeugt und vom Browser ohne weiteres Plugin dargestellt werden.

Systemvoraussetzungen

Die gute Nachricht vorab: Da die Oracle-Datenbank mit einer Java-Engine ausgestattet ist, ist alles Nötige zur Erzeugung von Bilddateien bereits vorhanden - es muss lediglich für Application Express nutzbar gemacht werden. Allerdings ergeben sich zwei Einschränkungen hinsichtlich der Datenbankversion und -Edition.

  • Die Datenbankversion muss mindestens 10 g Release 2 (Version 10.2) sein. Frühere Versionen sind nicht mit dem sog. Headless AWT ausgestattet, welches eine Voraussetzung für diesen Tipp ist.
  • Die Datenbank muss wenigstens eine "Standard Edition (One)" sein; Der Tipp läuft nicht in einer OracleXE, da OracleXE die Java-Engine nicht enthält.

Vorbereitungen

Betrachten Sie das SQL-Skript setup.sql (Download). Es erzeugt im Datenbankschema zunächst eine Java-Klasse, welche die eigentliche Arbeit übernimmt und anschließend ein PL/SQL-Paket, welches die Java-Klasse nach außen zugänglich macht. Wenn Sie mit Java vertraut sind, ist die Erweiterung der Java-Klasse um zusätzliche Funktionalität ein Leichtes für Sie.

Lassen Sie das Skript in SQL Workshop laufen. Das Ergebnis sollte in etwa wie in Abbildung 1 aussehen. Anschließend steht Ihnen das PL/SQL-Paket IMAGE_GENERATOR zur Verfügung.

SQL-Skript im SQL Workshop: Ergebnisse

Abbildung 1: Skript im SQL Workshop: Ergebnisse

Exkurs: Schriftarten

Wenn Sie Text in Ihr Diagramm aufnehmen, sollten Sie vorher die Prozedur IMAGE_GENERATOR.SET_FONT zur Festlegung der Schriftart (Font) aufrufen. Die Frage ist jedoch, welche Schriftarten Ihnen dabei zur Verfügung stehen. Setzen Sie dazu im SQL Workshop folgende SQL-Abfrage ab:

select * from table(image_generator.get_font_names)

Abfrage der verfügbaren Schriftarten

Abbildung 2: Abfrage der verfügbaren Schriftarten

Wahrscheinlich wird Ihnen die Liste der verfügbaren Schriftarten speziell auf Linux/UNIX etwas "mager" vorkommen - von Haus aus ist die Datenbank nur mit einem Minimum an Schriftarten ausgestattet. Dies ist jedoch einfach zu beheben: Sie können grundsätzlich alle Truetype-Schriftarten nutzen. Um weitere Schriftarten verfügbar zu machen, benötigen Sie allerdings die Hilfe des Datenbankadministrators. Navigieren Sie in Oracle10g auf dem Datenbankserver zur Datei $ORACLE_HOME/javavm/lib/ojvmjava/font.properties und fügen Sie dieser am Ende folgende Zeile hinzu:

appendedfontpath=[pfad-zum-Verzeichnis-mit-den-TTF-dateien]

In Oracle11g ist diese Datei nicht mehr vorhanden. Setzen Sie hier vor Ihren im folgenden beschriebenen Aufrufen ins Paket IMAGE_GENERATOR folgenden Aufruf ab:

begin
  image_generator.set_font_path('[pfad-zum-Verzeichnis-mit-den-TTF-dateien]');
end;

Es muss der Pfad zu einem Verzeichnis mit Truetype-Schriftartdateien verwendet werden. Sie erkennen diese Dateien normalerweise am Suffix .ttf. Achten Sie (speziell unter Linux/UNIX) weiterhin darauf, dass die im diesem Verzeichnis liegenden TTF-Dateien vom Betriebssystem-User "oracle" gelesen werden können - die Rechte sollten typischerweise so aussehen:

:
-rw-r--r--  1 root root    55220 2004-03-19 09:27 SUSESerif-Roman.ttf
-rw-r--r--  1 root root    53564 2004-03-19 09:27 SUSESerif-Bold.ttf
-rw-r--r--  1 root root    56708 2004-03-19 09:27 SUSESans-Roman.ttf
-rw-r--r--  1 root root    58804 2004-03-19 09:27 SUSESans-Oblique.ttf
-rw-r--r--  1 root root    44848 2004-03-19 09:27 SUSESansMono-Roman.ttf
:

Damit die neuen Schriftarten von der Datenbank erkannt werden, muss der Apache Web Server von Application Express neu gestartet werden. Wenn Sie anschließend im SQL Workshop die Abfrage aus Abbildung 2 wiederholen, sollten Sie nun mehr Schriftarten sehen.

Das neue Paket nutzen

Um Bilder generieren zu können, legen Sie entweder eine PL/SQL Stored Procedure oder einen Anwendungsprozeß an. Navigieren Sie dazu zu den Gemeinsamen Komponenten, dort zu Anwendungsprozesse und klicken Sie dort auf Erstellen. Als Typ wählen Sie Bedarfsgesteuert (Abbildung 3) aus und als Namen vergeben sie getTestImage.

Bedarfsgesteuerten Anwendungsprozeß erstellen

Abbildung 3: Bedarfsgesteuerten Anwendungsprozeß erstellen

Hinterlegen Sie den nun folgenden PL/SQL-Code:

declare
  v_image varchar2(100);
  v_data  blob;
begin
  -- Bild initialisieren: Über den Inhalt der Variablen
  -- "v_image" kann das Bild immer wieder angesprochen werden 
  v_image := IMAGE_GENERATOR.CREATE_IMAGE_HANDLE(
    P_WIDTH => 200,
    P_HEIGHT => 200
  );
  -- Hintergrundfarbe auf "Weiß" (rgb: 255,255,255) setzen
  IMAGE_GENERATOR.SET_BACKGROUND(
    P_IMG_NAME => v_image,
    P_R        => 255,
    P_G        => 255,
    P_B        => 255
  );
  -- Bild komplett löschen
  IMAGE_GENERATOR.CLEAR_IMAGE(
    P_IMG_NAME => v_image
  );
  -- Zeichenfarbe auf "Rot" (rgb: 255,0,0) setzen
  IMAGE_GENERATOR.SET_COLOR(
    P_IMG_NAME => v_image,
    P_R        => 255,
    P_G        => 0,
    P_B        => 0
  );
  -- Zeichenstil auf Dicke "4" und gestrichelt (Dashed) mit 5 Pixel Strichlänge setzen
  IMAGE_GENERATOR.SET_STROKE(
    P_IMG_NAME   => v_image,
    P_WIDTH      => 4,
    P_DASH_ARRAY => NUMBER_ARRAY(5,5)
  );
  -- Rechteck zeichnen: Der Ursprung des Koordinatensystems befindet sich oben links
  IMAGE_GENERATOR.DRAW_RECT(
    P_IMG_NAME => v_image,
    P_X        => 50,
    P_Y        => 20,
    P_WIDTH    => 100,
    P_HEIGHT   => 80
  );
  -- Schriftart "Times New Roman", "Fett" und Größe "20" setzen
  IMAGE_GENERATOR.SET_FONT(
    P_IMG_NAME    => v_image,
    P_FONT_FAMILY => 'Times New Roman',
    P_FONT_STYLE  => 'BOLD',
    P_FONT_SIZE   => 20
  );
  -- Zeichenfarbe auf "Blau" (rgb: 0,0,255) setzen
  IMAGE_GENERATOR.SET_COLOR(
    P_IMG_NAME => v_image,
    P_R        => 0,
    P_G        => 0,
    P_B        => 255
  );
  -- Und schließlich den Text "Hallo Welt" ins Bild schreiben 
  IMAGE_GENERATOR.DRAW_TEXT(
    P_IMG_NAME => v_image,
    P_X        => 20,
    P_Y        => 80,
    P_TEXT     => 'Hallo Welt',
    P_ALIGN    => IMAGE_GENERATOR.TEXTALIGN_LEFT,
    P_DEGREE   => 45
  );
  -- Fertig: Das Bild wird nun generiert und zurückgegeben 
  v_data := image_generator.get_image(v_image,'png');
  owa_util.mime_header('image/png', false);
  htp.p('Content-length: '||dbms_lob.getlength(v_data));
  htp.p('Content-Disposition: inline; filename=chart.png');
  owa_util.http_header_close;
  wpg_docload.download_file(v_data);
  -- Ressourcen freigeben 
  image_generator.destroy_image(v_image);
end;
/

Dieser Code illustiert die Anwendung des Paketes IMAGE_GENERATOR. Zuerst muss stets in Bild mit IMAGE_GENERATOR.CREATE_IMAGE_HANDLE initialisiert werden. Die Funktion gibt ein VARCHAR2 zurück; mit dem Rückgabewert wird das Bild bei nachfolgenden Aufrufen wieder identifiziert.

Anschließend werden die einzelnen Elemente der Reihe nach ins Bild gezeichnet: In diesem Beispiel wird zuerst ein rotes, getricheltes Rechteck und dann der blaue Schriftzug "Hallo Welt" ins Bild gezeichnet. Zum Abschluß wird das Bild mit IMAGE_GENERATOR.GET_IMAGE in einen BLOB übernommen; dieser wird schließlich mit WPG_DOCLOAD.DOWNLOAD_FILE ausgegeben. Der Aufruf von IMAGE_GENERATOR.DESTROY_IMAGE gibt die belegten Ressourcen wieder frei.

Um das Bild anzuzeigen, erzeugen Sie auf einer Anwendungsseite eine HTML-Region mit folgendem Quelltext:

<img src="f?p=&APP_ID.:&APP_PAGE_ID.:&SESSION.:APPLICATION_PROCESS=getTestImage">

Das Ergebnis sollte dann wie folgt aussehen:

Das erste generierte Bild

Abbildung 4: Das erste generierte Bild

Experimentieren Sie ruhig ein wenig mit den Prozeduren des Pakets IMAGE_GENERATOR. Es ist nun natürlich ein Leichtes, mit diesem Paket anhand von Tabellendaten Diagramme zu erzeugen. Betrachten Sie dazu das SQL-Skript beispiel.sql (Download), und spielen Sie es über den SQL Workshop ein. Es entsteht die Prozedur RENDER_CHART. Legen Sie nun einen neuen bedarfsgesteuerten Anwendungsprozeß getChart mit folgendem PL/SQL-Code an:

begin
  render_chart(
    p_sql => 'select ename label, sal value from emp order by ename'
  );
end;

Ändern Sie den Quellcode der HTML-Region entsprechend um, so dass der Anwendungsprozeß verwendet wird:

<img src="f?p=&APP_ID.:&APP_PAGE_ID.:&SESSION.:APPLICATION_PROCESS=getChart">

Das Ergebnis sieht dann wie folgt aus:

Ein Balkendiagramm auf die Tabelle EMP: Als PNG-Bild und ohne Plugin

Abbildung 5: Ein Balkendiagramm auf die Tabelle EMP: Als PNG-Bild und ohne Plugin

Mit dem Paket IMAGE_GENERATOR können Sie nun beliebige Zeichnungen oder Diagramme erzeugen - auch ausgefallene Diagramm-Wünsche können so erfüllt werden.

Zurück zur Community-Seite