Spotfire Javascript Mashup API and Technique to Display a Single Visual from a Page

Introduction

One of the limitations of Spotfire's Javascript API is only an entire page can be accessed when displaying content. This can present a problem when you want to reuse only specific visuals from an existing Spotfire Dashboard that's been designed for use within the normal Consumer or web based view. The example below shows how you can take an existing DXP layout and use IronPython to "flatten" it.

Solution

This "flattening" allows you to then reference individual visuals from the DXP. To enable this, the IronPython script moves each visual to its own page allowing it to be referenced separately. The new page name is the original page plus the visual name separated by an "=". This allows you to easily create a dashboard with an appropriate layout for use natively within Spotfire but still allow the individual visuals within a Spotfire dashboard to be accessed via the Javascript API. The IronPython script is activated by simply setting a flag through a configuration block or parameter when accessing the DXP through the Javascript API. In this example, a Document Property called FlattenDXP is used to trigger the script which is also called FlattenDXP.

The IronPython code is below.

if (Document.Properties["flattenDXP"] == 'Y'):
	# Get a list of all pages in the original layout
	allOrigPages = []
	for page in Document.Pages:
		allOrigPages.append(page)

	# Move each visual to a new page and then delete the original page once the visuals have been moved
	for page in allOrigPages:
		for viz in page.Visuals:
			newPageTitle = page.Title + '=' + viz.Title
			newPage = Document.Pages.AddNew(newPageTitle)
			Document.Pages.MoveVisualTo(viz,newPage)
		Document.Pages.Remove(page)

Example

Here is the sample page showing the default, full page view and then the ability to show just a single visual.

I've also included the HTML code for this page.

<html>
<head>

  <title>Simple Portal</title>
  <script type="text/javascript" src="http://localhost/spotfire/wp/GetJavaScriptApi.ashx?Version=7.5"></script>

<script>
var c_serverUrl = "http://localhost/spotfire/wp/";
var c_analysisPath = "/Techniques/IronPython/Flatten DXP Script";

var c_parameters = "flattenDXP=Y;";
var customization = new spotfire.webPlayer.Customization();
customization.showStatusBar = true;
customization.showToolBar = false;
customization.showPageNavigation = false;
customization.showFilterPanel = false;
customization.showDodPanel = false;

var appSingle;
var c_reloadAnalysisInstance = false;
appSingle = new spotfire.webPlayer.Application(c_serverUrl, customization, c_analysisPath, c_parameters, c_reloadAnalysisInstance)

var appFull;
var c_reloadAnalysisInstance1 = false;

appFull = new spotfire.webPlayer.Application(c_serverUrl, customization, c_analysisPath, null, c_reloadAnalysisInstance1)

function initPage () {
var viewFull   =appFull.openDocument("FullDXPPage", "Sales Summary");
var viewSingle =appSingle.openDocument("SingleDXPVisual", "Sales Summary=Profit per State");
}

function changeVisual (visSel) {
var viewSingle =appSingle.openDocument("SingleDXPVisual", "Sales Summary="+visSel[visSel.selectedIndex].value);
}
</script>

</head>
<body style="background-color: 333333; color: 91C6E1; font-family: arial; font-weight: bold; font-size: 12pt;" onload="initPage();">
<h1>Flatten DXP Example</h1>

<table>
<tr>
<td>Full Page
    <div id = "FullDXPPage"  style="width: 900px; height: 800px; ">Full</div>
</td>
<td>Single Visual
    <select id="VisualSel" onChange="changeVisual(this);">
		<option>Profitability by State</option>
		<option selected>Profit by State</option>
		<option>Profit per Account Type</option>
	</select>
	<div id = "SingleDXPVisual" style="width: 970px; height: 800px;">Single</div>
</td>
</tr>
</table>
</body>
</html>

flatten_dxp_script.dxp

Sign In

Spotfire Javascript Mashup API and Technique to Display a Single Visual from a Page

Introduction

Solution

Example

Table of contents

User Feedback

Recommended Comments

Industries