Interaktive Diagramme mit Oracle XDK und SVG - doag.org · Ænominal, ordinal, kardinal, temporal SVG-Painter Model entspricht nicht programmatischer Logik Kapselung durch Templating

Florian Werner - Lehrstuhl Wirtschaftsinformatik, Eberhard Karls Universität Tübingen

Interaktive Diagramme mit Oracle XDK und SVG

Interaktive Diagramme mit Oracle XDK und SVG

Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG


Was erwartet Sie?

Prinzipielle Überlegungen bei der Umsetzung einer flexiblen Visualisierungs-Lösung im Web

Architektur-Konzept

Technologie-Schlaglicht: Potenziale von

Oracle XDK/XSQL Publishing Framework

SVG

Diagramme im Web:

2D-Visualisierung

Interaktivität

Demonstration von Prototypen


Was erwartet Sie nicht?

Vertiefung eines Einzelaspekts:„Wie werden Zeitskalen am Besten gezeichnet? “

Darstellung des vollen Leistungsumfangs der genannten Technologien

Schilderung von Alternativen


Erkenntnisziele

Ganzheitlicher Blick: Einstieg ins Thema

Zusammenhang architektonischer und technologischer Aspekte

Was kann das das Framework aus DB, XSQL und SVG leisten?

Welches Know-how bzw. welcher Aufwand steht hinter der Umsetzung?


AGENDA

Informationsvisualisierung

Architektur und Technologie bei der Visualisierung

Diagrammkonstruktion

Lösungskonzept

Prototyp-Demonstration

Lessons Learned


INFORMATIONSVISUALISIERUNG

Vielzahl an Informationen

Grundlage für EntscheidungenBusiness Intelligence

Informationen grafisch leichter zu erfassen

Eigenes interdisziplinäres Forschungsgebiet

Grundgedanke: Überführung quantitativer Daten in grafische Objekte


„Visualization can be seen as the intersection of user interface design, graphics, and databases“

(Tang/Stolte/Bosch 2003)


Prozess der Informationsvisualisierung

Interaktiver Einfluss auf die Transformationen

Filtering

Quelldaten

Mapping Rendering

Diagramm


Prinzipielle Fragen

Wie kann die Architektur einer IT-Lösung aussehen?

Welche Technologien erweisen sich als geeignet?

Nicht allgemein zu beantworten – abhängig von den Anforderungen


ARCHITEKTUR und TECHNOLOGIE – Standardsoftware

Große Lösung

Hohe Lizenzkosten

Hoher Implementierungsaufwand

Know-how-Problem

Standard-Flexibilität

Kleine Lösung

keine Flexibilität

schlechte Verteilbarkeit


Szenario

„Kleine“ Lösung für lokalen Kontext

Fachspezifische, individuelle Diagramme

Dynamische Erstellung der Diagramme

Wiederverwendung von Diagrammdefinitionen

Nutzerkreis: Mehrere, „verteilte“ Führungskräfte

Einfache Programmierung

Prinzipielle Erweiterbarkeit

Kleine und Mittelständische Unternehmen


Lösungsansatz

XML SVG

XSLT BrowserDB / XSQL


SVG

Hohe Abbildungsqualität

Entkopplung des Erscheinungsbilds (CSS)

Textelemente durchsuchbar

Animation (SMIL)

Interaktivität (ECMAScript bzw. JavaScript)

Untermenge SVG Mobile angepasst auf mobile Endgeräte

Pflege des Standards (SVG 1.2 voraussichtlich 2009/10)

Browserunterstützung zunehmend nativ


SVG-Elemente 1

grafische Primitive:

Linie/Polylinie

Kreis/Ellipse

Rechteck

Polygon

Styling

Gradienten

Muster

Filter

weitere grafische Elemente:

TextPfade

Animation

Interaktivität


SVG-Elemente 2

Transformationen des Vektorraums

Ausschnitte (Clipping)

Maskierungen (Masking)

Verschachtelung unterschiedlicher Koordinatensysteme

Gruppierungen

Symbol-Definitionen (Wiederverwendung)

…


SVG-Codebeispiel

<?xml version = '1.0'?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0/EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" >

<g transform="translate(0,500) scale(1,-1)">

<line x1="20" y2="20" x2="480" y2="20" /><line x1="20" y2="20" x2="20" y2="480" />

<rect x="100" y="20" width="50" height="150" style="fill:green" /> <rect x="200" y="20" width="50" height="400" style="fill:red" /><rect x="300" y="20" width="50" height="250" style="fill:blue" />

<text transform="translate(0, 900) scale(1,-1)" x="250" y="450" style="font-size:20; text-anchor:middle">Säulendiagramm</text>

</g>

</svg>


Gerenderte SVG-Grafik


XML Stylesheet Language Transformations (XSLT)

Transformation XML-konformer Dokumente

Ergebnis: XML-konformes Zielformat

Reine Strukturtransformation

Transformation in Präsentationsformat


XSLT-Codebeispiel

<xsl:template match="Umsatzzahlen">

<xsl:variable name=„count" select="position()"/>

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">

<g transform="translate(0,500) scale(1,-1)">

<line x1="20" y2="20" x2="480" y2="20" /><line x1="20" y2="20" x2="20" y2="480" />

<rect x=„{$count * 100}" y="20" width="50" style="fill:green" ><xsl:attribute name="height">

<xsl:value-of select="number(Umsatz)"/> </xsl:attribute>

