Jump to content
We've recently updated our Privacy Statement, available here. ×
  • Spotfire Tips&Tricks: Embed Spotfire visualizations on Webpages

    Back to Tips & Tricks page



    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

    User Feedback

    Recommended Comments

    There are no comments to display.

  • Create New...