Data Visualization (D3) in OBIEE 11g

One of the great features of Oracle's Business Intelligence 11g foundation is the ability to integrate external applications through the use of java script libraries.Today we're going to expand on this functionality by integrating third party(open source) data visualization java script library used for data manipulation ie D3. To describe, its Data Driven Documents.

Oracle have added powerful new data visualization capabilities that turn raw data into insightful information.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.  For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

You can download or get the D3 files (HTML) online.These files contain the basic code of creating visual designs like Bar Column, Candlestick, Pie, Doughnut, Funnel etc. After downloading this file, either we can directly make an external call to it or we can place it in OBIEE server at following location (You can check with your admin to see if file needs to be placed on some other location also) :

user_projects\domains\bifoundation_domain\servers\bi_server1\tmp\_WL_user\analytics_11.1.1\7dezjl\war\res\

In order to embed a D3 visualization in OBIEE you’ll need to first create  sample report and then use a Narrative view to display products Transaction count via Region (example). This will enable you to gain access to the data that we need to drive our visualization using the @n substitution variables where n equals the column position in the criteria or in the array.

So let's create a simple report of Region, Product & its selling count. Now in Narrative View, we will try to create a doughnut design displaying Region wise Count spread.
In the Prefix section at the top we will declare a JavaScript array variable called “n” that will contain the data from the analysis like this:

var n=[];

This array will hold Data elements like below:

The Narrative section should contain the following code :

n.push({Count:@2, LegendText:"@1",indexLabel:@2});

where @1, @2 substitute for  Region & Transaction Count respectively and will dynamically generate the JavaScript to populate our array. LegendText tag is used to show the Regions in Legend, and IndexLabel is to show data value in Index.

 Now in Postfix section,we have to write load of JavaScript code, in which we call the array in a function, mention the font style/color/size, decide the legend style etc. It should look similar to below. You can modify it further as required.

Now if you see the final output: