Introduction

This guide describes how to embed a dynamic report into a web page.  It is assumed that you have read the Designer section and the Style Editor section of the InstantAtlas Desktop User Guide prior to reading this document. It is also helpful to have basic knowledge of HTML.

How to Embed a Complete Report

To embed a dynamic report simply upload it to a web server and then click on the Share button in the Menu Bar.

Copy and paste the embed report link into the webpage you wish to embed the report into.

<iframe src='http://www.instantatlas.com/demos/v6/v674/HTML/US/sm/atlas.html' style='width:800px;height:600px;border-width:0px'></iframe>

The embed link includes default settings for the report width and height but you can adjust these settings manually. These width and height settings should be equal to or greater than the ‘min-width’ and ‘min-height’ settings in the ‘ia-report’ class of the default.css file, otherwise the report will show scrollbars. The default minimum report dimensions are 600px 600px. If you are the administrator of the report you can change these through the Designer or Style Editor but you should be aware that some components may not look good in a smaller frame, i.e. the component itself may show scrollbars, wrapped text etc. In this case, it might be in your interest to activate the Responsive Design setting. This would allow the report to change its layout automatically  for optimal viewing in smaller frame.

Embedding Individual Report Components

It is also possible to embed individual report components into a webpage from your InstantAtlas dynamic report. The method follows from using the embed link given from the ‘Share’ option in the published HTML dynamic report, but specifying a different config.xml file in the source URL. The following example will show you how to embed just the map component into your webpage as shown in below image.

To do this you will first need to create a new configuration file containing just the component you wish to embed. Take a copy of the original configuration file (config.xml) from the published report, deleted all components apart from the one you wish to embed, e.g. the Map, and re-size it so that it fills the whole of the report extent.

For better viewing experience, it is advised to set the minimum width and height of the report to the same size or lower than you want the component to appear in your website. These settings can be found in the style class ‘ia-report’ and are called ‘min-width’ and ‘min-height’.

Now save your changes. The file should be saved into the report folder but it should have a distinct name e.g. config_map.xml.

The code that now needs to be inserted into the webpage is as follows:

<iframe src='./atlas.html?config=./config_map' style='width:430px;height:320px;border-width:0px'></iframe>

The report and the modified config_map.xml file are located in the same folder as the webpage. The width and height need to be the same or higher than that defined in the style class ‘ia-report’ which has been chosen to avoid scroll bars.

Using this same method you can also embed different report components by creating multiple config.xml files.