Oracle Jet Integration

Präsentation zum Thema: "Oracle Jet Integration"—  Präsentation transkript:

1 Oracle Jet Integration
Oliver Lemm APEX Expertenseminar 5. &

2 Oracle JET

3 Oracle Jet JavaScript Framework Open Source standalone Responsive
HTML 5 CSS3

4 Oracle Jet in APEX 5.0

5 Oracle Jet in APEX 5.1 Ablösung für AnyChart in APEX 5.1 als Charting Library durch Hilary Farrell in APEX integriert „nur“ Integration der Charting Komponenten

6 Charting in APEX by Hilary Farrell

7 Charting in APEX 5.0 Bessere Geschwindigkeit in der Darstellung bei großen Datenmengen 3D Charting Modelle für die meisten HTML5 Charts Interactive Report & Websheet standardmäßig HTML5 AnyGantt 4.3.0 AnyChart 3 Charts nicht weiter unterstützt Automatisches Upgrade von vorhandenen Flash Charts zu AnyChart 6

8 Oracle Jet in APEX Neuer Wizard zum Erstellen von Charts
Neue Charttypen: Funnel, Area, Polar, Line with Area, Radar Einfache Definition der Quelle für Charts Charts in APEX nur über den PageDesigner editierbar Vollständige Integration mit dem Universal Theme & farbliche Abstimmung

9 Chart Typen

10 Oracle Jet Chart Features
Keine 32k (VARCHAR2) Beschränkungen mehr RTL Support JET_DIRECTORY Substitution String #JET_DIRECTORY# verlinkt auf die aktuelle Version von Oracle Jet in APEX

11 Packaged App – Sample Charts
Demo

12 Hands-On Sample Charts installieren

13 Anpassbarkeit stacked vs unstacked Bug „Stacked“ bei beiden

14 Anpassbarkeit vertikal vs horizontal

15 Anpassbarkeit Aktivieren & Deaktivieren von Wertelinien
Neuberechnung vorhanden, gut oder schlecht? => später Möglichkeiten

16 Anpassbarkeit zoombar

17 Anpassbarkeit Mouseover / Tooltip
Rahmenfarbe des Tooltips von Linie des Wertes Nur Anpassen des Labels => alle Werte von der jeweiligen Chart dann benutzt Custom Tooltip => komplett eigens definiert Legend Tooltip => Tooltip über Legende / Wertelinie

18 Kombinierbarkeit Line – Bar - Area

19 Chart anpassen/erstellen
Als Region Chart => Oracle Jet D3/Gantt … => Plugin

20 Chart Eigenschaften Chartype über Eigenschaften Größe
Darstellung Stacked/unstacked – Vertical/Horizontal Cursor Werte / Mouseover anzeigen, Elemente ausgrauen Eigenschaften Intervall der Achsen – Zoom & Scroll aktivieren Tooltip Ein/Aus – Werte, … Legende aktivieren/deaktiveren Automatischer Refresh Eigener JavaScript Code

21 Datenreihe definieren
Darstellung bei Kombination wählbar Einzelner Query pro Datenreihe Deklarative Zuordnung der Spalten zu Chartausprägungen Links möglich Items auswertbar Colorpicker

22 Achsen anpassbar Min & Max definierbar
Format von Zeit, Prozent und Datumswerten definierbar Grundlinie und Skalierung definierbar Raster definiebar (Major & Minor Ticks)

23 Hands-On Chart erstellen Basierend auf EMP Bar Chart
Datenlinien basierend auf JOB Einmal mittels „Series Name“ unterscheiden Einmal mittels eigenem SQL Farben definieren Maximum auf 10k legen Modales Fenster => Bearbeiten eines Eintrags Refresh beim Schließen

24 @OliverLemm