Embedding Interactive Custom Graphs in Spotfire Using HTML Text Area and Python

Keywords:

Spotfire, Plotly, Python, HTML Text Area, IronPython, Interactive Graph, Dashboard, Data Function, Property Control, Visualization.

Description:

This Knowledge Base article demonstrates how to embed an interactive Plotly graph, generated with Python, into a Spotfire dashboard. The graph is rendered within an HTML Text Area, and the solution involves passing the graph data through Spotfire's property controls and using IronPython to execute the HTML.

Solution:

Embedding an interactive Plotly graph within a Spotfire dashboard can be done using an HTML Text Area and Python. This allows users to generate and display interactive graphs that are dynamically linked with Spotfire’s data tables. Below is a step-by-step guide to achieve this.

Step-by-Step Guide:

1. Generate the Plotly Graph with Python

To generate a Plotly graph in Python, first create a Plotly figure based on the data you want to visualize. Here's an example Python code that generates a simple line graph:

import plotly.graph_objects as go
import pandas as pd
import json
import numpy as np

# Example DataFrame (replace this with your actual data)
df = pd.DataFrame(Input) # Input is passed from Spotfire

# Convert all NumPy arrays in the DataFrame to lists
df['x'] = df['x'].tolist()
df['y'] = df['y'].tolist()

# Create a Plotly figure
fig = go.Figure(data=go.Scatter(x=df['x'], y=df['y'], mode='lines+markers'))

# Convert the figure to a dictionary
fig_dict = fig.to_dict()

# Recursively convert any remaining NumPy arrays in the dictionary to lists
def convert_ndarrays_to_lists(obj):
if isinstance(obj, np.ndarray):
return obj.tolist()
elif isinstance(obj, dict):
return {key: convert_ndarrays_to_lists(value) for key, value in obj.items()}
elif isinstance(obj, list):
return [convert_ndarrays_to_lists(item) for item in obj]
else:
return obj

fig_dict_cleaned = convert_ndarrays_to_lists(fig_dict)

# Convert the cleaned dictionary to a JSON string
fig_json = json.dumps(fig_dict_cleaned, indent=2)

# Output the JSON for Spotfire
Output = fig_json

This Python script generates a Plotly graph and outputs the graph's data in JSON format, which can be used in Spotfire.

2. Set up Spotfire Data Function to Call the Python Code

In Spotfire, create a Data Function that runs the Python script above. This Data Function should take input data from Spotfire, generate the Plotly graph, and output the JSON as a document property. This document property will be used to update the HTML content.

3. Embed the Plotly Graph Using HTML Text Area

Next, you need to create an HTML Text Area in Spotfire where the Plotly graph will be displayed. The graph data will be passed into the HTML Text Area through the document property, and IronPython will be used to dynamically update the content.

Here’s an example of the IronPython code to embed the Plotly graph into the HTML Text Area:

from Spotfire.Dxp.Application.Visuals import HtmlTextArea

# Fetch JSON from a document property
fig_json = Document.Properties["HTML"] # "HTML" is the property containing the Plotly JSON

# Build HTML content using %-formatting
html_content = """
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="plotContainer"></div>
<script>
var figure = %s;
Plotly.newPlot('plotContainer', figure.data, figure.layout);
</script>
""" % fig_json # Use %s for string substitution

# Update the HTML Text Area visualization
html_visual = viz.As[HtmlTextArea]()
html_visual.HtmlContent = html_content

This script dynamically loads the Plotly graph into the HTML Text Area by referencing the JSON data stored in the Spotfire document property.

4. Pass Data Using Property Controls

To pass the data (the Plotly JSON) into the HTML Text Area dynamically, you can use Spotfire’s property control. This control binds the output of the Data Function to the document property, which is then referenced in the IronPython script.

1. Create a property control that holds the output of the Data Function (which is the Plotly graph JSON).
2. Set this property to be used in the IronPython script to update the HTML content.

5. Final Integration

After setting up the Data Function, the IronPython script, and the HTML Text Area, the interactive Plotly graph will be displayed within your Spotfire dashboard, and it will update dynamically as the data changes.

Example Plotly Chart Output Visual:

Attached Sample Dashboard:

A sample dashboard that demonstrates this solution can be downloaded below.