Adding 3rd-Party Visualizations to OBIEE Kevin McGinley

Transcription

1 Adding 3rd-Party Visualizations to OBIEE Kevin oranalytics.blogspot.com youtube.com/user/realtimebi

2 The VCU (Visualization Cinematic Universe) A OBIEE SampleApp BI MAD EID 2

3 3

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

5 Why Add New Visualizations To OBIEE?

6 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 6

7 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 7

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

9 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. 9

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

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

12 Considerations For Adding New Visualizations

13 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) 13

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

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

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

17 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 17

18 Compare/Contrast Remote Server 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 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 $$$ Local Server 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 $$$ 18

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

20 Call Deployed Application Using Narrative Views

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

22 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) 22

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

24 Deploy To WebLogic As An Application Copy folder path on server into install application assistant. 24

25 Deploy To WebLogic As An Application Install the folder as an application. 25

26 Deploy To WebLogic As An Application Target the deployment to the entire cluster. 26

27 Deploy To WebLogic As An Application Install the folder as an application. 27

28 Deploy To WebLogic As An Application Activate the changes. 28

29 Deploy To WebLogic As An Application Start servicing all requests for the application. 29

30 Deploy To WebLogic As An Application Files are now accessible at server:port/folder. 30

31 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 31

32 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 syntax Postfix One-time text that comes after the narrative body 32

33 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 33

34 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 34

35 Flot Walkthrough

36 Create A Simple Flot Line Chart 36

37 Working With Time In Flot Flot uses javascript time, which calculates milliseconds since 1/1/ :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), CAST(CAST("Time"."T00 Calendar Date" AS VARCHAR(20)) as TIMESTAMP)) Flot TS CAST(TIMESTAMPDIFF(SQL_TSI_SECOND, CAST('01- Jan-1970' as TIMESTAMP), CAST(CAST("Time"."T00 Calendar Date" AS VARCHAR(20)) as TIMESTAMP)) as DOUBLE PRECISION)*

38 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 38

39 Dynamic Time And Rows To Display 39

40 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 40

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

42 Postfix Code Continued 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 42

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

44 Drag-To-Zoom In Action 44

45 D3 Walkthrough

46 Let s Start With Something Simple 46

47 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 47

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

49 Let s Pivot The Chart 49

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

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

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

53 Let s Add Axis Labels! 53

54 Prefix And Narrative Code Additional CSS to format the x and y- axis An array with multiple values and labels 54

55 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 55

56 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 56

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

58 Prefix And Narrative Code Additional CSS for the bullet chart Call to additional bullet chart javascript functions A more complex data array 58

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

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

61 Visit oranalytics.blogspot.com For More