Home

This Mod for Spotfire® can be used to display information as a series of data points connected by straight line segments similarly to a Spotfire line chart. The difference is that this mod adds the ability to shade background over a specific range, to draw reference lines for a single axis and to individually color and label vertical axes.

This mod exposes the majority of the Plotly API through a JSON configuration interface described below.

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.

To make the horizontal line chart mod work properly, the underlying data must be formatted in a certain way. The data must exist in a single table with variables for the category and value axis.

Setup

• Specify the data table with marking and filters as usual. The chart supports marking data; you can set the Marking property as desired.
• Optionally select a column for the Line by property. If rendering multiple columns on the X-axis then this configuration is mandatory and should be set to (Column Names).
• Select a column for the X property, which represents the value axis. You may select multiple columns from your data table to render more than one line.
• Select a column for the Y property, which represents the category axis.
• Select a column for the Color by property. This will determine the color of any lines and markers using the standard Spotfire color picker.

Configuration

The configuration for the chart can be customized further using an included text editor. To access the editor, double-click on between the axis and axis selectors. This will present a box titled Plotly Configuration and an editor that will contain the configuration in JSON format. Most of the Plotly JS API configuration options are available. Refer to the Plotly website for details of the API. But as a starting point, the following JSON string will render a standard horizontal chart with an horizontal axis that is a DateTime type.

{
    "layout": {
        "margin": {
            "t": 10,
            "r": 50,
            "b": 50,
            "l": 50
        },
        "paper_bgcolor": "transparent",
        "plot_bgcolor": "transparent",
        "showlegend": false,
        "xaxis": {
            "showgrid": false,
            "showline": true,
            "side": "bottom",
            "ticks": "outside",
            "tickangle": 0,
            "_type": "date",
            "zeroline": false
        },
        "yaxis": {
            "showgrid": true,
            "showline": true,
            "showticklabels": true,
            "ticks": "outside",
            "zeroline": false
        }
    },
    "options": {
        "displayModeBar": false
    },
    "defaultTrace": {
        "hoverinfo": "none",
        "line": {
            "shape": "linear",
            "width": 3
        },
        "marker": {
            "color": null,
            "size": 1
        },
        "mode": "lines+markers",
        "name": null,
        "selected": {
            "marker": {
                "size": 8
            }
        },
        "type": "scatter"
    }
}

These settings are not comprehensive; other options are available in the API.

You can also adjust these settings for customization. For example, these charts are setup with lines+markers as the display mode. if you only want to display markers, replace the value under "defaultTrace" > "mode" with markers.

It's very important that whatever value is in the configuration text area be a valid JSON string. The Validate button will verify that the configuration is valid JSON, but not validate it is syntactically correct. This must be clicked before saving the configuration. Once validated, click the Save button to display the chart.

Once the chart is rendered, the configuration can be modified as well. Accessing the configuration on a rendered chart can be problematic as the clicks are captured by the Plotly API. Try double-clicking at the bottom of the plot area, just above the X-axis column definitions to display the current configuration.

Usage

Once the chart is configured and has data provided it will render a line chart representation of your data oriented in an horizontal manner. If Marking has been enabled on the visualization, click and drag to select the points to mark. Likewise, click in any other standard visualization sharing the same marking to mark within the horizontal line chart.