MicroStrategy has a built-in map to create interactive dashboards. In this article we will depict how to replicate the same feature in MicroStrategy for a custom image. Building a Dynamic Dashboard based on a custom image is a feature rich in visualization. The main Idea of this dashboard is to insert the custom image and dissect it, and then based on the user selection on the areas of the custom image the dashboard will be interactive.
To build the dashboard first follow these steps:
Step 1:
Select the image to be customized in the dashboard.
Step 2:
Generate the Html file with coordinates of the areas for the custom image.
Below is the example of editing the image online to generate the Html file.
The generated Html file will look like the image below.
NOTE: The title in the HTML file should be named the same as it is in the element of the attribute in MSTR. If the naming doesn’t match the value won’t load in the dashboard.
MicroStrategy has a SDK “Image Map Coordinate utility” build to generate html file for images.
There are many online image map generator to generate the html file. Some of the online websites are
Step 1:
Before including the required file, shape file of the MicroStrategy need to be edited. Shape file which holds all the data of the image layouts available.
In order to edit the Shape file a new line is added for the custom image. The following needs to be addressed when writing the shape file.
ShapeKey : Unique shape key identifier to identify the shape file.
Name : Specifies the name that displays in the widget properties under shape file dropdown.
ShapeFile : Represents the path of the generated html file for the custom image.
ShapeType: Type of area created while generating the html file for the custom image.
Role : Geo role assigned to the shape file. Other shape files with the same geo role will be displayed as options in the visualization. The options are:
The above are important properties of the shape file to be addressed while creating.
Note:
The Area names in the HTML file should match the element names of the attributes for the dashboard to populate results. The naming conventionality has to be verified with the HTML and shape file.
Step 2:
After editing the shape file, it is copied along with Image file and Html file in 3 locations to make it available in the MicroStrategy.
Note:
The custom image was not displayed in the dashboard, after further research it was realized that the image has to be added to all the above specified folders as well as the image folder.
The path of the image folder is C:\Program Files (x86)\MicroStrategy\Web ASPx\Images
Step 3:
Once all the files have been copied the ISS service is restarted to ensure MicroStrategy detects the changes made.
Step 1:
Build a report with the attribute which holds all the elements in our custom image. The report should have the metric and facts associated with the custom image.
Step 2:
Create a Dashboard and include the report created in the previous step.
Step 3:
Right click on the report and select “Properties and formatting” and select Widget.
And select Flash-> Image layout
Make sure the DHTML option is checked from the menu.
Step 4:
Click on the Widget Properties from the same dialog box and a new window opens with options. Select the Shape file to see the new shape file created in the list of Shape files available.
Step 5:
Select the Display mode as Area
Step 6:
Add a grid version to the side of the image layout and then select the image layout and grid. Then right click to find the option “select target” and select the desired grid.
Step 7:
After the above changes has been applied, execute and save the dashboard. The users would have the ability to select on the custom image, and then based on the selection of the respective data the grid would be populated.
Below is the image with Default selection.
Below is the image with the selection of area and the grid filtered out with Northeast region.
Even though the learning curve for MicroStrategy is slightly higher, the tool provides powerful dashboards which deliver meaningful insights. From a business perspective, Microstrategy is a cost-effective product which assists businesses with making mission-critical decisions.