Graphen in Apex von Thomas Hernando.

Transkript

1 Graphen in Apex von Thomas Hernando

2 Einleitung FIRMENINFOS Gründung im Jahre 2000 mit Sitz in Neu-Isenburg bei Frankfurt am Main Mehr als 30 Berater Oracle Gold Partner Schwerpunkte liegen im Data Warehouse Business Process Development Anwendungsentwicklung (Oracle ApEx und Java) Administration und Schulung ZUR PERSON Seit 2012 im Unternehmen als Berater und Anwendungsentwickler tätig Schwerpunkt Oracle DB und Oracle Application Express

3 Agenda Serverseitige Clientseitige Generierung auf Application Server

4 Ziel des Vortrags

5 Ziel des Vortrags Datalineage als Beispiel Graphen

6 Ziel des Vortrags Datalineage als Beispiel Graphen

7 Aktuelle Situation in Apex ZUERST EINMAL Graphen können nicht aus dem Apex Standard heraus erstellt werden. BÄUME SIND VORHANDEN Klassische interaktive Baumdarstellung Links Bilder Tooltip s

8 Agenda Serverseitige Clientseitige

9 Serverseitige Erstellung ApEx fragt die DB nach Graphen Die Datenbank ruft externes Programm auf Beim Aufruf Übergabe der darzustellenden Daten mit Formatvorlage Programm* erstellt Bild, Vektorgrafik oder ähnliches DB/ApEx liest vom Dateisystem das Bild ein und stellt es im Browser dar * In der Demo wird GraphViz genutzt

10 Serverseitige Erstellung Demo Beispiel in GraphViz - Vorbereitung Installation von GraphViz ( Verzeichnis auf DB-Server anlegen (am besten direkt im Image Verzeichnis der Apex Installation) Shell-Skript erstellen mit Aufruf für GraphViz #!/bin/hash cd /home/oracle/apex/images/images/doag_2014 /usr/bin/dot Tpng graphviz_demo.dot o graphviz_demo.png echo Graph wurde erzeugt

11 Serverseitige Erstellung Demo Beispiel in GraphViz - Vorbereitung Installation von GraphViz ( Verzeichnis auf DB-Server anlegen (am besten direkt im Image Verzeichnis der Apex Installation) Shell-Skript erstellen mit Aufruf für GraphViz #!/bin/hash Applikationsverzeichnis von GraphViz cd /home/oracle/apex/images/images/doag_2014 /usr/bin/dot Tpng graphviz_demo.dot o graphviz_demo.png echo Graph wurde erzeugt

12 Serverseitige Erstellung Demo Beispiel in GraphViz - Vorbereitung Installation von GraphViz ( Verzeichnis auf DB-Server anlegen (am besten direkt im Image Verzeichnis der Apex Installation) Shell-Skript erstellen mit Aufruf für GraphViz #!/bin/hash Aufruf von GraphViz cd /home/oracle/apex/images/images/doag_2014 /usr/bin/dot Tpng graphviz_demo.dot o graphviz_demo.png echo Graph wurde erzeugt

13 Serverseitige Erstellung Demo Beispiel in GraphViz - Datenbank Oracle Directory auf das angelegte Verzeichnis create directory doag_2014 as '/home/oracle/apex/images/images/doag_2014'; Anlage einer External Table auf das entsprechende Verzeichnis Mit Preprocessor Option ruft das Shell Skript bei Selektion der External Tabelle auf

14 Serverseitige Erstellung Demo Beispiel in GraphViz - Apex Demo beinhaltet ein Textfeld zur Eingabe des DOT-Codes Per SUBMIT wird ein Prozess gestartet der DOT-Code in Datei schreibt und die External Table selektiert External Table ruft das Shell-Skript auf und dieses erzeugt Graphen Seite enthält ein Display Image Item Display Image Item holt den Graphen aus dem Verzeichnis

15 Demo Demo GraphViz

16 Agenda Serverseitige Clientseitige

17 Clientseitige Erstellung ApEx fragt DB nach Daten für einen Graphen DB generiert (evtl. bereits mit Positionsangaben) Datei/Daten im entsprechenden Format (json, xml, csv usw.) DB liefert diese Daten an ApEx / Browser Im Browser werden per JavaScript die erhaltenen Daten interpretiert und entsprechend der Formatvorlage dargestellt Formatvorlagen müssen manuell definiert und in JavaScript implementiert werden (JS- Frameworks dienen lediglich der Vereinfachung)

18 Clientseitige Erstellung Demo Beispiel mit d3.js - Vorbereitung Download von d3.js ( Einbindung der d3.v3.min.js

19 Clientseitige Erstellung Demo Beispiel in d3.js - Apex PL/SQL Region erzeugt z.b. JSON-Objekt JSON-Objekt wird an JavaScript Engine übergeben D3.js Programmcode im Page Header Wandelt JSON-Objekt in Graphen um Graph selber ist eine SVG-Matrix und vollständig individualisierbar per CSS CSS Code im Page Header

20 Demo Demo D3.js

21 Fazit GRAPHVIZ D3.JS Schnelle Implementation Vielseitige Möglichkeiten bzgl. Design Logik zur Graph Darstellung ist vorhanden Vielseitige Möglichkeiten bzgl. Design Geringer administrativer Aufwand bei Implementation Individualisierung vollständig möglich Interaktion Geringer Aufwand bei Rollout Vielseitig einsetzbar, z.b. Charts usw.

22 Dankt Ihnen für Ihre Aufmerksamkeit syntegris information solutions gmbh Hermannstrasse Neu-Isenburg Fon (06102) Fax (06102)