OBIEE VISUALIZATION – D3J Charts Part1

In this entry, I will be showing you the process of embedding a D3 visualization in OBIEE 11g. I’ve had the pleasure of working on this technology where i have to display some kind of BOM hierarchy using the D3 charts. As a part of POC on this one, i started on simple virtualization taking examples from various websites. I will be sticking on OBIEE development rather that D3, so without further adieu lets start.

What is D3?
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
reference: d3js.org

Embedding Concept
OBIEE has the concept of narrative view in which you can embed your own javascript and view the end results as per your design definition.

Lets’ take a simple example given at rittman’s blog to develop similar application.

Target:
Based on the total sales for each customer each month, customers are placed in the scoring groups

Group 1: Customers for which revenue exceeded £10,000
Group 2: Customers for which revenue exceeded £5,000
Group 3: Customers for which revenue exceeded £2,000
Group 4: Customers for which revenue exceeded £0

At the end of each month we want to compare each customers current scoring group with the scoring group they occupied the previous month. It’s the movement of customers between groups each month that we are interested in analysing.

Lets’ start by creating the above model.

Step 1:

Lets start by creating the appropriate table and data in database;

Step 2:

Import the table in Physical Layer

Step 3:

Create the Business Model and drag the CUSTOMER table twice from physical layer and name one as Customer-T. Drop all the columns except Cust-ID which will serve us in creating a join in BMM.

Step 4: