Add More Visualization Capabilities To OBIEE

www.redpillanalytics.com info@redpillanalytics.com @RedPillA © 2014 RED PILL Analytics
Add More Visualization
Capabilities To OBIEE
2
KEVIN MCGINLEY
medium.com/kevin_mcginley @kevin_mcginley linkedin.com/in/kevinmcginley

About Red Pill Analytics
Capacity Analytics
Agile Cloud Development for Oracle BI & Analytics
!
Checkmate
DevOps for Oracle BI
!
Single Doses
Training + Strategy + Solutioning + Infrastructure + Support
3

Real Time BI with Kevin & Stewart
•19 episodes over the last 2
years
•Featured guests from the
Oracle BI & EPM industry
•Published on iTunes and
YouTube
•Join us at the Thursday
Deep-Dive session from
9-11am for a LIVE show that
will be simultaneously
broadcast online!
4

Contents
•Why Add New Visualizations To OBIEE?
•Considerations For Adding New Visualizations
•Call Deployed Application Using Narrative Views
•Flot Walkthrough
•D3 Walkthrough
6

Why add new visualizations to
OBIEE?

Existing OBIEE Visualizations
•Table
•Pivot Table
•Bar Chart
•Line Chart
•Area Chart
•Pie Chart
•Line-Bar Chart
•Pareto Chart
•Scatter Chart
•Bubble Chart
•Radar Chart
•Waterfall Chart
•Gauge Chart
•Funnel Chart
•Map
•Performance
Tile
•Ticker
•Narrative
•Trellis
• Bar
• Line
• Area
• Line-Bar
• Pie
• Scatter
• Bubble
• Spark
8

Why Add New Visualizations?
•Leverage additional
functionality over existing
OBIEE view types
•Visualize data in a way
OBIEE cannot and gain new
insights
•Also…generate excitement
and increase user adoption
9

Add New Functionality
10
Chart legend
inside chart
Multiple Y-
axis scales

Add New Functionality
11
Crossfilter Flot
Drag the handles
to filter all
objects on a
certain time of
day, delay,
distance, or date
range.
Highlight a range in the
summary line chart to
zoom the detail line chart.

Add New Visualizations
12
Timeline
Calendar (D3) Treemap (D3) Sunburst (ADF)
Bullet Chart (D3)

Add New Visualizations
13
Motion Chart (Google) Motion Chart (D3)

Considerations For Adding New
Visualizations

Three Types Of Visualization Engines
•Call to a remote server (outside firewall)
•Call to software on another server (inside firewall)
•Call to an engine deployed locally on the BI server or
another application server (inside firewall)
16

Remote Server (Outside Firewall)
17
WebLogic
OBIEE
Remote
Visualization
Engine
Firewall
Data to generate the
visualization is passed
through the firewall to
an API.
The visualization is
passed back as an
embedded web
object.
Database
DW
Data to satisfy the
logical SQL is passed
to OBIEE.

Internal Server
Internal Software Server (Inside Firewall)
18
WebLogic
OBIEE
Visualization
Engine
passed to OBIEE as a
data or web object.
OBIEE makes a call to a service,
API, or data structure.
Database
DW Data to generate the
visualization is passed
to the engine (may go
through BI Server).

Deployed Application On OBIEE Server (Inside Firewall)
19
WebLogic
OBIEE
Deployed
Visualization
Engine
Data to generate the
visualization is
pushed into a
javascript array.
rendered in OBIEE
using javascript.
Database
DW
Data to satisfy the
logical SQL is passed
to OBIEE.

How Well Do 3rd-Party Engines Integrate Into OBIEE?
•Some integrate into dashboards seamlessly using standard
OBIEE functionality, some are more of an iFrame approach
•Row-level data security may be challenging where the
data is processed externally from the OBIEE front-end
•OBIEE “application” functionality (print, export, navigate,
prompts, dashboard customizations, hover, interact) may
not work seamlessly depending on the engine
• New SampleApp includes java code to help improve some of this
•Some engines may have browser requirements that
conflict with OBIEE browser support or the standard
browser adopted by the user
20

• Typically well documented
and and usually well
supported
• Data security is a mild
concern
• Processing occurs on a
second server but network
latency exists
• Enhancements/upgrades
are managed
• Typically $$$
• Not always well
documented nor well
supported
• Data security is not a
concern
• Processing occurs on the
same server, which could
degrade overall server
• Enhancements/upgrades
are managed
• Free or $$$
Compare/Contrast
21
• Typically well
documented, though not
necessarily supported
• Data security is a
legitimate concern
• Processing occurs on
another server but over
the internet
• Risk of unexpected
changes or upgrades
• Free or $$$
Internal Server Local ServerRemote Server

Some Examples
22
Internal Server Local ServerRemote Server

Call Deployed Applications Using
Narrative Views

How To Enable Visualization Engine (Local)
•Deploy files on the server
•Build your criteria
•Call the deployed files in a narrative view
24

