Creative Me: Javascript

Wednesday, September 07, 2016

Different Tool tip for different column values in OBIEE11g/12c

In OBIEE 11g or 12c, we can add ToolTip to the report on columns. Last week i had a requirement to display different tooltips/text on every column value to users when user hovers on different row in that column of a report.
This is not an OBIEE feature. To get a solution to it, we can try using Javascript in Narrative view. But i tried a different solution.

Req: We have to display different text over different column values. For example below, we have to show Response values in ToolTip, when users hovers over the Product column. Responses can differ.

Step 1: So we created a Dummy KPI in RPD, called Responses and stored the different values (Good/Fair etc ) in it.
Step2: Now in Obiee Report, over the Product column made few changes:
     a) In the 'Column Properties' , under 'Data Format' tab, I am choosing HTML
   b) In column edit formula wrote below:

<HTML> <span title= ' || "Dim"."Responses"|| '>' || "Dim"."Product" ||' </span> <HTML>

Note:
i) You can skip using HTML.
ii) You can write a Case formula in place of Product column, ie column on which you want the hover text.
iii) For Numeric column value, use Cast function to convert it to Char().

Courtesy: Google

Wednesday, July 13, 2016

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:

Blog Categories

Wednesday, September 07, 2016

Different Tool tip for different column values in OBIEE11g/12c

Courtesy: Google

Wednesday, July 13, 2016

Data Visualization (D3) in OBIEE 11g