Visualization SDK 2019

Using multiple external libraries

By default, if you have multiple HTML5 visualizations in a dossier or document, they all use the same javascript library. However, you may want to use different external libraries for different visualizations. You accomplish this by using the noConflictLibraries property in your visualization, together with the externalLibraries property. The noConflictLibraries property allows different versions of the same library to exist at same time, while ensuring that each visualization has the exact library and version that it requires. This also ensures that no dynamic properties are lost when the same library is reloaded—for example, d3.event and d3.sankey.

This functionality is available for version 10.5 or higher.

To specify the library to be used by a visualization, you need to add the following code to the javascript file that defines the visualization.

externalLibraries: [

  {url: "http://d3js.org/d3.v3.min.js"}

],

noConflictLibraries: [

  mstrmojo.CustomVisBase.ENUM_EXTERNAL_LIBS.D3

]

  • externalLibraries:

    The value of url is the URL of the javascript library that you want to use for the visualization. For example, url: "http:/d3js.org/d3.v3.min.js" if you want to use the d3 library.

  • noConflictLibraries

    When this property is used, it specifies that the libraries defined by the externalLibraries property should be isolated and used only for this visualization instance. For example, if D3 is specified, the d3 library loaded by “http://d3js.org/d3.v3.min.js” for this visualization will be cached, and the d3 reference in plot() will be redirected to this local library instead of the global one.