Creating Intuitive & Interactive

Dashboards with the ADF Data

Visualization Components
Frank Houweling
UKOUG 2014
 2

Agenda

• Why data visualization is important

• Examples where DVTs are used
• Graph demo: ADF Performance Monitor
• Basic steps creating a graph (ADF11g)
• Special features
– colors, mouseover info, alerts, reference line, animation 3D, clicklistener, hide and
show, stacked graphs, dual graphs, e.g.
• Advanced Graph Examples
– Bubble, Spark, Treemap
• Other Tips & Challenges
• 12.1.3 DVT Components
 3

Why data visualization is

important
• Use of the power of visualization to present information
• Call to action to our end user instead of showing raw data - as we
frequently do today
• Visualizations can be used to help end users focus on what is relevant:
aggregate, exception, trend, comparison etc.
 4

Glance, Scan, Commit

• Oracle Alta UI
• Oracle follows the “glance, scan, commit” design philosophy
– start in an overview/dashboard mode with small information containers
– These containers show only key information for the user to glance
– If the user is interested in anything he can zoom in on the subject
(Scan the information)
– When the user needs to complete a task he
navigates to the commit mode
 5

Oracle Alta

• Work Better Application

 6

Fusion Applications
 7

Dashboard interactive graphs

• Dashboard of financial management application for local governments
 8

WLS Enterprise Manager

 9

ADF DVTs in Monitoring Tools

• Database EM
 10

Demo ADF Performance Monitor

Dashboard
 11

Demo ADF Performance Monitor

Errors Overview
 12

Loaded Rows in Memory

ADF BC Memory Analyzer
– In this production ADF app, for a single ViewObject instance,
more than 900.000 rows were loaded in the ADF app (Blue) !
 14

Demo ADF Performance Monitor

Slow Activation of ApplicationModule
 15

Demo ADF Performance Monitor

Slow Passivation of ApplicationModule
 Demo ADF Performance Monitor 16
Worst ApplicationModule activations &
passivations overview
• Monitor aggregates of ApplicationModule activations and passivations
– AVG, Occurrences, Total Exec Time, Min, Max
– Zoom in into single executions
 17
Demo ADF Performance Monitor
Worst ApplicationModule activations &
passivations overview
 18

Demo ADF Performance Monitor

Occurrences overview
 19

Agenda

• Why data visualization is important

• Examples where DVTs are used
• Graph demo: ADF Performance Monitor
• Basic steps creating a graph (ADF11g)
• Special features
– colors, mouseover info, alerts, reference line, animation 3D, clicklistener, hide and
show, stacked graphs, dual graphs, e.g.
• Advanced Graph Examples
– Gauges, Bubble, Spark, Treemap
• Other Tips & Challenges
• 12.1.3 DVT Components
 20

Basic Steps Creating a Graph - 1

• Create a ADFBC ViewObject with raw graph data

• Drag and drop the ViewObject from the DataControl to the page
 21

Basic Steps Creating a Graph - 2

• Select Category and Graph Type

 22

Basic Steps Creating a Graph - 3

• Select X and Y attributes

 23

Basic Steps Creating a Graph - 4

• Generated code in page

• Generated code in PageDef

 24

Basic Steps Creating a Graph - 5

• Result:
 25

Basic Steps Creating a Graph - 6

• Add attribute dynamicResize="DYNAMIC_SIZE" to dvt:lineGraph :

 26

Basic Steps Creating a Graph - 8

• Colors are defined

in <dvt:seriesSet>
– Add a line color
– Add a line width
– Add a marker type
 27

Basic Steps Creating a Graph - 9

• Position the legend

 28

Basic Steps Creating a Graph - 10

• In PageDefinition
– Change Legend text
– Change mouseover attribute labels
 29

Basic Steps Creating a Graph - 11

• Add Titles
 30

Basic Steps Creating a Graph - 12

• Show Time instead of Date

on X-axis
 31

Basic Steps Creating a Graph - 13

• 12Hide and
Show Behavior
• Click on
legend item
• Graph is
rescaled !
 32

Basic Steps Creating a Graph - 13

• Just add
hideAndShowBehavior="withRescale"
 33

Agenda slide

• Why data visualization is important

• Examples where DVTs are used
• Graph demo: ADF Performance Monitor
• Basic steps creating a graph (ADF11g)
• Special features
– colors, mouseover info, alerts, reference line, animation 3D, clicklistener, hide and
show, stacked graphs, dual graphs, e.g.
• Advanced Graph Examples
– Gauges, Bubble, Spark, Treemap
• Other Tips & Challenges
• 12.1.3 DVT Components
 34

Special Features - 1
PageDef
• Combination Graph
 35

Special Features – 2 (Alerts)

• Alerts
– Warn, alert user for something
– Show custom image
– Add mouse over message
 36

Special Features – 2 (Alerts)

 37

Special Features – 2 (Alerts)

 38

Special Features – 3
Reference Line
• Reference Line
– JVM Garbage Collection is considered as very long running when > 20 Seconds
 39

Special Features – 3
Reference Line
• You can make the reference line dynamic with EL expression
 40

Special Features – 4
Custom Label on Axis
• Custom Label on X-axis
– Transient attributes are useful
 41

Special Features – 4
Custom Label on Axis
• Steps custom label on axis:
– Create a Transient
attribute
– Generate the ViewRowImpl
– Add your custom code
 42

Special Features – 4
Custom Label on Axis
• Set the VO transient attribute
as value to the label attribute
of the group item
 43

Special Features - 5