</rect>...

</g> </svg></xsl:template>

XPath

Umsatz[@Produkt="Maxidome"]

Umsatz[1]


Dynamische Berechnungen

Variablen und Parameter:<xsl:variable/> bzw. <xsl:param/>

Auslesen mit $myVar bzw. $myParam

Berechnungen durch XPath-Operatoren und -Funktionen:div, +, *, sum() ...


Oracle XDK: XSQL Publishing Framework


XSQL-Codebeispiel


<?xml-stylesheet type="text/xsl" href="myStylesheet.xsl"?>

<page xmlns:xsql="urn:oracle-xsql" connection="myConn">

<xsql:query>

SELECT * FROM dept WHERE dname = 'ACCOUNTING'

</xsql:query>

</page>


Ergebnisdokument

<?xml version='1.0'?>

<?xml-stylesheet type="text/xsl" href="myStylesheet.xsl" ?>

<page xmlns:xsql="urn:oracle-xsql" connection="myConn">

<rowset>

<row num="1">

<deptno>10</deptno><dname>ACCOUNTING</dname> <loc>NEW YORK</loc>

</row>

</rowset>

</page>


DIAGRAMMKONSTRUKTION – Diagrammtypen

eindimensional: Thermometer

zweidimensional: Liniendiagramm

dreidimensional: Blasendiagramm

multidimensional: Netzdiagramm

Zustände (binär, ternär…): Schalter

Graphen: Prozessdiagramm

…


Diagrammelemente

Datenobjekte

Kontext

Zeichenfläche (Canvas), Diagramzeichenfläche (Diagram Area)

Achsen (Axes), Skalen (Scales), Skalenstriche (Ticks)

Legend (Legende), Beschriftungen (Label)

Container

visuelle Effekte (Visuals)

Interaktionselemente


Diagramminteraktion

Rendering-Transformation

Overview, Zoom, Pan

History

Design Change

Relate, Merge, Extract

Mapping-Transformation

Type Change

Filtering-Transformation

Drill-up/-down/-aside

Sort, Group, Aggregate

Level of Detail


Diagrammkonstruktion

Wahl eines geeigneten Diagrammtyps

Festlegung der Zuordnung von Daten zu Diagrammelementen

Layout benötigter Diagrammelemente


LÖSUNGSKONZEPT – Mikroarchitektur


XML-Schema für Diagramme


SVG und Diagramm-Interaktivität

XLink: <a xlink:href=""> Drill-down/-up/-aside, Relate…

SMIL Animation: Animationen als Feedback auf Benutzerinteraktion

Scripting: ECMAScript bzw. JavaScript


XSQL und Diagramm-Interaktivität

Verknüpfung mehrerer Transformationsketten durch XLink

Problem der Herstellung des Kontexts

Lösung: XSQL-Action Handler<xsql:include-request-params>

<xsql:set-stylesheet-params>

<xsql:set-session-params>

<xsql:if-param>


PROTOTYP-DEMONSTRATION

Prototyp „Liniendiagramm“ Standarddiagramm

Prototyp „Wintersport“ spezifisches Diagramm


Lessons Learned

Diagrammkontext elementar; ggf. besser durch programmatische Anreicherung des Client zu erzielen

AJAX…

Datentopologie als Basis jeglicher Diagramme; Skalierung elementar

nominal, ordinal, kardinal, temporal

SVG-Painter Model entspricht nicht programmatischer Logik

Kapselung durch Templating ermöglicht "Diagrammbaukasten"

Werkzeugunterstützung gut; Problem: eingebetteter Code


Links

Ausführliches Paper im DOAG-Download-Bereich:

„Interaktive Diagramme mit Oracle XDK und SVG“


DANKE FÜR IHRE AUFMERKSAMKEIT!

Kontakt:

Florian Werner

Eberhard Karls Universität Tübingen

Lehrstuhl Wirtschaftsinformatik

E-Mail: [email protected]


BACKUP-FOLIEN


W3C-XML-Standards


XML und SVG

nicht proprietär

keine Lizenzkosten

Plattform-unabhängig

einfache Struktur

selbstbeschreibend

verifizierbar (Syntax)

validierbar (Semantik)

kombinierbar (Namensraum)

erweiterbar

einfach verarbeitbar


SVG-Alternativen

Adobe Flash/Flex

proprietär

Lizenzkosten

schwierig automatisch zu generieren

Microsoft Silverlight

sehr jung

proprietär

funktional ähnlich Flash/Flex

Transformierbarkeit? Flexibilität?


XML-Codebeispiel


<Umsatzzahlen Produktgruppe="Zelte">

<Umsatz Produkt="Maxidome">150</Umsatz>

<Umsatz Produkt="Minidome">400</Umsatz>

<Umsatz Produkt="Mididome">250</Umsatz>

</Umsatzzahlen>


XSLT-Codebeispiel 1


<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output doctype-public="-//W3C//DTD SVG 1.0/EN" doctype-system="http://www.w3.org/TR/2001/REC-SVG-

20010904/DTD/svg10.dtd"

media-type="image/svg+xml" method="xml" />

<xsl:template match="/">

...

</xsl:template>

</xsl:stylesheet>

Documents

Interaktive Diagramme mit Oracle XDK und SVG - doag.org · Ænominal, ordinal, kardinal, temporal SVG-Painter Model entspricht nicht programmatischer Logik Kapselung durch Templating