Author: GeoWise User Support Released: 05/07/2013 Version: How to Embed InstantAtlas TM Reports into Web Pages

Transcription

1 Author: GeoWise User Support Released: 05/07/2013 Version: How to Embed InstantAtlas TM Reports into Web Pages

2 Table of Contents 1. Introduction Embedding the Report Adjusting the Configuration Embedding Individual Report Components for HTML Edition Reports InstantAtlas Support... 9 GeoWise Ltd. 2013

3 1. Introduction 2. Embedding the Report This document 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. This is how the web page looked without a dynamic report (Figure 1): Figure 1 Please note that this guide applies to the InstantAtlas Flash templates only. To embed the HTML Edition Templates, simply upload the dynamic report to a web server and then click on Share in the Menu Bar. Copy and paste the embed link into the webpage you wish to embed the report into. You can adjust the width and height settings within the embed code. These width and height settings should be equal to or greater than the min-width and minheight settings in the ia-report class of the default.css file, otherwise the report will show scrollbars. By default these minimum dimensions are 800 x 600px. It 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. To embed individual report components for HTML5 reports please see section 4. Embedding Individual Report Components for HTML The following example demonstrates how to embed a Single Map report into the old homepage of the InstantAtlas webpage. Note that the process is the same for all InstantAtlas dynamic reports, irrespective of the template used to publish the report. The aim in this example is to replace the image InstantAtlas Desktop Data Visualisation Software for Data Professionals with the dynamic report shown below (Figure 2). GeoWise Ltd Page 1

4 Figure 2 Figure 3 The highlighted part can be deleted and replaced by: To do this, the file called atlas.swf file which is saved in the report folder, needs to be embedded in the HTML code of the web page. The HTML code can be changed using any text editor; however, it is helpful to use a text editor which highlights the HTML syntax (e.g. an HTML editor). <embed src="report/atlas.swf" base="report" width="430" height="320"></embed> Figure 4 This is how the HTML code of the homepage looks like when opened in Textpad. The highlighted part is the code for the linked image that will be replaced by the dynamic report (Figure 3). GeoWise Ltd Page 2

5 The <embed> tag can have several attributes. The attributes used in this example are explained below: Figure 6 Source The src attribute is the only mandatory attribute of the <embed> tag. It has to reference the atlas.swf file of your report. To keep the file structure clean, the InstantAtlas report of this example is located in a subfolder of the web site called report (Figure 5 and Figure 6). Figure 5 Therefore the src attribute for this example has to be: src="report/atlas.swf". If you wish to open the report with a specific indicator loaded or map feature selected you can define URL parameters in the src attribute. For example src="report/atlas.swf?indicator=i2&date=2005" would open the report with the indicator with the id i2 and on the date For further information on URL parameters please refer to the guide called Including parameters in an InstantAtlas TM report URL or contact your support provider. Base While loading, the report needs several files such as the config.xml, the default.css file, the map.swf.xml file and the data.xml file. Even though you defined the path to the atlas.swf file in the src attribute, the web page will GeoWise Ltd Page 3

6 try to load the other report files from the location of the web page (rather than the report folder) unless it is defined differently in the base tag. Figure 7 For this example the base tag has to be base="report" for it to reference the correct location of the report files. Width and height These attributes define the dimensions of the report in the webpage. For this example width and height of the report are set to width="430" height="320". The HMTL file of the webpage can now be saved. After refreshing the page view in the browser it looks like Figure 7. The report loads but only a part of the layout is visible and scrollbars appear. The next section will explain what can be done to improve this view. GeoWise Ltd Page 4

7 The above example explains the embedding of a report from the same server that it sits on. You can also embed a report which sits on a different server by using an absolute link for the src attribute and the base tag, for example: Figure 8 src= base= 3. Adjusting the Configuration If you would like the whole layout of your report to appear without scrollbars in the webpage, you need to adjust the Fixed Width and Fixed Height of the config.xml file. If you open this file in the InstantAtlas Designer you can find these properties in the General Properties under Screen Formatting (Figure 8). Both values need to be at least 20 pixel smaller than the width and height you defined in the embed tag if you do not want report scrollbars to appear in the page. After saving the config.xml file and refreshing the browser view the result looks like seen in Figure 9. GeoWise Ltd Page 5

8 Figure 9 Additionally you might wish to change the style and design of your report to match the look and feel of your web page. All these changes can be made in the Designer and Style Editor. Please refer to the relevant user guides for information on how to do this. In this example the data table, bar chart, time series chart, the logo, the Filter and Help button have been deleted. The map, legend, pie chart and data button have been enlarged and the title text has been reduced in size. A few additional style settings to background and component borders were also changed. The result can be seen in Figure 10. Figure 10 The report no longer requires scrollbars; however, if the space for the report in the web page is quite small as it is in this example, the layout will not be satisfying: images and text might appear too big while buttons are too small to contain their labels. If you choose a small window for your report to appear in the page, you might want to consider removing certain report components and table columns. GeoWise Ltd Page 6

9 4. Embedding Individual Report Components for HTML Edition Reports It is also possible to embed individual report components into a webpage from your HTML reports. 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 Figure 11 below. 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 resize it so that it fills the whole of the report extent (Figure 12). Figure 12 Figure 11 To avoid scrollbars later, 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 iareport and are called min-width and min-height (Figure 13). GeoWise Ltd Page 7

10 Figure 13 Figure 14 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: 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, see Figure 13. Using this same method you can also embed different report components by creating multiple config.xml files. <iframe src='./atlas.html?config=./config_map' style='width:430px;height:320px;borderwidth:0px'></iframe> GeoWise Ltd Page 8

11 5. InstantAtlas Support You can find IA support resources at InstantAtlas customers can login to their My InstantAtlas account at and download a wide range of support resources and access a searchable knowledgebase. If these resources do not provide a solution, please contact your support provider. GeoWise Ltd Page 9