Spotfire Tips&Tricks: Embed Spotfire visualizations on Webpages

Back to Tips & Tricks page

Overview

Spotfire is the industry leader in creating sophisticated visualizations having detail drill-downs with drag-and-drop, right-click-and-configure functionality. The tool supports a host of pertinent visualizations such as KPI charts, Box Plots, Map charts etc. and customizations are possible on each of them. Creating the same visualizations from scratch to be embedded in webpages would take at minimum weeks of complex programming work. So often a Spotfire user is daunted by the lack of user-friendliness, flexibility and options in configuring the same visualizations on their webpages as they see in their analysis.

This article is aimed at providing the structure to take the visualization and pages inside a Spotfire analysis and embed them on a webpage. Such a web page setup can then be dropped into any of your webhosting containers. This embedding works seamlessly with common web technologies like Bootstrap and jQuery.

Steps for Spotfire Analysis 

The following tutorial requires as a prerequisite: a basic understanding of HTML and the user must create an analysis and then save it on a Spotfire server.  You can sign up for a trial Spotfire Cloud Account from here. Save the analysis in your public directory. From the saved analysis you will need the following pieces of information as shown:

           1. URL of the Spotfire Server hosting the analysis

           2. Name of the page from which you would like to embed the visualizations

           3. Optionally, name of the visualizations to be rendered on the webpage

Open the Analysis Information from the menu as shown under step 4.

From this you will need:

           5. Name of the analysis

           6. Library path to the analysis

Steps for Script

On the source script of your page say <name>.html the above pieces now need to be included as shown below:

i.     Include the path to Spotfire JavaScript API. that enables

ii.    Define the server URL, and URL of the analysis path

iii.   Set up customization variables

iv.  The views point the app to a <div> within the script

v.   Define the level of embedding along with any formatting attributes like Height and Width.

vi.  Optional, public access link

The JavaScript API enables you to access the visualizations and defines the permissible functions to manipulate them. Note that the name of the analysis is appended to the analysis path and the visualizations come in as an instance of the Application defined immediately above this block of code highlighted in step iii. The customization variables configuration decides the amount of UI control you want to grant on these visualizations to a user on your webpage. Division tags pointed by the Views in the script contain what you want to show on this web page.

The above script would be supported as usual by CSS bundles and is ready to be dropped into your web hosting container. Additionally, options such as c_parameters, reloadApplicationInstance, and many more documented in the docs can be used to set up configuration blocks, caching information, filter schemes on startup of web page et all. This setup brings the graphics power of Spotfire to your webpages giving you more control over what you choose to show from analysis while reducing the hassle of recreating each visual using complex programmatic methods.

Finished Visualization Embedding

Learn More

• Click here for a video walkthrough of the tutorial
• Article: Spotfire JavaScript API Overview

Author: DJ Rajdev, Contributors: Timothy Alexander