Skip to main content

Embedding Oracle Analytics content in web pages (part 1)

In many occasions analytics systems users expect that analyses or parts of analyses would be available for the public, exposed through public web pages. And in many instances, this is not so easy to achieve due to security and probably some other reasons. 


With Oracle Analytics, we have an option to give public users secure access to analyses we maybe want to share publicly. Exposing content such as charts, graphs and other data visualisations in a web page, portal, Oracle APEX and similar systems has been available for a while. 


With the latest versions of Oracle Analytics, token-based authentication in now also supported. In this first blog in this series, we will take a look, how to prepare a HTML file which will present embedded Oracle Analytics project. To start with, we need a web server. For the development it doesn’t have to be really sophisticated one, therefore, I am using a simple apache server installed on my laptop. 


We will also need an analysis that was created in Oracle Analytics. I will use an analysis which I created in one of my previous blogs, Custom Map Layer.



We can now start preparing a web page web page in which we will embed our analysis.


Let’s create a new HTML file, and let’s call it EmbedAnalysis.html.


 

We need to add some code snippets that are needed to display the content. You can get those code snippets from your analysis.


Open your analysis project and navigate in actions menu on the right to Developer.


 


In Developer window, navigate to Embed tab. We can observe two code snippets that can simply copied and pasted them into the html file.


First snippet is <script> tag.


 


Pay attention to the <embeddingMode> in the URL. We need to replace it either by “jet” if we are running this html where Oracle JET is installed, or “standalone” if Oracle JET is not used. In our example, we don’t have Oracle JET, so we need to set <embeddingMode> to standalone. 


<script src="https://oracleanalyticsbootcamp-frly8pi3k85f-fr.analytics.ocp.oraclecloud.com/public/dv/v1/embedding/standalone/embedding.js" type="application/javascript">
</script>


Of course, analytics instance URL obviously also have to be changed.


We will copy <script> tag into <head> section of the html file.


The second code snippet is <oracle-dv> tag. 

You can simply copy it into <body> section of the html file.


<oracle-dv project-path="/@Catalog/shared/Demos/Custom Map Layer DEMO/Custom Map Layer">
</oracle-dv>


As you can see this snippet specify a project which we are embedding. We could extend this code to specify which canvas should be displayed (if there are more canvases available) 


<oracle-dv project-path="/@Catalog/shared/Demos/Custom Map Layer DEMO/Custom Map Layer" active-page="canvas" active-tab-id="1">
</oracle-dv>


or even display a story page for a story we prepared:


<oracle-dv project-path="/@Catalog/shared/Demos/Custom Map Layer DEMO/Custom Map Layer" active-page="insight" active-tab-id="31285856-4941-46aa-94f2-ee108adacc64">
</oracle-dv>


Let’s present the story. But before that, there is one piece missing, we need to add additional <script> tag after <oracle-dv>. You can find this code in Oracle Analytics documentation:


<script>
requirejs(['knockout','ojs/ojcore','ojs/ojknockout','ojs/ojcomposite','jet-composites/oracle-dv/loader'], function(ko){ko.applyBindings();})
</script>


Simply copy and paste it into html file.


EmbedAnalysis.html file now looks like this:


 


Before we publish this web page with web server, we need to set Safe domains on Oracle Analytics instance.


In this example, we are running local web server under http://localhost. This means this should be registered with Safe domains.


In Oracle Analytics, navigate to Console and then choose Safe Domains.




Enter the domain from which you are accessing Oracle Analytics instance, for example: 


 


Do not forget to check Embedding checkboxes on the right.


Well, we are no ready to test our web page. Open browser and enter URL pointing to EmbedAnalysis.html:


First, web page is displayed with login link. Note that we are not solving authentication just yet, therefore users have to login first. Note also, this will be needed only at first attempt, later cookies will store login information of the session.


Anyway, your web page should look like this:



Click Login to open login screen and enter your credentials.


 


Enter your credentials and click on Sign In.


Analysis content is now displayed as specified in <oracle-dv> tag.


 


This also concludes this session. We will look at token authentication which can be used for public web sites where it is not expected to provide username and password to access analysis in the next post.