Automating Plot Setup for JSViz Using a Custom Tool in TIBCO Spotfire®

Last updated:
8:34am Jan 12, 2022

Prerequisites

Introduction

Sometimes it is beneficial to automate the creation of plots, and sometimes entire pages or sections of an analysis. As the JavaScript Visualization Framework (JSViz) does not perform any default rendering when created, it might be even more beneficial to do so with a JSViz setup. 

Custom Tool Implementation for Plot Creation

This example is using an implementation of the CustomTool class and you may reference he JavaScript Visualization Framework Core project in Spotfire installation's Modules folder in the package builder and visual studio to be able to build the example tool.

When adding HTML and JavaScript resources to the project in Visual Studio, it is necessary to set all included files to "Build Action Embedded Resource".

The following example code does the following:

  1. Creates a plot and adds it to the Document
  2. Creates URLReference objects with embedded content to the Document-wide JavaScript repository collection, if they are not already there
  3. Adds the key (name)  of the JavaScript file to the plot

To avoid premature immediate update events to fire before the plot is completely configured, the creation and configuration steps are wrapped in a transaction.

C#

public class AddPlotTool : CustomTool<Document>
{

	public AddPlotTool() : base("Add Plot")
	{
	}

	protected override void ExecuteCore(Document context)
	{
		context.Transactions.ExecuteTransaction(delegate {
			var viz = context.ActivePageReference.Visuals.AddNew<JSVisualizationModel>();

			//Add the JavaScript files needed to create a doughnut chart to the plot
			AddJs(context, viz, "scripts.jQuery.js");
			AddJs(context, viz, "scripts.d3.v3.min.js");
			AddJs(context, viz, "scripts.JSViz.js");
			AddJs(context, viz, "scripts.DoughnutChart.js");

			viz.ApplyUserPreferences();
			viz.AutoConfigure();
		}
		);

	}

	private void AddJs(Document context, JSVisualizationModel viz, string name)
	{
		// Get the common JavaScript file  repository 
		var repo = context.CustomNodes.AddNewIfNeeded<ContentRepository>();
		
		// Add  the JS File to the common repository 
		if (!repo.ContainsKey(name))
		{
			// Read the content of the script folder 
			var content =
				System.Text.Encoding.UTF8.GetString(GetEmbeddedResource("SpotfirePS.AddPlotTool_70." + name));
			var urlReference = new UrlReference(name, null, content, ContentType.JS, true);
			repo[name] = urlReference;
		}
		// Add the file to be used in the plot (order sensitive)
		viz.UrlInclusions.Add(name);
	}

///
Helper methods here --- see zip file for details
///

}

 

When buiding this in your C# environment you will need to link to the JSViz core package DLL, where the JSViz model API is residing. After installing JSViz on your local spotfire installation, the JSViz core dll will be found in the modules folder of your Spotfire installation, e.g. 

C:\TIBCO Spotfire Analyst\Modules\JSViz Core Package_3.5.3.0\SpotfirePS.Framework.JSVisualization.dll

 

You will then proceed to build your custom tool package .spk file using the Spotfire package builder. See below "Extending Extensions" for a more detailed description on how to set this up.

Extending Extensions

It is possible to extend custom extensions in TIBCO Spotfire®, but you will need to take care of a few quirks concerning the TIBCO Spotfire® build proces in the package builder as well as load-order of custom functionality.

Setting up Visual Studio

In order to build the Visual Studio project you need to link to the appropriate .dll in visual studio - for the main tool project reference SpotfirePS.Framework.JSVisualization.dll.

  1. Install the JSViz .sdn in your Spotfire Analyst client, by upploading it to the Spotfire Server's deployment section, connecting your analyst and download the update to your installed client. The new funcitonality will be downloaded to your Spotfire installation's Modules folder.
  2. Copy all the JSViz* folders to your or next to your visual studio build folder
  3. Link to SpotfirePS.Framework.JSVisualization.dll from the JSViz Core* folder

It is possible to do this without copying the files, but it is recommended to do so since your installation folder may experience changes as the server admin modifies the distribution on the server.

Setting up the Package Builder

For the package builder to be able to find all the references the extension needs to find, all the JSViz* packages previously copied to the working directory (above) will need to be added to the package builder configuration.

  1. Click add and navigate to the each JSViz* folder
  2. Before clicking Add, uncheck the Source Folder check box, so the package builder can find and use the already existing modules.xml
  3. After compiling your custom VS project, you may now also add your new extension (leaving the Source Folder check box checked) to Package Builder.
  4. It is recommended to
    • In the main project try to register JSViz, so that the configured visual will find the right type
    • Name the Package Builder project extension something that comes after "JSViz" alphabetically - this affects custom extension load-order and the JSViz:dlls must be loaded dynamically before the configured visualization can be loaded. 

When deploying to the server, the "Deploy to Server" button in the package builder cannot be used, as the JSViz packages will already be deployed. Use the file menu or right click to build only the two configured visual *.spk files.

Attachments

AttachmentSize
Package icon spotfireps.addplottool_70.zip191.97 KB

Feedback (3)

Hi Dave, please see my comments at https://community.tibco.com/wiki/javascript-visualization-framework-jsviz-and-tibco-spotfire#comment-76076 where I elaborated what missing DLLs I was referring to.

weiwei.shu 2:43pm Jan. 11, 2022

This article is very bare bones, I will contact the author to add more details.  In the meantime, take a look at https://community.tibco.com/wiki/one-click-jsviz-visualizations-extending-jsviz-tibco-spotfire as this will give more information on how to setup your Visual Studio and Spotfire environment.  You should then be able to use the code above to create your custom tool.

Dave Leigh 2:25pm Jan. 11, 2022

The above attached C# project has a reference to SpotfirePS.Framework.JSVisualization_70.dll that was not included in the project, nor in the JSViz 3.5.4 release zip file, where can I get access to that dll?

weiwei.shu 1:20pm Jan. 11, 2022