+ All Categories
Home > Documents > Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive &...

Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive &...

Date post: 06-Mar-2018
Category:
Upload: vumien
View: 242 times
Download: 3 times
Share this document with a friend
74
Creating Intuitive & Interactive Dashboards with the ADF Data Visualization Components Frank Houweling UKOUG 2014
Transcript
Page 1: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

Creating Intuitive & Interactive

Dashboards with the ADF Data

Visualization Components Frank Houweling

UKOUG 2014

Page 2: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

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

Page 3: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

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.

Page 4: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

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

Page 5: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

5

Oracle Alta

• Work Better Application

Page 6: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

6

Fusion Applications

Page 7: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

7

Dashboard interactive graphs

• Dashboard of financial management application for local governments

Page 8: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

8

WLS Enterprise Manager

Page 9: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

9

ADF DVTs in Monitoring Tools

• Database EM

Page 10: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

10

Demo ADF Performance Monitor Dashboard

Page 11: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

11

Demo ADF Performance Monitor Errors Overview

Page 12: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

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) !

Page 13: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

14

Demo ADF Performance Monitor Slow Activation of ApplicationModule

Page 14: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

15

Demo ADF Performance Monitor Slow Passivation of ApplicationModule

Page 15: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

16 Demo ADF Performance Monitor Worst ApplicationModule activations &

passivations overview

• Monitor aggregates of ApplicationModule activations and passivations

– AVG, Occurrences, Total Exec Time, Min, Max

– Zoom in into single executions

Page 16: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

17 Demo ADF Performance Monitor Worst ApplicationModule activations &

passivations overview

Page 17: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

18

Demo ADF Performance Monitor Occurrences overview

Page 18: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

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

Page 19: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

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

Page 20: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

21

Basic Steps Creating a Graph - 2

• Select Category and Graph Type

Page 21: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

22

Basic Steps Creating a Graph - 3

• Select X and Y attributes

Page 22: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

23

Basic Steps Creating a Graph - 4

• Generated code in page

• Generated code in PageDef

Page 23: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

24

Basic Steps Creating a Graph - 5

• Result:

Page 24: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

25

Basic Steps Creating a Graph - 6

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

Page 25: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

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

Page 26: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

27

Basic Steps Creating a Graph - 9

• Position the legend

Page 27: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

28

Basic Steps Creating a Graph - 10

• In PageDefinition

– Change Legend text

– Change mouseover attribute labels

Page 28: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

29

Basic Steps Creating a Graph - 11

• Add Titles

Page 29: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

30

Basic Steps Creating a Graph - 12

• Show Time instead of Date

on X-axis

Page 30: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

31

Basic Steps Creating a Graph - 13

• 12Hide and

Show Behavior

• Click on

legend item

• Graph is

rescaled !

Page 31: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

32

Basic Steps Creating a Graph - 13

• Just add

hideAndShowBehavior="withRescale"

Page 32: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

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

Page 33: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

34

Special Features - 1

• Combination Graph PageDef

Page 34: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

35

Special Features – 2 (Alerts)

• Alerts

– Warn, alert user for something

– Show custom image

– Add mouse over message

Page 35: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

36

Special Features – 2 (Alerts)

Page 36: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

37

Special Features – 2 (Alerts)

Page 37: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

38

Special Features – 3 Reference Line

• Reference Line

– JVM Garbage Collection is considered as very long running when > 20 Seconds

Page 38: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

39

Special Features – 3 Reference Line

• You can make the reference line dynamic with EL expression

Page 39: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

40

Special Features – 4 Custom Label on Axis

• Custom Label on X-axis

– Transient attributes are useful

Page 40: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

41

Special Features – 4 Custom Label on Axis

• Steps custom label on axis:

– Create a Transient

attribute

– Generate the ViewRowImpl

– Add your custom code

Page 41: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

42

Special Features – 4 Custom Label on Axis

• Set the VO transient attribute

as value to the label attribute

of the group item

Page 42: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

43

Special Features - 5

• Three D effect

• Be careful; does it add

value to end-users ?

Page 43: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

44

Special Features - 6

• Animation

• Be careful; does it add

value to end-users ?

Page 44: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

45

Special Features – 7 Make the graph interactive

• Click on graph and zoom in from Day to Hour Overview

Page 45: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

46

Special Features – 7 Make the graph interactive

• Zoom in from Hour to Five Minute Overview

Page 46: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

47

Special Features – 7 Make the graph interactive

Page 47: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

48

Special Features – 7 Make the graph interactive

• Add a

clickListener

• In Managed Bean

Page 48: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

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

Page 49: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

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

Page 51: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

52

Advanced Graph Example 1: Bubble Graph

• ClickListener again to make it interactive and to navigate to detail graph

Page 52: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

53

Advanced Graph Example 1: Bubble Graph

Page 53: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

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/

Page 54: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

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

Page 55: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

56

Advanced Graph Example 3: TreeMap

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

Page 56: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

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

Page 57: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

58

Colors

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

Page 58: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

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

Page 59: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

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

Page 60: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

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

Page 61: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

70

New Gauges

• Gauge types

– LED

– status meter

– Dial

– new rating gauge

– Supports input (Rating only)

Page 62: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

71

New Designed Zoom and Scroll

Page 63: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

72

Improved Time axis

Page 64: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

73

Marquee zoom and selection

Page 65: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

74

Time Line

• Visualize Events on an Interactive Timeline

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

Page 66: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

75

TimeLine

Page 67: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

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

Page 68: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

77

New Visualization: Diagram

Page 69: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

78

New Visualization: Nbox (Yet MAF only)

• Visualizes and compares data across two dimensions

• Supports various options for color coding, marker shapes, and grouping

Page 71: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

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

Page 72: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

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 (!)

Page 74: Creating Intuitive & Interactive Dashboards with the ADF ... · PDF fileCreating Intuitive & Interactive Dashboards with the ADF Data ... •Graph demo: ADF Performance Monitor

83


Recommended