Oracle Developers
Published in

Oracle Developers

Embedding Oracle Analytics — What are the Options?

Introduction

Embedding analytics, where it is relevant, adds value ‘in context’. For example, embedding analytics on typical business expenditure within an application for reviewing and approving expenses can save time and resource. Embedding can also be used to build custom web or mobile analytic applications or share insight on a corporate portal or website.

Custom App Built with Embedded Oracle Analytics, HTML, CSS and JavaScript

Options for Embedding Oracle Analytics

Oracle Analytics provides a number of options for embedding insight. These include the use of iFrames or a JavaScript embedding framework that offers greater flexibility and programmatic control over the embedded content and can be of benefit to a custom built application. Since embedding usually involves including content from an ‘external’ source, it is required to enter ‘Safe Domains’ within the relevant applications due to Cross Origin Resource Sharing (CORS) standards. Oracle Analytics also offers the ability to use ‘vanity URLs’ that can also be useful when dealing with cross-domain embedding scenarios.

Embedding with iFrames

An iFrame is a way of embedding content from an external source in an application or web page. This is the easiest way to embed analytics, referencing the URL of the analytics project in the iFrame ‘src’ parameter.

The URL used to reference the analytics project will look like this:

https://<OracleAnalyticsInstance>-ia.analytics.ocp.oraclecloud.com/ui/dv/?pageid=visualAnalyzer&reportmode=presentation&reportpath=<PathToProject>

This method can also be used to embed analytics into an application that may use a different technology or framework to Oracle Analytics by sandboxing the analytics content. The iFrame approach is also used when embedding ‘classic’ content from Oracle Analytics such as dashboards and reports.

Embedding with the Oracle Analytics JavaScript Framework

Oracle Analytics Data Visualization (DV) is built using a JavaScript toolkit called Oracle JET. As a result, Oracle Analytics offers a framework for embedding analytics that can be suited to custom applications or scenarios where more programmatic control is required.

The embedding framework consists of a JavaScript file ‘embedding.js’ that contains all the necessary libraries and a tag ‘<oracle-dv> ‘ that is used in HTML and references the content to embed in addition to providing various options that control the embedded view or apply filters. Each analytics project provides the relevant references to use for embedding from the ‘Developer’ menu.

Oracle Analytics Developer Menu with Embedding References

The Developer menu provides an instance specific link to the embedding.js library that must be used in the HTML for the page where you are embedding analytics (don’t download this file locally, since it is updated regularly). There are two options for <embeddingMode>, depending on whether you are using Oracle JET or not. If you are not using Oracle JET, you use the ‘standalone’ link to embdding.js and that will provide your HTML access to the required libraries.

The <oracle-dv> tag is added to a <div> in your HTML (make sure to use a specific ‘style’ if you cannot see any analytics where you would expect in your application or on your web page). Lastly, there is a requirement to reference the required libraries and apply bindings since Oracle Analytics uses require.js for dependency management and Knockout.

Here is an example of the resulting HTML:

<!DOCTYPE html>
<html dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Embedded Oracle Analytics Project Example</title><script src="https://<instance>.analytics.ocp.oraclecloud.com/public/dv/v1/embedding/<embedding mode>/embedding.js" type="application/javascript">
</script>
</head>
<body>
<h1>Embedded Oracle Analytics Project</h1>
<div style="border:1px solid black;position: absolute; width: calc(100% - 40px); height: calc(100% - 120px)" >
<!-- The following tag is the tag that will embed the specified project. --><oracle-dv
project-path="<project path>"
active-page="canvas"
active-tab-id="1">
</oracle-dv>
</div><!-- Apply Knockout bindings after DV project is fully loaded. This should be executed in a body onload handler or in a <script> tag after the <oracle-dv> tag. --><script>
requirejs(['knockout', 'ojs/ojcore', 'ojs/ojknockout', 'ojs/ojcomposite', 'jet-composites/oracle-dv/loader'], function(ko) {
ko.applyBindings();
});
</script>
</body>
</html>

You can get more information and examples of this embedding method here and here.

Embedding into Oracle Visual Builder

Oracle Visual Builder is a low code application development tool that makes use of Oracle JET UI components to provide a way to build both web and mobile applications. Visual Builder is an extendable platform and Oracle Analytics provides a web component in the Visual Builder exchange that makes it easy to embed content from Oracle Analytics into a Visual Builder application (search for ‘analytics’ or ‘oj-oa-project’ in the VB exchange).

Oracle Analytics Embedding Web Component in Visual Builder Exchange

On installing the analytics component to a Visual Builder application, it will appear in the component list and can be dragged onto an application page. The analytics component manages the components of the JavaScript embedding framework described earlier within the context of a Visual Builder application and simplifies the process by providing property fields and check-boxes to tailor the required options used for analytics embedding.

Using the Oracle Analytics Embedding Web Component in a Visual Builder Application

Summary

This blog has provided a quick tour of the various options for embedding Oracle Analytics. The use of iFrames that reference the analytics content URL is a quick way to embed analytics insight, in context, within an application or webpage. For a more programmatic approach to embedding, the JavaScript embedding framework offers greater flexibility and control. For a low-code / no-code approach to building analytic applications, the analytics web component in the Visual Builder exchange offers an easy method to embed.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mike Durran

Mike Durran

Analytics Product Manager at Oracle. [All content and opinions are my own]