Home

This Mod for Spotfire® can be used to add basic textual descriptions to dashboards and analyses from the Spotfire Web UI.

Installation

Opening the visualization in Spotfire® Analyst

1. From this repository Releases section, locate and download the .mod file.
2. Drag the .mod file into an analysis in Spotfire® Analyst.

For information on how to use and share visualizations mods, read the Spotfire® documentation.

Running the project in Spotfire®

1. From this repository Releases section, locate and download the source code.
2. Build the project in your preferred code editor. Microsoft Visual Studio Code is highly recommended.
3. Open an analysis in Spotfire® and select Tools > Development > Create visualization mod from the menubar to connect to the project.

For information on how to get started with visualization mod development, read the Spotfire® documentation.

Data Requirement

Every mod handles missing, corrupted and/or inconsistent data in different ways. It is advised to always review how the data is visualized.

There are no data requirements since the Mod does not display any data from the analysis.

Setup

1. Switch your analysis to Editing mode.
2. Double click in the Mod.
3. Type in any text. Use Markdown for basic formatting.
4. Hit Save to commit your changes and display the text Cancel to ignore any change.

Markdown Formatting

Simple formatting can be done using Markdown:

# Header 1
## Header 2
### Header 3

- List 
- List
  - Sublist
  - Sublist
- List
- List

1. One
2. Two
3. Three

*Italic*

**Bold**

HTML

More advanced formatting can be done with inline HTML, E.g.

<table>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
    <tr>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
</table>

Styling

By default the text area will use the same style as the rest of Spotfire. E.g. it adapts to light and dark mode and you can change the font family, font size etc. by changing the general visualization font.

More advanced styling can be done with an inline CSS, E.g. the following will change all primary headers to red:

<style>
    h1 {
        color: red; 
    }
</style>

Images

Vector drawings can be added using SVG:

<svg height="150" width="400">
    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> 
            <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        </linearGradient>
    </defs>
    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>