Defining a New Visualiztion - mstr-dev/Visualization-Plugins-Deprecated GitHub Wiki

###How It Works General process of rendering visualization can be split into 2 parts:

  1. Server side - Java
    1. prepares data for the visualization, and passes it to client side as a JSON string,
    2. displaying new visualization as an option in Microstrategy Web,
  2. Client side - JavaScript
    1. based on data received from server javascript renders visualization,
    2. controls actions on visualization.

###Required Steps This is an abstract list of steps to perform.

  1. As standard, create plugin folder under {Web Folder}/plugins
  2. In plugin folder create js file which will hold client side visualization code. File should be placed in {web folder}/plugins/{plugin}/javascript/mojo/js/source
  3. Create stylecatalog.xml in {web folder}/plugins/{plugin}/WEB-INF/xml, in stylecatalog define style for rendering visualization,
  4. Create visualizations.xml in {web folder}/plugins/{plugin}/WEB-INF/xml/config and define new visualization in it.

###Template Attached plugin “MstrVisTemplate“ contains bare minimum required to define new mojo visualization, This plugin will not render any data, just simple text: ‘Empty text’. This plugin shows what is required by Microstrategy platform to create new Visualization and relation between files and parameters.

File name location Description
MstrVisTemplate.js Javascript/mojo/js/source Javascript code responsible for rendering visualization
global.css style CSS file, should contain any related to visualization styling, for this sample it is empty
Html5ViPage.css style CSS file for rules responsible for setting custom icon on Visualization gallery on Dashboard page
styleCatalog.xml WEB-INF/xml Contains definition of style responsible for rendering visualization.
Visualizations.xml WEB-INF/xml/config Contains definition of visualization

###Tips Here are some tips to create a good custom visualization.

  • Make sure the 3rd party library used is hosted by HTTPs server. So your visualization can be compatible with both HTTP Web server and HTTPs Web server.

  • Use "Arial" as the font for the text in the custom visualizations. In MicroStrategy Web and Desktop, the "Arial" is the default font in most cases. It would be consistent to use "Arial" as the font.

  • Verify the custom visualizations in IE/Chrome/Safari/etc. In order to have a good quality and friendly user experience, it is suggested to test the visualization in different Web browsers to rule out the browser specific issues.

  • Provide preview and introduction for the custom visualizations. With them, the user can understand the custom visualization quickly and apply it easily.