Session No. 9C
PlexTractive Presentations
Creating graphics with Plex
Name:
Willem de Vries
Simon Jasperse
Company: Remia
Kiboko
Goals of this presentation
● Present pilot project on Business Graphics
● Show power of Plex
– integration of new techniques
– building re-usable patterns
Agenda
●
●
●
●
●
●
●
Introduction
The need for graphics
Solutions with comparison
Intro to SVG (Scalable Vector Graphics)
The Graphics Pattern
Demo
Conclusions
Application evolution
● Data-entry in windows:
– Windows controls
– Trees, Wizards and Tab-dialogs
● Integration of Windows-applications
– Office
– Mail-integrations
● Need for Graphical Data Presentations
– “commercial”
– functional
The choices
D
A
T
A
DATA PROCESSING
CHART CREATION
PRESENTATION
INTERACTION
EXTERNAL
INTERNAL
External Graphics
● Options
– General available reporting tools
– e.g.: Cognos Reportnet, Cleverpath Forest &
Trees
● Advantages:
– free choice based on user-requirements
– all kind of integration e.g. in portal-environments
● Disadvantages:
– redundant metadata / change management
– difficult with complex information-structures
Internal Graphics
● Options
– Microsoft Excel
– ActiveX controls
– SVG
● Advantages:
– complete deployment
– user experience: integrated design
– control on functionality from development
● Disadvantages
– development workload
600
19
8
10
10
11
12 12
1
11
Totale Duur
17 16
6
4
4
3
Oorzaak
Aantal keer
3
3
2
1
(P)Prin
tu nit
(P)Kor
te pauz
e
(P)Wac
hten op
saus
(P)Wac
hten op
monteur
(P)Klem
/aansla
g van pr
oductin
loop
1200
1000
67
38
46
42
60
29
40
13
2
8
3
20
0
0
Aantal
800
(O)Doo
svormer
(O)The
rmische
storin g
(O)Pal
let ketti
ngtrans
port
(O)In-/u
itloopba
nd
(O)Dek
sel aand
ruk sect
ie
(P)Tan
kwiss el
(P)Wiss
eli ng ar
tik el nr
.
(P)Sch
oonmak
en
200
34
(O)Tre
intje
(O)O ve
rzetunit
(O)Dek
sel afna
me
(O)Tra
nsportb
an d Ry
ll
(O)Bel
ijmin g
(O)Vac
uum tra
y afnam
(O)Zijw
e
aarts tra
ns port
van em
mers
(O)For
matie pla
(O)Pro
at
ductpo
mp/lei din
gwerk/
kleppen
(O)Tra
nsportb
an d vo
or doze
n
(O)Baa
nverde
ler
(O)The
rmische
storin g
vulmac
hine
(O)Inlo
op trans
portban
d
400
(-)Pa uz
(K)Pro
e
ductie
op start
/ ei nde
dagpro
(K)Kwa
d.
liteitspr
oblemen
em balla
ge
(O)Em
mer afna
me
(O)Afs
tellen na
ombouw
Minuten
Excel solution: the structure
Stilstandanalyse PLS25 voor periode 1-10-2003 t/m 31-10-2003. Draaitijd 322u:5m
97
120
78
100
80
Excel solution: consequences
● Advantages
– Skillset widely available
– Fast development
● Disadvantages
–
–
–
–
Very platformspecific
Not secure
Restricted form of integration
Lock-in
SVG
● Scalable Vector Graphics
–
–
–
–
–
–
W3C standard based on XML
embeddable within (X)HTML
text-based searchable format
scalable
support for transformation / animation
Interactive / Scriptable
Elements
●
●
●
●
●
●
●
●
Basic shapes (line, rect, circle, ellipse etc.)
G (grouping with css-like style, id)
Paths
Transformations (translate, rotate, scale)
Text
Filters (special effects)
Animations
Script
Very simple example
<svg width=“100%” height=“100%” viewbox=“0 0 650 450”>
<rect id=“SVGhasCorners” x=“380” y=“100”
width=“240” height=“100”
style=“fill:none; stroke:blue; stroke-width:10”/>
<text x=“500” y=“150”
style=“text-anchor:middle; font-size:25”>
HelloBarcelona!
</text>
</svg>
RESULT
Comparison internal approaches
ActiveX Excel
Necessary skills
-/+
+
Availability / cost
+
-/+
Platform
-independence
Versatility
-/+
+
Integration
++
possibilities
SVG
-/+
+
+
++
+
Remia SVG Pattern, Demo
Buiding SVG
Processing
Style
Database
WriteSVG
WriteXML
Data.xml
Style.xsl
Processing
Style
Graph
.svg
Remia SVG Pattern, structure
● DataPattern
– BlockFetch DOM scripts
– Fixed Node Structure
● ViewerPattern
– Standard stylesheets
● ViewerPattern
– Adobe ActiveX
– Processing XML scripts
Data.xml
Style.xsl
Graph.svg
Remia SVG Pattern, DataPattern
● GetData
– call BlockFetch
– Meta set X -Y Values
– sets Labels Max Min
● NodeShell
– XML framework
– uses Remia XML Pattern
● WriteXML
– Combines to Write data XML
Remia SVG Pattern, ViewerPattern
● ViewSVG
– ADOBE ActiveX Viewer
– SVG scripts
– References Standard
XSL’s
– Transform Script
xmldoc.Load (“data.xml”)
xsldoc.Load (“bargraph.xsl”)
svgdoc.loadXML (xmldoc.transformNode(xsldoc))
Remia SVG Pattern, Implemention
● Graph.GetData
– Replace View / Blockfetch
– Specify X and Y values, file name
Remia SVG Pattern, Demo
Considerations
● Need for XSLT skills
– abundance of examples on the net
● Functionality of current SVG-Viewer has
restrictions
– publication of events
– external availability of DOM-model
– poor documentation
References
●
●
●
●
●
●
●
●
●
www.w3c.org/Graphics/SVG
xml.apache.org/batik
www.adobe.com/svg
www.jenitennison.com
www.zvon.org
www.grapl.com
www.carto.net/papers/svg
www.frontier.nl/svg
www.schemasoft.com/services/SVG.shtml
Directions
● Adding Chart types
– piecharts etc.
– organisation charts
– mapping
● Adding features
– style elements
● Support for interaction
– e.g. data manipulation by graphics
– drill down / selections
Conclusion
● Easy to incorporate SVG in Plex with existing
XML Pattern
● Easy to implement standard SVG pattern
● Large range of applications possible
● Excellent Graphic quality
● Fits perfectly in multi-platform environment
● Internet ready
Discussion
[email protected]
[email protected]