JavaScript Visualization Framework - JSViz and TIBCO Spotfire®

Last updated:
11:40am Oct 28, 2019

Important Announcement

Users upgrading to or installing Spotfire 7.12 or later will need to download and install the latest version of JSViz.  See the "Known Issues" section for more details.


Introduction

Within the TIBCO Spotfire® community, one area of discussion that crops up continually is that of new visualization types.  Customers often ask for a visualization type during a POC that Spotfire does not currently support.  Others ask for simple customizations of existing visualizations, such as moving labels around, that sound straightforward but are almost impossible to implement without extensive coding.

There are now a number of JavaScript libraries available for creating rich interactive graphics within a standard web browser.  One such is D3 which has a large library of example visualizations available on the D3 Website.  There are many others, including Highcharts, ZoomCharts and Google Charts.

Sample JSViz Visualizations

The JavaScript Visualization Framework, or JSViz, is a Custom Extension for TIBCO Spotfire that allows users to create their own visualizations using JavaScript libraries such as d3 but still allow them to seamlessly integrate with the Spotfire platform.  Note that although d3 was an initial driver for implementing the custom extension, it can actually work with any JavaScript based code.


Samples

Included with the framework are a number of sample charts including:


Download JSViz - Versions

JSViz can be downloaded from the TIBCO Exchange

JSViz is compatible with Spotfire 7.5 and later.

For an overview of the different extension and customization options that the Spotfire platform provides, see Extending TIBCO Spotfire.


API

The documentation for the .NET API is now available online here.  This API can be used within Spotfire via IronPython or within a .NET Spotfire Custom Extension to configure JSViz visualizations.

The examples provided with JSViz also include a comprehensive scripting example showing how to use IronPython to create and configure JSViz charts.


Automating Plot Setup

It is possible to automate the creation of JSViz instances from the tool bar or the tools menu, by creating a custom extension that leverages the JSViz API:

Custom windows forms property pages are now available from 3.5. Developers who have made use of the one-click visualisation extension of pre 3.5 may need to update their add-in project to actively include any of the original property pages of JSViz property dialog as they no longer are displayed by default.


Articles on TIBCO Community

There are a number of articles on TIBCO Community that describe using JSViz to create different types of custom visualizations and other solutions:

https://community.tibco.com/wiki/displaying-terr-graphics-tibco-spotfire-using-jsviz

https://community.tibco.com/wiki/tibco-spotfire-funnel-chart-using-jsviz

https://community.tibco.com/wiki/how-create-network-chart-visualization-tibco-spotfire-using-jsviz-and-zoomcharts


Help and Support

Please note that JSViz is not supported through support.tibco.com.  In the event of issues or to get help, please post questions in the TIBCO Community Forum here:

https://community.tibco.com/answers

Make sure that you add the tag "JSViz" so that it will be visible.


Licensing

JSViz is shared with the TIBCO Community for free use by customers and partners under the  TIBCO Component Exchange License.


Known Issues

  • Under certain circumstances, JSViz may throw the following error when opening a DXP file:

    • InvalidOperationException at Spotfire.Dxp.Framework:

      Attempt to read from a node that is in state 'Detached'. (HRESULT: 80131509)

    • This issue is resolved in JSViz 3.5.2

  • There is a known issue with JSViz 3.4.0.13 occasionally showing incorrect results when using a Limit By Expression statement. This will be addressed in the next release.

  • JSViz 3.4.0.12 will cause Spotfire to crash if an invalid data configuration is created.  Examples of invalid configurations include:

    • Removing all Column Expressions in a group-by configuration

    • Adding a non-aggregated Column Expression in a group-by configuration

    • These issues are fixed in JSViz 3.4.0.13.

  • JSViz 3.4.0.13 or above is required when upgrading to or installing Spotfire 7.12 or later.  This is due to a clash in versions of log4net.dll between JSViz and Spotfire.  Versions of JSViz above 3.4.0.12 remove any dependancy on log4net.dll.  

  • Some users may encounter a problem when using JSViz with Spotfire 7.6.  This is only an issue with older releases of JSViz, 3.4.0.2 and older.  For detailed instructions see the following page: https://community.tibco.com/wiki/jsviz-problems-spotfire-76.  Spotfire 7.6 Hotfix 3 is also required.

  • JSViz visuals will work in Web Player and Automation Services as well as Spotfire Analyst (Professional).  Make sure to follow the installation instructions in the documentation.  Many people forget to update the Web Player after installing the plugin files.

  • There is an issue with the 3.4.0.8 build recently posted.  Please download and use a later version.

  • There is an issue with the resize logic in the doughnutchart.dxp sample which may cause the chart to occasionally appear empty when first opening the dxp file.  An updated version of the JSViz.js javascript file that resolves this issue can be downloaded from here.

  • JSViz is not supported on Spotfire Desktop (not to be confused with Spotfire Analyst).


Simpler JS, Brunel

Brunel is an open source Domain Specific Language designed specifically for interactive data visualisation. It allows coding complex Javascript D3 visualisations with as little as one line of code. Brunel can be integrated into Spotfire Javascript visualisations.

Feedback (3)

This is one of those cases where editing of JSViz.js is required.  The default marking behavior works for 99% of the cases but there are others that we can't predict.

It was always the intention that JSViz.js would be modified by some users.

Dave Leigh 8:11am Nov. 15, 2019

There's a bug in the latest version - you cannot interact with html <SELECT>

This is because the marking rectangle supercedes the click event to expand the select list.

There is also no way I can see to turn the marking rectangle off, short of manipulating the JSViz.js code itself... Can I suggest this is configurable? Better still, configurable to a viewport rather than the whole body tag?

janine.rawnsley 6:42am Nov. 15, 2019