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:
- The Custom Scatter Plot handles marking.

- The Web Details plot reacts to changes in marked
rows, performing searches.

- The Traffic Light reacts to filtering.
If no useful expression and limit have been set, no filtered rows should result
in no color:

- 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:
- 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.
-
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
- In Visual Studio®, open the project
SpotfireDeveloper.CustomVisualsWebExample.
- Add the
SpotfireDeveloper.CustomVisualsExample and SpotfireDeveloper.CalculationMethodExample
projects.
- Verify that the references in all projects correct point at the
SDK\Binaries
assemblies.
- In the
SpotfireDeveloper.CustomVisualsWebExample project, add a reference
to the SpotfireDeveloper.CustomVisualsExample project.
- Build the solution.
There should be no errors or warnings.
Testing the Custom Web Visualizations
- In Spotfire, create an analysis containing custom visualizations.
- Save the analysis to the Spotfire library as
CustomAnalysis.
- Install Spotfire Web Player.
- Open a web browser and enter the URL to the Spotfire Web Player.
- 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..
- Add the custom visualizations to the TIBCO Spotfire Web Player installation:
- Copy the custom visualizations DLL:s from
SDK\Examples\Extensions\SpotfireDeveloper.CustomVisualsWebExample\bin\Debug
to Spotfire Web Player\2.1\webroot\bin.
- 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 " />
- Restart the web server.
- In the Spotfire Web Player, open
CustomAnalysis from the library. Verify
that the following custom web visualization features:
- The Normal Plot reacts to both marking and filtering.
- The Custom Scatter Plot handles marking.
- The Web Details plot reacts to changes in marked
rows, performing searches.
- The Traffic Light reacts to filtering.
If no useful expression and limit have been set, no filtered rows should result
in no color.