Horizontal Line Chart Mod for Spotfire®

This Horizontal Line Chart Mod built using PlotlyJS displays 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.

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.

Setting up the chart

• 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.

Customizing the chart

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.

Using the chart

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.

Help and support

This Mod for Spotfire® is not supported by Spotfire Support.
In the event of issues or to suggest features and enhancements, submit an issue in the Mod's GitHub repository.
For general questions about Mods, please post a question in the Forum for Extensions & Mods to make it visible and routed to the appropriate team(s) to respond.

More information about Mods for Spotfire®

• Spotfire Community Exchange: A safe and trusted place to discover ready-to-use Mods
• Developer Documentation: Introduction and tutorials for Mods developers
• Mods code examples on GitHub: A public repository for example projects