Latest from Pandera Systems

Leaders in Enterprise Decision Automation®.

Categories

Adding Custom Properties to D3 Visualizations in MicroStrategy 10

Previously, we published a video showing how easy it is to add new custom D3 Visualizations to MicroStrategy 10 in less than a minute. After creating a D3 visualization, you may find that users want to format the widget. Instead of making code changes for each dashboard, you can add properties to the visualization that make it customizable. To do this, you will need an already completed D3 visualization. For my example, I will be using a Scatter Plot d3 visualization that was created for a client. Based on the data they had per dashboard, they wanted to format their axes, add a legend, and/or change the size of their data points.


1. To begin, you will want to make a layout file that represents the options to add. Save this file in /plugins//WEB-INF/xml/layouts.

d3properties-1

 
2. Next, you will need add this layout file to the styleCatalog.xml (located in /plugins//WEB-INF/xml). Give the style unique name, but keep the transform listed below:

d3properties-2

 
3. Next, add a ‘propsEditor’ declaration in the visualizations.xml file (located in /plugins//WEB-INF/xml/config). Here, you add the style you previously created:

d3properties-3

 
4. We have to edit the transform Java class that the widget uses to return report data. This was listed in the styleCatalog.xml file. In my example, it is called ScatterPlotWidgetDataTransform. We will make two changes to this class, add a line to the render method, and add the setMojoVisProps method to create the Properties Editor:

d3properties-4

 
5. Now the fun part. So far we have declared that we want properties, and created the layout to include them. Now, we will use javascript to make them DO something. Open your plugin’s javascript file (mine is called VisScatterPlot.js and is located in /plugins//javascript/mojo/js/source). The declaration of the visualization has a renderGraph function. This is where we will include all the logic to apply our properties:

d3properties-5

 
6. After making all these changes, you will need to restart your web server. To view the properties, open a document that contains your widget in Design Mode. Right-click on the widget, choose ‘Properties and Formatting…’. Click the ‘Widget’ option in the left pane. Click the ‘Widget Properties’ button.

d3properties-6

 
7. You should have something that looks like this, showing the custom properties you created for your specific visualization.

d3properties-7

 

The following two tabs change content below.
Rebecca has worked with and specialized in the MicroStrategy SDK for over 5 years.

Comments