Oracle Jet Integration Oliver Lemm APEX Expertenseminar 5. & 6.10.2016

Oracle JET http://www.oracle.com/webfolder/technetwork/jet/index.html

Oracle Jet JavaScript Framework Open Source standalone Responsive HTML 5 CSS3

Oracle Jet in APEX 5.0 https://svenweller.wordpress.com/2016/04/07/integrate-oracle-jet-into-apex-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

Charting in APEX by Hilary Farrell

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

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

Chart Typen

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

Packaged App – Sample Charts Demo

Hands-On Sample Charts installieren

Anpassbarkeit stacked vs unstacked Bug „Stacked“ bei beiden

Anpassbarkeit vertikal vs horizontal

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

Anpassbarkeit zoombar

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

Kombinierbarkeit Line – Bar - Area

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

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

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

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

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

@OliverLemm http://oliverlemm.blogspot.de/ http://de.linkedin.com/in/OliverLemm