Deploying a custom visualization

You can deploy a custom HTML5 visualization in a dossier or document and view it in MicroStrategy Library, Web, Desktop or Workstation, on either a Windows or Mac machine. You can also view a custom HTML5 visualization in a dossier or a document in MicroStrategy Mobile on an iOS or Android device.

Beginning in MicroStrategy 10.8, you are not required to download the MobileBase plugin; it is available in the MicroStrategyMobile war file out-of-the-box.

To deploy a custom visualization to a MicroStrategy product, follow the instructions below for the environments where you want to use it.

  1. MicroStrategy Library

    1. Copy the visualization plug-in to the plugins folder in the MicroStrategy Library installation directory.
    2. Restart the web server.
  2.  MicroStrategy Web (on Windows or Mac)

    1. Copy the visualization plug-in to the plugins folder in the MicroStrategy Web installation directory.
    2. Restart the web server.

  • MicroStrategy Desktop (on Windows or Mac)

    1. Open MicroStrategy Desktop.
    2. Open a dossier.
    3. Click the + button under Custom in the Gallery of visualizations on the right and choose Import Visualization.


    4. On the Import Visualization dialog, navigate to the plug-in .zip file for the custom visualization you want to import and click Open.

  • MicroStrategy Workstation (on Windows or Mac)

    1. Open MicroStrategy Workstation.
    2. Open a dossier.
    3. Click the + button under Custom in the Gallery of visualizations on the right and choose Import Visualization.


    4. On the Import Visualization dialog, navigate to the plug-in .zip file for the custom visualization you want to import and click Open.
  • MicroStrategy Mobile (on an iPhone)

    To view a custom HTML5 visualization in a document on an iPhone:

    1. Copy the visualization plug-in to the plugins folder in the MicroStrategy Web installation directory.
    2. In the visualization plug-in folder in the MicroStrategy Web installation directory, navigate to ..\WEB-INF\xml\config\visualizations.xml.
    3. Open visualizations.xml and duplicate the entire <visualization-list name="ajax"> tag, including all contents , as shown in bold below:

      Before

      <visualizations>

        <visualization-list name="ajax" show-in-web="true" view-mode="51">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" is-mojo="true" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

      </visualizations>

      After

      <visualizations>

        <visualization-list name="ajax" show-in-web="true" view-mode="51">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" is-mojo="true" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

        <visualization-list name="ajax" show-in-web="true" view-mode="51">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" is-mojo="true" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

      </visualizations>

    4. In the duplicated XML, make the following changes marked in bold:

      Before

      <visualizations>

        <visualization-list name="ajax" show-in-web="true" view-mode="51">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" is-mojo="true" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

        <visualization-list name="ajax" show-in-web="true" view-mode="51">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" is-mojo="true" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

      </visualizations>

      After

      <visualizations>

        <visualization-list name="ajax" show-in-web="true" view-mode="51">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" is-mojo="true" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

        <visualization-list name="iphone" show-in-web="false" view-mode="70">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

      </visualizations>

    5. Explanation of changes:

      In the <visualization-list> node:

      • You changed the value of the name attribute from "ajax" to "iphone".

      • You changed the value of the show-in-web attribute from "true" to "false".

      • You changed the value of the view-mode attribute from "51" to "70".

      In the <visualization> node:

      • You deleted the is-mojo="true" attribute.

    6. Save the modified visualization plug-in.
    7. Copy the modified visualization plug-in to the plugins folder in the MicroStrategy Mobile installation directory.
    8. When you apply the visualization to the document in MicroStrategy Web, make sure to check the "iPhone" option in the widget editor and save the document.

  • MicroStrategy Mobile (on an iPad)

    To view a custom HTML5 visualization in a dossier on an iPad:

    1. Copy the visualization plug-in to the plugins folder in the MicroStrategy Mobile installation directory.

    To view a custom HTML5 visualization in a document on an iPad:

    1. Copy the visualization plug-in to the plugins folder in the MicroStrategy Web installation directory.
    2. In the visualization plug-in folder in the MicroStrategy Web installation directory, navigate to ..\WEB-INF\xml\config\visualizations.xml.
    3. Open visualizations.xml and duplicate the entire <visualization-list name="ajax"> tag, including all contents, as shown in bold below:

      Before

      <visualizations>

        <visualization-list name="ajax" show-in-web="true" view-mode="51">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" is-mojo="true" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

      </visualizations>

      After

      <visualizations>

        <visualization-list name="ajax" show-in-web="true" view-mode="51">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" is-mojo="true" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

        <visualization-list name="ajax" show-in-web="true" view-mode="51">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" is-mojo="true" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

      </visualizations>

    4. In the duplicated XML, make the following changes marked in bold:

      Before

      <visualizations>

        <visualization-list name="ajax" show-in-web="true" view-mode="51">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" is-mojo="true" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

        <visualization-list name="ajax" show-in-web="true" view-mode="51">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" is-mojo="true" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

      </visualizations>

      After

      <visualizations>

        <visualization-list name="ajax" show-in-web="true" view-mode="51">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" is-mojo="true" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

        <visualization-list name="ipad" show-in-web="false" view-mode="71">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

      </visualizations>

    5. Explanation of changes:

      In the <visualization-list> node:

      • You changed the value of the name attribute from "ajax" to "ipad".

      • You changed the value of the show-in-web attribute from "true" to "false".

      • You changed the value of the view-mode attribute from "51" to "71".

      In the <visualization> node:

      • You deleted the is-mojo="true" attribute.

    6. Save the modified visualization plug-in.
    7. Copy the modified visualization plug-in to the plugins folder in the MicroStrategy Mobile installation directory.
    8. When you apply the visualization to the document in MicroStrategy Web, make sure to check the "iPad" option in the widget editor and save the document.
  • MicroStrategy Mobile (on an Android phone)

    To view a custom HTML5 visualization in a document on an Android phone:

    1. Copy the visualization plug-in to the plugins folder in the MicroStrategy Web installation directory.
    2. In the visualization plug-in folder in the MicroStrategy Web installation directory, navigate to ..\WEB-INF\xml\config\visualizations.xml.
    3. Open visualizations.xml and duplicate the entire <visualization-list name="ajax"> tag, including all contents, as shown in bold below:

      Before

      <visualizations>

        <visualization-list name="ajax" show-in-web="true" view-mode="51">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" is-mojo="true" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

      </visualizations>

      After

      <visualizations>

        <visualization-list name="ajax" show-in-web="true" view-mode="51">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" is-mojo="true" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

        <visualization-list name="ajax" show-in-web="true" view-mode="51">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" is-mojo="true" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

      </visualizations>

    4. In the duplicated XML, make the following changes marked in bold:

      Before

      <visualizations>

        <visualization-list name="ajax" show-in-web="true" view-mode="51">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" is-mojo="true" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

        <visualization-list name="ajax" show-in-web="true" view-mode="51">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" is-mojo="true" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

      </visualizations>

      After

      <visualizations>

        <visualization-list name="ajax" show-in-web="true" view-mode="51">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" is-mojo="true" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

        <visualization-list name="android" show-in-web="false" view-mode="72">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

      </visualizations>

      Explanation of changes:

      In the <visualization-list> node:

      • You changed the value of the name attribute from "ajax" to "android".

      • You changed the value of the show-in-web attribute from "true" to "false".

      • You changed the value of the view-mode attribute from "51" to "72".

      In the <visualization> node:

      • You deleted the is-mojo="true" attribute.

    5. Save the modified visualization plug-in.
    6. Copy the modified visualization plug-in to the plugins folder in the MicroStrategy Mobile installation directory.
    7. When you apply the visualization to the document in MicroStrategy Web, make sure to check the "Android Phone" option in the widget editor and save the document.
  • MicroStrategy Mobile (on an Android tablet)

    To view a custom HTML5 visualization in a dossier on an Android tablet:

    1. Copy the visualization plug-in to the plugins folder in the MicroStrategy Mobile installation directory.

    To view a custom HTML5 visualization in a document on an Android tablet:

    1. Copy the visualization plug-in to the plugins folder in the MicroStrategy Web installation directory.
    2. In the visualization plug-in folder in the MicroStrategy Web installation directory, navigate to ..\WEB-INF\xml\config\visualizations.xml.
    3. Open visualizations.xml and duplicate the entire <visualization-list name="ajax"> tag, including all contents, as shown in bold below:

      Before

      <visualizations>

        <visualization-list name="ajax" show-in-web="true" view-mode="51">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" is-mojo="true" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

      </visualizations>

      After

      <visualizations>

        <visualization-list name="ajax" show-in-web="true" view-mode="51">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" is-mojo="true" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

        <visualization-list name="ajax" show-in-web="true" view-mode="51">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" is-mojo="true" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

      </visualizations>

    4. In the duplicated XML, make the following changes marked in bold:

      Before

      <visualizations>

        <visualization-list name="ajax" show-in-web="true" view-mode="51">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" is-mojo="true" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

        <visualization-list name="ajax" show-in-web="true" view-mode="51">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" is-mojo="true" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

      </visualizations>

      After

      <visualizations>

        <visualization-list name="ajax" show-in-web="true" view-mode="51">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" is-mojo="true" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

        <visualization-list name="androidTablet" show-in-web="false" view-mode="73">

          <visualization id="CircularHeatChart" desc="D3 Circular Heat Chart" scope="19" projects="" style-name="CircularHeatChart" attribute-minimum="2" metric-minimum="1"/>

        </visualization-list>

      </visualizations>

    5. Explanation of changes:

      In the <visualization-list> node:

      • You changed the value of the name attribute from "ajax" to "androidTablet".

      • You changed the value of the show-in-web attribute from "true" to "false".

      • You changed the value of the view-mode attribute from "51" to "73".

      In the <visualization> node:

      • You deleted the is-mojo="true" attribute.

    6. Save the modified visualization plug-in.
    7. Copy the modified visualization plug-in to the plugins folder in the MicroStrategy Mobile installation directory.
    8. When you apply the visualization to the document in MicroStrategy Web, make sure to check the "Android Tablet" option in the widget editor and save the document.
Did you find this helpful?