Vertical Line Chart Mod for Spotfire®

This vertical line chart mod built using PlotlyJS allows visualization of vertically oriented axis instead of horizontally oriented axis by displaying multiple variables using the visualization Y-axis as the category axis, and the X-axis as the value axis. This is the opposite orientation to a standard Spotfire Line chart.

One particularly useful use case for this chart is to visualize well metrics in a vertical orientation matching the depth of the well being analyzed.

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

Configure the chart

The configuration for the chart can be customized further using an included text editor. To access the editor, double-click on the center of the plot area. 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 vertical chart with a vertical axis that is a DateTime type.

{
  "layout": {
    "margin": {
      "t": 20,
      "r": 5,
      "b": 10,
      "l": 100
    },
    "paper_bgcolor": "transparent",
    "plot_bgcolor": "transparent",
    "showlegend": false,
    "xaxis": {
      "linecolor": "#BBBBBB",  
      "showgrid": false,      
      "showline": true,
      "side": "top",
      "ticks": "outside",
      "zeroline": false
    },
    "yaxis": {    
      "autorange": "reversed",
      "linecolor": "#BBBBBB",
      "nticks": 10,        
      "showgrid": false,      
      "showline": true,
      "showticklabels": true,
      "ticks": "outside",
      "_type": "date",
      "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"
  }    
}


If your vertical axis is numeric instead of a DateTime, the following configuration can be used as a starting point:

{
  "layout": {
    "margin": {
      "t": 20,
      "r": 5,
      "b": 10,
      "l": 100
    },
    "paper_bgcolor": "transparent",
    "plot_bgcolor": "transparent",
    "showlegend": false,
    "xaxis": {
      "autorange": true,
      "linecolor": "#BBBBBB",  
      "showgrid": false,      
      "showline": true,
      "side": "top",
      "ticks": "outside",
      "zeroline": false
    },
    "yaxis": {    
      "autorange": "reversed",
      "linecolor": "#BBBBBB",
      "nticks": 10,        
      "showgrid": false,      
      "showline": true,
      "showticklabels": true,
      "ticks": "outside",
      "tickformat": ",.0f",
      "zeroline": false        
    }  
  },
  "options": {
    "displayModeBar":    false
  },
  "defaultTrace": {
    "hoverinfo": "none",
    "line": {
      "shape": "linear",
      "width": 3
    },
    "marker": {
      "size":  1
    },
    "mode": "lines+markers",
    "selected": {
      "marker": {
        "size": 8
      }
    },
    "type": "scatter"
  } 
}

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 a vertical 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 vertical 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