• Three D effect
• Be careful; does it add
value to end-users ?
 44

Special Features - 6

• Animation
• Be careful; does it add
value to end-users ?
 45

Special Features – 7
Make the graph interactive
• Click on graph and zoom in from Day to Hour Overview
 46

Special Features – 7
Make the graph interactive
• Zoom in from Hour to Five Minute Overview
 47

Special Features – 7
Make the graph interactive
 48

Special Features – 7
Make the graph interactive
• Add a
clickListener

• In Managed Bean
 49

Agenda

• Why data visualization is important

• Examples where DVTs are used
• Graph demo: ADF Performance Monitor
• Basic steps creating a graph (ADF11g)
• Special features
– colors, mouseover info, alerts, reference line, animation 3D, clicklistener, hide and
show, stacked graphs, dual graphs, e.g.
• Advanced Graph Examples
– Gauges, Bubble, Spark, Treemap
• Other Tips & Challenges
• 12.1.3 DVT Components
 50

Advanced Graph Example 1:

Bubble Graph
– Displays three dimensions of data; x, y and z value; z value is the size of the bubble
– Can facilitate the understanding of social, economical, and other relationships
 51

Advanced Graph Example 1:

Bubble Graph
• See complete example at AMIS blog at:
– http://technology.amis.nl/2013/03/13/adf-dvt-speed-date-interactive-bubble-graph/
– Life Expectancy by Country
– Life expectancy (y-axis), income a year (x-axis) and the population (bubble size) is
shown.
– In steps of 10 years, for the last 50 years (1970, 1980, 1990, 20000 and 2010).
 52

Advanced Graph Example 1:

Bubble Graph
• ClickListener again to make it interactive and to navigate to detail graph
 53

Advanced Graph Example 1:

Bubble Graph
 54

Advanced Graph Example 2:

Spark Graph
• See complete example at AMIS blog at:
– http://technology.amis.nl/2011/07/27/tour-de-france-2011-analysis-using-adf-dvt-
graphs-part-4-spark-charts/
 55

Advanced Graph Example 3:

TreeMap
• Total execution time of worst ADF BC performing executions
– The performance impact of frequent invoked executions can be much higher than
executions that occur only a few times but are very slow on average
 56

Advanced Graph Example 3:

TreeMap
• Set the label (text) and value attribute (size on map)
 57

Agenda

• Why data visualization is important

• Examples where DVTs are used
• Graph demo: ADF Performance Monitor
• Basic steps creating a graph (ADF11g)
• Special features
– colors, mouseover info, alerts, reference line, animation 3D, clicklistener, hide and
show, stacked graphs, dual graphs, e.g.
• Advanced Graph Examples
– Gauges, Bubble, Spark, Treemap
• Other Tips & Challenges
• 12.1.3 DVT Components
 58

Colors

• Use a color palette to make look and feel of graphs consistent

 59

Challenges ADF DVT < 12.1.3

• Number Formatting a bit difficult

• Date/Time on X-axis a bit difficult
• Axis attributes minorIncrement and majorIncrement does not always
seem to work

• Area graph
– A bit hard too click on data point
 68

Agenda

• Why data visualization is important

• Examples where DVTs are used
• Graph demo: ADF Performance Monitor
• Basic steps creating a graph (ADF11g)
• Special features
– colors, mouseover info, alerts, reference line, animation 3D, clicklistener, hide and
show, stacked graphs, dual graphs, e.g.
• Advanced Graph Examples
– Gauges, Bubble, Spark, Treemap
• Other Tips & Challenges
• 12.1.3 DVT Components
 69

ADF 12.1.3. Data Visualization

Components
• Since ADF11g R1 (2008)
• Since ADF 12.1.3 (2014)
Over 30+ (improved)
chart types
• Mobile first design/touch
support
• Improved Server
Scalability
• Redesigned zoom
and scroll
• Much Simpler Styling
 70

New Gauges

• Gauge types
– LED
– status meter
– Dial
– new rating gauge
– Supports input (Rating only)
 71

New Designed Zoom and

Scroll
 72

Improved Time axis

 73

Marquee zoom and selection

 74

Time Line

• Visualize Events on an Interactive Timeline

• Support for time duration (yet MAF only, ADF will have it soon as well)
 75

TimeLine
 76

Thematic Map - New Features

• Image markers (option to set the orientation)

• Smart data zooming
• Drill down
• Support for custom base maps
• Hide area layer
• Marker locations
can be updated
 77

New Visualization: Diagram

 78

New Visualization: Nbox

(Yet MAF only)
• Visualizes and compares data across two dimensions
• Supports various options for color coding, marker shapes, and grouping
 79

ADF Faces Component Demo

• http://jdevadf.oracle.com/adf-richclient-demo/faces/index.jspx
 80

Graph and Chart: Migration

Strategy
• Going forward, all the new features are introduced in DVT Charts
• Old Graph and Gauge tags deprecated in cases where the new tags are
available
• Editing existing data-bound instances of deprecated tags is still supported
 81

Challenges

• Data integrity (extremely max values or extremely low values)

• Sometimes better AVG values to get more insight
• Do not use too many data points
• Make graphs understandable; tell the end-user what is showed
– clear legend
– mouseover message
– set X and Y title
• Keep it simple (!)
 82

Learn More

• https://blogs.oracle.com/data-visualizations/
• http://technology.amis.nl/
• http://jdevadf.oracle.com/adf-richclient-demo/faces/index.jspx
• http://www.oracle.com/webfolder/ux/middleware/alta/index.html
83