Server Setup And Files
•Download the files for the visualization engine
•Place files in a new or existing (analyticsRes) application
folder on the server
•If new, deploy folder in WebLogic Server as an
application
•Create or edit CSS files for consistent formatting
(optional)
25

Deploy To WebLogic As An Application
26
Copy WEB-INF folder
from analyticsRes to…
…visualization
directory on the
server.

27
Copy folder path on
server into install
application assistant.

28
Install the folder as an
application.

29
Target the deployment
to the entire cluster.

30
Install the folder as an
application.

31
Activate the changes.

32
Start servicing all
requests for the
application.

33
Files are now
accessible at
server:port/folder.

Criteria Notes
•Dates
• Different visualization engines handle date/time data differently
• Don’t assume it works like the Oracle DB or OBIEE
•Data Formatting
• Remove value formatting like currency, commas, percentages,
etc.
• Again with date/time, you may need to remove the formatting
•Strings
• Be conscious of the use of spaces, commas, special characters in
your text values
34

Narrative View
•Prefix
• One-time text that comes
before the narrative body
•Narrative
• Text that is repeated for every
record in the report (or based
on “Rows to display”)
• Can reference criteria columns
using “@#” syntax (eg, @1)
•Postfix
• One-time text that comes
after the narrative body
35

Example Narrative View With D3 Code
36
Checkbox renders text
as web code.
Prefix: CSS, script,
data array
Narrative: push data
into data array
Postfix: D3 code to
render visualization

Narrative Notes / Suggestions
•Despite the following walkthroughs, consider the
following:
•Define CSS and reference in deployed files to maintain
consistency
•Deploy as much javascript as possible to deployed files to
keep Narrative views simple and consistent
•Leverage examples on the internet to jump-start your
efforts, but…
•Large scale use of javascript-based visualizations should
involve knowledgable java programmers to avoid poor
performing objects on dashboards
37

Create A Simple Flot Line Chart
39

Working With Time In Flot
!
•Timestamp:
CAST(CAST("Time"."T00 Calendar Date" AS
VARCHAR(20)) as TIMESTAMP)
•Base Timestamp
CAST('01-Jan-1970' as TIMESTAMP)
•TS Diff
TIMESTAMPDIFF(SQL_TSI_SECOND, CAST('01-
Jan-1970' as TIMESTAMP),
VARCHAR(20)) as TIMESTAMP))
•Flot TS
CAST(TIMESTAMPDIFF(SQL_TSI_SECOND,
CAST('01-Jan-1970' as TIMESTAMP),
VARCHAR(20)) as TIMESTAMP)) as DOUBLE
PRECISION)*1000
40
Flot uses javascript time (milliseconds since 1/1/1970 12:00am)

Prefix, Narrative, And Postfix Code
41
Reference deployed
Flot .js files and init
data array
Push data into the
array using Narrative
section looping
Basic Flot call with div
to render the chart

Dynamic Time And Rows To Display
42

Two Charts With Master-Detail Linking Using Drag-To-Zoom
43
New CSS file reference
and Flot selection.js
script
You can place your
chart options in a var
and reference

Postfix Code Continued
44
Storing the overview
chart in a variable with
options inline

Postfix Code Continued
45
Use a .bind to have
placeholder listen to
overview
Re-plot placeholder
based on the zoom
range
Don’t re-plot overview
when zoom range is
set

Postfix Code End
46
A more complex div to
render the two charts

Drag-To-Zoom In Action
47

Let’s Start With Something Simple
49

Prefix and Narrative Code
50
CSS for the
visualization (can be
referenced)
Reference D3 .js file
already deployed on
SampleApp
Same data array push
as Flot

Postfix Code
51
D3 “scaling” to
translate data values
into pixels
D3 “select” to render
each bar one at a time

Let’s Pivot The Chart
52

Prefix And Narrative Code
53
Switching to SVG for
more flexibility in
rendering
Slightly different CSS
for rect and text

Postfix Code Start
54
A different scale
structure pivots the
chart
D3 select sets SVG
attributes
A different way to
calculate each bar
width

Postfix Code End
55
SVG transform and
translate to position
each bar
SVG rect call to render
each bar top-to-
bottom
SVG text call to render
labels in bars at
specific position

Let’s Add Axis Labels!
56

57
Additional CSS to
format the x and y-
axis
An array with multiple
values and labels

Postfix Code Begin
58
Margins to leave space
for the x and y-axis
around chart
D3 ordinal scaling
handles Brand labels
SVG axis calls define
each axis

Postfix Code End
59
Basic D3 select into a
chart variable
Render x-axis
Render y-axis
Render bars aligned to
Brand value order in x-
axis

The Bullet Chart (Eat Your Heart Out, Stephen Few)
60

61
Additional CSS for the
bullet chart
Call to additional
bullet chart javascript
functions
A more complex data
array

Postfix Code Begin
62
A call to a function in
bullet.js to handle the
complex render

Postfix Code End
63
Additional code to
render the metric title
and subtitle

Add More Visualization Capabilities To OBIEE

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (14)

Recently uploaded

Recently uploaded (20)

Add More Visualization Capabilities To OBIEE