Skip to main content

Spotfire 2.1-2.2: Testing a Web Visualization

This tutorial explains how to set up and test the custom web visualization SDK example.

Overview

The SDK provides implements a set of fully functional web visualizations. This step-by-step instructions detail the required procedures. These the custom web visualization make up a good starting point for building new custom visualizations.

Background Information
  • Creating a Visualization
    A visualization is a visual displaying data in Spotfire. A custom visualization defines a unique visualization, implementing model, view, and possibly using additional components.
  • How to Create a Visualization Model
    A visualization model manages the state of a visualization. It is also expected to be capable of drawing itself.
  • How to Create a Visualization View
    A visualization view handles user input and is responsible for drawing the visualization in the user interface.
  • How to Create a Visualization Web View
    To display a custom Spotfire visualization in the Web Player, implement a custom web control. It must be integrated with the model object of the visualization to communicate state change and receive updates.
Prerequisites
  • Spotfire SDK\Examples\Extensions\
    + SpotfireDeveloper.CustomVisualsWebExample
    + SpotfireDeveloper.CustomVisualsExample
    + SpotfireDeveloper.CalculationMethodExample: This project is required by the Normal Plot to run both in Spotfire and the Web Player. It is a shortcut visualization, a configured scatter plot with axis expressions containing CenteredRank, an expression defined in the SpotfireDeveloper.CalculationMethodExample.

When debugging the project, verify the following custom web visualization features:

  1. The Custom Scatter Plot handles marking.
    Custom scatter plot visualization
  2. The Web Details plot reacts to changes in marked rows, performing searches.
    Web details plot
  3. The Traffic Light reacts to filtering.
    If no useful expression and limit have been set, no filtered rows should result in no color:
    Traffic light visualization
  4. The Histogram displays filtered and marked rows. It is part of the SpotfireDeveloper.CustomVisualization project but it is not a custom plot. It is a shortcut visualization. It configures a bar chart to display as a histogram:
    Histogram shortcut visualization
  5. The Normal Plot reacts to both marking and filtering. It embeds a scatter plot with a predefined X axis expression in the source code. The expression defines the normal plot behavior. Note that it does not follow the custom visualization pattern, but instead implements a custom node to extend the document.
    Normal plot visualization
    • Extending the Document
      The document model is a node tree. It is extended by adding new nodes.
    • Document Nodes
      DocumentNode is the abstract base class for all types in the model. The document is extended by creating, attaching and configuring nodes.

Building the Extensions

  1. In Visual Studio®, open the project SpotfireDeveloper.CustomVisualsWebExample.
  2. Add the SpotfireDeveloper.CustomVisualsExample and SpotfireDeveloper.CalculationMethodExample projects.
  3. Verify that the references in all projects correct point at the SDK\Binaries assemblies.
  4. In the SpotfireDeveloper.CustomVisualsWebExample project, add a reference to the SpotfireDeveloper.CustomVisualsExample project.
  5. Build the solution.
    There should be no errors or warnings.

Testing the Custom Web Visualizations

  1. In Spotfire, create an analysis containing custom visualizations.
  2. Save the analysis to the Spotfire library as CustomAnalysis.
  3. Install Spotfire Web Player.
  4. Open a web browser and enter the URL to the Spotfire Web Player.
  5. In the CustomAnalysis from the Spotfire Library. The custom visualizations should be rendered as white boxes with the text: This visualization is not supported in TIBCO Spotfire Web Player..
  6. Add the custom visualizations to the TIBCO Spotfire Web Player installation:
    1. Copy the custom visualizations DLL:s from SDK\Examples\Extensions\SpotfireDeveloper.CustomVisualsWebExample\bin\Debug to Spotfire Web Player\2.1\webroot\bin.
    2. Add the following lines to Spotfire Web Player\2.1\webroot\app_data\AddIns.xml:
      <AddIn FullTypeName="SpotfireDeveloper.CustomVisualsExample.CustomVisualsAddIn, SpotfireDeveloper.CustomVisualsExample" /> <AddIn FullTypeName="SpotfireDeveloper.CustomVisualsWebExample.CustomVisualsWebAddIn, SpotfireDeveloper.CustomVisualsWebExample" /> <AddIn FullTypeName="SpotfireDeveloper.CalculationMethodExample.CalculationMethodAddIn, SpotfireDeveloper.CalculationMethodExample " />
    3. Restart the web server.
  7. In the Spotfire Web Player, open CustomAnalysis from the library. Verify that the following custom web visualization features:
    1. The Normal Plot reacts to both marking and filtering.
    2. The Custom Scatter Plot handles marking.
    3. The Web Details plot reacts to changes in marked rows, performing searches.
    4. The Traffic Light reacts to filtering.
      If no useful expression and limit have been set, no filtered rows should result in no color.