OBIEE Viz

Adding 3rd-Party Visualizations to OBIEE
Kevin McGinley
!
@kevin_mcginley | kevin.mcginley@accenture.com
oranalytics.blogspot.com | youtube.com/user/realtimebi
The VCU (Visualization Cinematic Universe)
OBIEE SampleApp BI MAD EID

Copyright 2013 Accenture All rights reserved. 2
Contents
Why Add New Visualizations To OBIEE?

Considerations For Adding New Visualizations
Call Deployed Application Using Narrative Views
Flot Walkthrough
D3 Walkthrough

Why Add New Visualizations To OBIEE?
Existing OBIEE Visualizations
Table Bubble Chart Trellis

Pivot Table Radar Chart - Bar
Bar Chart Waterfall Chart - Line
Line Chart Gauge Chart - Area
Area Chart Funnel Chart - Line-Bar
- Pie
Pie Chart Map
- Scatter
Line-Bar Chart Performance Tile
- Bubble
Pareto Chart Ticker
- Spark
Scatter Chart Narrative

Why Add New Visualizations?
Leverage additional functionality over

existing OBIEE view types
Visualize data in a way OBIEE cannot
and gain new insights
!
!
Alsogenerate excitement and increase
user adoption

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

Add New Functionality
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
Timeline Bullet Chart (D3)
Calendar (D3) Treemap (D3) Sunburst (ADF)

Add New Visualizations
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)

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

service, API, or data structure.
WebLogic Internal Server
Visualization
OBIEE
Engine
Database
The visualization is
passed to OBIEE as
a data or web Data to generate
object. DW the visualization is
passed to the
engine (may go
through BI Server).
Deployed Application On OBIEE Server (Inside Firewall)
Data to generate
the visualization is
pushed into a
javascript array.
Database WebLogic
Deployed
DW OBIEE Visualization
Engine
Data to satisfy the The visualization is

logical SQL is rendered in OBIEE
passed to OBIEE. using javascript.

How Well Do 3rd-Party Engines Integrate In 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

Compare/Contrast
Remote Server Internal Server Local Server

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

Some Examples
Remote Server Internal Server Local Server
Internal Server Local Server

Call Deployed Application 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

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)

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

Copy folder path on

server into install
application assistant.

Install the folder as

an application.

Target the
deployment to the
entire cluster.

Install the folder as

an application.

Activate the
changes.

Start servicing all

requests for the
application.

Files are now

accessible at
server:port/folder.

Criteria Notes
Dates
Different visualization engines handle date/time data differently
Dont 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

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

Example Narrative View With D3 Code
Checkbox renders
text as web code.
Prefix: CSS, script,

data array
Narrative: push data

into data array
Prefix: 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

Flot Walkthrough
Create A Simple Flot Line Chart

Working With Time In Flot
Flot uses javascript time, which

calculates milliseconds since
1/1/1970 12:00am
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

Prefix, Narrative, And Postfix Code
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

Two Charts With Master-Detail Linking Using Drag-To-Zoom
New CSS file

reference and Flot
selection.js script
You can place your

chart options in a var
and reference

Postfix Code Continued
Storing the overview

chart in a variable
with options inline

Postfix Code Continued
Use a .bind to have

placeholder listen to
overview
Re-plot placeholder
based on the zoom
range
Dont re-plot
overview when zoom
range is set

Postfix Code End
A more complex div

to render the two
charts

Drag-To-Zoom In Action

D3 Walkthrough
Lets Start With Something Simple

Prefix and Narrative Code
CSS for the

visualization (can be
referenced)
Reference D3 .js file

already deployed on
SampleApp
Same data array

push as Flot
Postfix Code
D3 scaling to
translate data values
into pixels
D3 select to render
each bar one at a
time

Lets Pivot The Chart

Prefix And Narrative Code
Slightly different CSS

for rect and text
Switching to SVG for

more flexibility in
rendering

Postfix Code Start
A different scale
structure pivots the
chart
D3 select sets SVG

attributes
A different way to
calculate each bar
width

Postfix Code End
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

Lets Add Axis Labels!

Additional CSS to
format the x and y-
axis
An array with
multiple values and
Copyright 2013 Accenture All rights reserved.
labels 54
Postfix Code Begin
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
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)

Additional CSS for

the bullet chart
Call to additional
bullet chart javascript
functions
A more complex data

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

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

Visit oranalytics.blogspot.com For More

OBIEE Viz

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

OBIEE Viz

Încărcat de

Drepturi de autor:

Formate disponibile

Adding 3rd-Party Visualizations to OBIEE

OBIEE SampleApp BI MAD EID

Why Add New Visualizations To OBIEE?

Copyright 2013 Accenture All rights reserved. 4

Table Bubble Chart Trellis

Copyright 2013 Accenture All rights reserved. 6

Leverage additional functionality over

Copyright 2013 Accenture All rights reserved. 7

Copyright 2013 Accenture All rights reserved. 8

Drag the handles to

Highlight a range in the

Timeline Bullet Chart (D3)

Calendar (D3) Treemap (D3) Sunburst (ADF)

Motion Chart (Google) Motion Chart (D3)

Copyright 2013 Accenture All rights reserved. 11

Call to a remote server (outside firewall)

Copyright 2013 Accenture All rights reserved. 13

OBIEE makes a call to a

Data to satisfy the The visualization is

Copyright 2013 Accenture All rights reserved. 16

Some integrate into dashboards seamlessly using standard OBIEE

Copyright 2013 Accenture All rights reserved. 17

Remote Server Internal Server Local Server

Copyright 2013 Accenture All rights reserved. 18

Remote Server Internal Server Local Server

Internal Server Local Server

Copyright 2013 Accenture All rights reserved. 19

Deploy files on the server

Copyright 2013 Accenture All rights reserved. 21

Download the files for the visualization engine

Copyright 2013 Accenture All rights reserved. 22

Copyright 2013 Accenture All rights reserved. 23

Copy folder path on

Copyright 2013 Accenture All rights reserved. 24

Install the folder as

Copyright 2013 Accenture All rights reserved. 25

Copyright 2013 Accenture All rights reserved. 26

Install the folder as

Copyright 2013 Accenture All rights reserved. 27

Copyright 2013 Accenture All rights reserved. 28

Start servicing all

Copyright 2013 Accenture All rights reserved. 29

Files are now

Copyright 2013 Accenture All rights reserved. 30

Copyright 2013 Accenture All rights reserved. 31

Copyright 2013 Accenture All rights reserved. 32

Prefix: CSS, script,

Narrative: push data

Copyright 2013 Accenture All rights reserved. 33

Despite the following walkthroughs, consider the following:

Copyright 2013 Accenture All rights reserved. 34

Copyright 2013 Accenture All rights reserved. 36

Flot uses javascript time, which

Copyright 2013 Accenture All rights reserved. 37

Push data into the

Basic Flot call with

Copyright 2013 Accenture All rights reserved. 38

Copyright 2013 Accenture All rights reserved. 39

New CSS file

You can place your

Copyright 2013 Accenture All rights reserved. 40

Storing the overview

Copyright 2013 Accenture All rights reserved. 41