Jump to content
We've recently updated our Privacy Statement, available here. ×
  • Mashup Example With Multiple Views Using Spotfire® JavaScript API


    Introduction

    The Spotfire® JavaScript API can be used to embed a Spotfire analysis into a web page and to integrate Spotfire with other web applications.

    This example creates a mashup with two components: A Spotfire analysis and the Visual Earth map. The example illustrates how multiple views (document instances) can be used to display the different parts of the Spotfire analysis and how Spotfire can be integrated with a public map service.

    mapdemo.thumb.png.a263de326da488fbc1b2fbba71b26841.png

    Prerequisites

    Spotfire 7.5 and later requires HTML5, and supported browsers are IE10/11, Chrome (33-) and FireFox (27-).

    Download and install the attached Mashup Multiple Views Example zip file.

    • MedPerf-7-5.dxp

      The analysis file used in the mashup example. Upload this to your Spotfire Cloud account. If you want to use another Spotfire Server than Spotfire Cloud, you must change the path to that server in MapDemo.html and in Resources/MapDemo.js.

    • MapDemo.html

      The html file creating the placeholders for analysis content. Add this html to your web server, or add it to the SDK along with the other mashup examples: Examples\Extensions\ SpotfireDeveloper. WebAutomationExample\. The file is reconfigured to get the JavaScript API from Spotfire Cloud. If you use another Spotfire Server, the script tag

      <script type="text/javascript"
              src="https://spotfire-next.cloud.tibco.com/spotfire/wp/GetJavaScriptApi.ashx?Version=7.5 ">
      </script>
       

      should be changed accordingly.

    • Resources

      Folder containing all static resource files such as CSS, JavaScript, and images. Add this to the same location as MapDemo.html. The JavaScript file Resources\MapDemo.js must be modified in such a way that the line

       var c_analysisPath = "users/[username]/Public/MedPerf-7-5";
       

      points to your user account. The MapDemo.js script file is configured to connect to the Spotfire Cloud Server. If you use another Spotfire Server, the line

       var c_serverUrl = "https://spotfire-next.cloud.tibco.com/spotfire/wp/";
       

      should be changed accordingly.

    Implementation

    The example uses five views of the analysis file, placed in separate DOM elements:

    • mainDocWrapper

      The primary source of user interaction:

      mapdemomaindoc_0.png.c324e4d610de3e10ec82c44f850a1b9a.png

    • mapMarkersWrapper

      The details visualization that corresponds to markers on the map, displayed in floating view:

      mapdemomapmarkers.png.4b70f887e467e01cd3da0189faf1d572.png

    • accountDetailsWrapper

      The details visualization when selecting marker from map (or from mapMarkersWrapper detail visualization), displayed as a popup view:

      mapdemoaccountdetails_0.png.3d6a81a045829c0115850e173c0841d6.png

    • locationFilterWrapper

      Filter for location, displayed in a popup view:

      mapdemolocationfilter_0.png.93b07b904c15a8d7dd095ec486da9159.png

    • specialityFilterWrapper

      Filter for MD specialty, displayed in a popup view:

      mapdemospecialityfilter_2.png.2033b7e68ec4de087b74d2e573375430.png

    Each of the DOM elements is loaded with an initial page, identified by its page name in the example.

    Loading of the views can be done in any order, but the first view will be loaded before any other view can start to load. Loader progress will only be showed in the first view.

    The following lines of code will initiate loading all five views into separate DOM elements:

    app = new spotfire.webPlayer.Application(c_serverUrl,
                                             cust,
                                             c_analysisPath,
                                             c_parameters,
                                             c_reloadAnalysisInstance);
    
    mainDoc             = app.openDocument("mainDocWrapper",
                                           c_startPage);
    
    mapMarkersDoc       = app.openDocument("mapMarkersWrapper",
                                           "Accounts",
                                           cust);
    
    accountDetailsDoc   = app.openDocument("accountDetailsWrapper",
                                           "Account Summary",
                                           cust);
    
    specialityFilterDoc = app.openDocument("specialityFilterWrapper",
                                           "Speciality",
                                           cust);
    
    locationFilterDoc   = app.openDocument("locationFilterWrapper",
                                           "Location",
                                           cust);
     

    For more information, see spotfire.webPlayer.Application and openDocument.

    The visibility of the popouts is controlled by marking Document.marking.onChanged events. The event handlers will be set up as soon as the mainDoc is finished loading, that is, the Application.onOpened callback is called.

    mainDoc.marking.onChanged(c_markingName,
                              c_tableName,
                              c_markingColumns,
                              10,
                              clearDetailMarking);
    
    mainDoc.marking.onChanged(c_mapMarkingName,
                              c_tableName,
                              c_markingColumns,
                              10,
                              toggleShownOnMapVisibility);
     

    The routes displayed in the map are updated in another appropriate marking Document.marking.onChanged event handler.

    mainDoc.marking.onChanged(c_brandAMarkingName,
                              c_tableName,
                              c_markingColumns,
                              10,
                              updateMapRoutes);
     

    The API example below contains a bing API credential key that you will need to replace with your own developer key for access to the Bing Maps v8 web control. 

    var bing_cred = 
        '****U4jUu2pgnACTuV0vad8****8rtC3g8bY****UpYCkqxA2ornDl8Yq****';
     

    You can get a key  by registering here: https://msdn.microsoft.com/en-us/library/ff428642.aspx

     

    mashup_multiple_views_2.zip

    mashup_multiple_views_with_loader_api.zip


    User Feedback

    Recommended Comments

    There are no comments to display.


×
×
  • Create New...