DEVELOP CUSTOM VISUALIZATIONS TO ENRICH ANY ANALYSIS

Transcription

1 DEVELOP CUSTOM VISUALIZATIONS TO ENRICH ANY ANALYSIS

2

3 Thank you for participating in a workshop at MicroStrategy World If you missed or did not finish an exercise and want to complete it after the conference, use this workbook and access the supporting files at microstrategy.com/world-2019-workshops *Workshop files will expire 4/30/2019

4 Develop Custom Visualizations to Enrich Any Analysis Introduction MicroStrategy s suite of capabilities includes powerful data discovery tools that let you explore data, answer pressing business questions, and easily share insights. The MicroStrategy Visualization Software Development Kit (SDK) is a set of tools that allows developers to create their own visualizations or convert an existing one found on the Internet. The MicroStrategy SDK lets enterprises take data insights to the next level and display data in interesting ways. This hands-on workshop is an introduction to the platform s customization capabilities in the domain of custom visualization. In this workshop you will: Customize a visualization and extend its capabilities using the Visualization SDK. Identify visualization properties that can extend, analyze, and utilize BI insights. Use a dossier containing multiple custom visualizations used as filters for each other. 4 MicroStrategy

5 MicroStrategy World 2019 Workshop Book Requirements For this workshop you need to have either MicroStrategy Desktop or MicroStrategy Workstation downloaded to your computer. If you did not bring a laptop with you, if your laptop permissions prohibit you from downloading software, or if you are otherwise unable to complete the necessary software installations, find a neighbor and form teams for the remainder of the workshop. If you have MicroStrategy Desktop, you do not need to install MicroStrategy Workstation. The workshop can be completed in either MicroStrategy Desktop or Workstation. Workshop software setup Follow the steps below to set up MicroStrategy and other software necessary to complete the workshop. Extract the workshop files 1 Locate the archive of files provided for this workshop. If you do not have it, ask your instructor. 2 Extract the files on your desktop into a folder called CustomViz. Install MicroStrategy Workstation If you have MicroStrategy Desktop installed, you do not need to install this software; skip to Install supporting applications, page 7. 1 In your browser, visit the download link provided by your instructor. 2 Extract the files from the downloaded.zip folder. 3 Open the extracted folder and double-click WorkstationSetup. 4 Follow the steps in the installer to complete the Workstation installation. MicroStrategy Workstation is now ready to go. Leave Workstation open as you will use it throughout the remainder of this workshop. MicroStrategy 5

6 Develop Custom Visualizations to Enrich Any Analysis MicroStrategy Desktop If you have MicroStrategy Workstation installed, you do not need to install this software; skip to Install supporting applications, page 7. 1 Download MicroStrategy Desktop for Mac or Windows 64-bit at Type the required information into the fields, then click Download Now. 6 MicroStrategy 3 Choose the appropriate link based on your computer for either Windows or Mac. For Windows 1 Extract the MicroStrategy Desktop zip file found in C:\Users\ <yourusername>\downloads. 2 Open the folder MicroStrategy Desktop Double-click DesktopSetup.exe. Follow the steps to complete the installation. Workshop software setup 6

7 MicroStrategy World 2019 Workshop Book For Mac 1 Double-click the MicroStrategy Desktop zip file found in MacintoshHD:\ Users\<yourusername>\Downloads. 2 Double-click MicroStrategy_11.1_Mac.dmg. Click to agree with the license. 3 Drag the MicroStrategyDesktop.app in to the Applications folder and follow the steps to complete the installation. MicroStrategy Desktop is now ready to go. Leave Desktop open as you will use it throughout the remainder of this workshop. Install supporting applications To successfully complete this workshop, you need to have access to the following: A utility that can create.zip archives If you have an application that can create a.zip archive, like 7zip, WinRAR, or Winzip. If you have Macintosh hardware, you are OK. Otherwise, download a compression utility using the links below. A good text editor You also want to use a dedicated text editor. Notepad++ (PC only), Sublime Text, or Visual Studio Code are good options; you cannot use a word processor like Word. Otherwise, install a text editor using the links below. Install instructions 1 To access a compression utility and a text editor, open one of the following sites: On a PC, navigate to On a Macintosh, navigate to 2 Follow the instructions on the site to install the zipping application and text editor. MicroStrategy Workstation: Unified authoring and administration Many business roles today are fast paced and dynamic, with employees rarely working on the same project every day. A banking analyst may need to analyze 9 Exercise 1: Import a custom visualization MicroStrategy 7

8 Develop Custom Visualizations to Enrich Any Analysis data, share compelling information and solutions, and implement new procedures or trainings for multiple bank sites. MicroStrategy Workstation makes these tasks easier by providing the tools to accomplish multiple goals all in one platform. Workstation combines the power of MicroStrategy Library, administration, project development, and content authoring into a single user experience. With Workstation, you can easily build and manage scalable enterprise content and systems in one place. You can access dossiers, reports, documents, and datasets, enabling you to generate insights offline or when connected to the server. In addition, if you need assistance or have questions, you can access Workstation tutorials and MicroStrategy Community right from Workstation itself. Exercise 1: Import a custom visualization In this exercise, you ll view a dossier and import the basic custom visualization you want to improve. The custom visualization is a D3 Bubble chart converted to support MicroStrategy data. 8 MicroStrategy

9 MicroStrategy World 2019 Workshop Book Open the dossier 1 Navigate to Desktop\CustomViz. Double-click ConsolesWar.mstr. Your dossier opens as shown below: This dossier is composed of three visualizations linked together two by two. If you select a manufacturer, the list of its consoles is displayed; if you select a specific console, its yearly sales are shown. Otherwise, you see all three manufacturers, all the consoles from the last two generations, and the yearly sales for all of them. Let s replace the consoles visualization to give us a better sense of the portion of the market that each represents. MicroStrategy 9

10 Develop Custom Visualizations to Enrich Any Analysis Add a custom visualization 1 In the Visualization Gallery on the right, click the plus (+) icon in the Custom area, as shown below. Click Import Visualization. 2 Navigate to Desktop\CustomViz. Select D3BubbleChart.zip, then click Open (Mac users will select Import). A confirmation of the successful import is displayed. 3 A new icon for the visualization,, is displayed in the Custom area. Hover your cursor over the new icon. A tooltip displays Enter description here. This is one of the many items you will customize in this workshop. 4 Select the Consoles visualization on the bottom left of the dossier. Click the D3 Bubble Chart icon to change the visualization type. The visualization is now displayed as a bubble chart, as shown below. 5 Play with the dossier, selecting a single manufacturer and a single console to see the interactions between the visualizations. Make sure you end up with nothing selected, like when you opened the dossier. As a dossier designer, your role is to use this new visualization to present your data in a meaningful way to the right audience. 10 MicroStrategy

11 MicroStrategy World 2019 Workshop Book Today, however, you are a developer working to improve the custom visualization (the D3 bubble chart) to give the end user a better experience. Before continuing work on the visualization and the dossier, let s explore the file structure of the Workstation product to see how the custom visualization was integrated into the product. Exercise 2: Explore the structure of a plug in Let s take a look at the Workstation file structure. Explore the structure of a plug in 1 Open File Explorer on your computer. 2 Navigate to C:\Program Files\MicroStrategy\Code\plugins. * * If you are using MicroStrategy Desktop instead of Workstation, the path is C:\Program Files\MicroStrategy\Desktop\Code\plugins. On a Mac, the path will be /Applications/MicroStrategy Workstation.app/Contents/Frameworks/ OneTierDashboardWindow.framework/Versions/A/Resources/ code/plugins This is the view you should have: Notice that the folder contains the D3BubbleChart subfolder. When you imported the visualization archive, MicroStrategy Workstation extracted it into the plugins folder and made it available to you immediately. Every custom visualization is a plug in added to the product. Anytime that you want to test a new visualization or a customization to a visualization, you import it and it is added to this folder. This also means that each time you want to test a new version, you need to uninstall the previous version. MicroStrategy 11

12 Develop Custom Visualizations to Enrich Any Analysis Every visualization for MicroStrategy is based on a specific set of files that defines the visualization and its features. MicroStrategy Visualization SDK provides a blank template that can help you convert an existing visualization that you find on the Internet to support MicroStrategy data. Below is a representation of the template and all the files that you need to have a viable customization. 3 Double-click the D3Bubblechart folder. Review the file structure of the folder, which should be similar to the sample above. The file in the source folder is named after the visualization itself. 4 Return to the plugins folder. 5 Since you are going to change the visualization, remove it from this dossier and import it after every change. To remove the visualization from the dossier and from MicroStrategy Workstation, follow these steps: a Return to MicroStrategy Workstation. b In the dossier, change the Consoles visualization and change it back to a grid. (Select the visualization and click the Grid icon in the Visualization Gallery.) c In the Custom area of the Visualization Gallery, right-click the D3Bubble chart icon (the one you added earlier) and click Delete. In the confirmation window, click OK. 6 Save the dossier with a different name. a Click File, then select Save As. b Click Browse PC and navigate to Desktop\CustomViz. 12 MicroStrategy

13 MicroStrategy World 2019 Workshop Book c Name the dossier MyConsolesWar, then click Save. 7 Close the dossier. 8 Return to File Explorer, displaying the plugins folder. The D3BubbleChart folder has disappeared, because you removed it from the environment. Every time you make a modification to a custom visualization, complete the same three steps that you just did: 1 Remove the custom visualization from the dossier by switching the visualization type back to a grid. 2 Remove the custom visualization from the Custom Gallery. 3 Close the dossier, this time without saving. You want to keep the dossier in its original state while testing your plug-in after each customization. Exercise 3: Start the customization As you played with the custom visualization, you will have noticed the following: The visualization is not named properly in the Visualization Gallery. The tool tip does not mention any attributes or metrics requirements like others in the Built-in area. The icon is generic. The drop zones for attributes are generic, mentioning only attribute and metric. You cannot customize much with the visualization itself, because it does not have any custom properties. These are all elements you want to modify. With this roadmap in mind, let s make these changes. The steps below adjust the description of the visualization and set the minimum number of attributes and metrics needed for the visualization. MicroStrategy 13

14 Develop Custom Visualizations to Enrich Any Analysis Prepare the source code 1 In File Explorer, navigate to Desktop\CustomViz. Extract D3BubbleChart.zip in this folder, which creates a subfolder named D3BubbleChart. This folder contains the source code to be modified. 2 Rename D3BubbleChart.zip to D3BubbleChart-original.zip. A new archive has to be built after every code modification. Make it a habit to rename the previous archive to keep track of your progress and potentially return to a previous state. This can be handy when trying a complicated modification that you cannot easily remove. An archive provides an easy way to return to a working version of your code. Adjust the visualizations.xml file to provide a description and requirements 1 Navigate to Desktop\CustomViz\D3BubbleChart\WEB-INF\xml\config. Right-click visualizations.xml and open it in a text editor. This workshop provides steps for Notepad++. Adjust the instructions to your text editor. 2 Locate the desc attribute in the visualization line. Change the value within the empty quotes to D3BubbleChart XX, where XX are your initials. * Pay attention to the quotes. If you delete one and type one manually, some text editors will use typography quotes (curved) instead of straight quotes. It is best to Copy/Paste an existing quote to avoid this. 3 At the end of the line, insert a space before /> and insert the following text: metric-minimum="1" attribute-minimum="1" Your line should resemble the image below: desc="d3bubble Chart XX" scope="18" projects="" style-name="d3bubblechart" is-mojo="true" metric-minimum="1" attribute-minimum="1"/> 4 Save the file. 14 MicroStrategy

15 MicroStrategy World 2019 Workshop Book Compile and test the visualization Repeat the steps in this section after each modification of the visualization s source code. These steps deploy the visualization in MicroStrategy Workstation and test it with your sample dossier. 1 In File Explorer, navigate to Desktop\CustomViz\. 2 Right-click D3BubbleChart and select the command that compresses the folder into a.zip archive. For example, with 7Zip, the command is Add to D3BubbleChart.zip. On a Mac, the command is Compress folder. 3 Return to Workstation. 4 Navigate to Desktop\CustomViz. Double-click MyConsolesWar.mstr. The dossier opens in Workstation. 5 In the Custom area of the Gallery, click the plus (+) icon, then select Import Visualization. 6 Navigate to Desktop\CustomViz. Select D3BubbleChart.zip and click Open. A confirmation of the successful import is displayed. 7 Hover your cursor over the new D3 Bubble Chart icon in the Custom area of the Gallery. The following tool tip is displayed: * If your bubble does not look the same in our dossier, you can create a new dossier and the bubble will display as above. 8 Select the Consoles visualization on the bottom left of the dossier. Click the D3 Bubble Chart icon to change the visualization type. The visualization is now displayed as a bubble chart, as shown below. MicroStrategy 15

16 Develop Custom Visualizations to Enrich Any Analysis 9 Play with the dossier, selecting a single manufacturer and a single console to see the interactions between the visualizations. Be sure to end up with nothing selected, like when you opened the dossier. 10 Select the Consoles visualization and change it back to a grid. (Select the visualization and click the Grid icon in the Visualization Gallery.) 11 In the Custom area of the Visualization Gallery, right-click the D3Bubble chart icon and select Delete. In the confirmation window, click OK. 12 Close the dossier without saving it. Congratulations! You just customized your visualization by adding a description and provided parameters for the minimum number of attributes and metrics. Exercise 4: Customize the visualization s icon Look back at our roadmap (see Exercise 3: Start the customization, page 13). The next item on the list is replacing the generic icon. This exercise shows you how to use your own icon. To save time, we have one prepared for you. The new icon definition is a.css style file applied inside the application. Follow these steps to change the icon. 16 MicroStrategy

17 MicroStrategy World 2019 Workshop Book Adjust the Html5ViPage.css file 1 In File Explorer, navigate to Desktop\CustomViz. Rename D3BubbleChart.zip to D3BubbleChart-desc.zip. 2 Navigate to Desktop\CustomViz\D3BubbleChart\style. 3 Open Html5ViPage.css with your text editor. This file is intentionally blank. 4 In File Explorer, open Desktop\CustomViz\Changeicon.css using your text editor. The content is shown below..mstrmojo-vigallery.mstrmojo-vigallerylist.item.ic-d3bubblechart > div > div background: url(images/screenshot.png) no-repeat scroll; background-size: 30px;.mojo-theme-dark.mstrmojo-VIGallery.mstrmojo-VIGalleryList.item.ic-D3BubbleChart > div > div background: url(images/screenshot.png) no-repeat scroll; background-size: 30px; 5 Copy the content of the file and paste it inside Html5ViPage.css. 6 Save the file. Test the visualization 1 Use the steps in Compile and test the visualization, page 15 to compile and add the visualization to your MyConsolesWar dossier. 2 The icon for the visualization in the Custom area should look like the icon shown below: 3 Use the steps in Compile and test the visualization, page 15 to change it to a bubble chart and test to confirm that all functionality is still there. A clue that some of the new code is not right is that you lose some MicroStrategy 17

18 Develop Custom Visualizations to Enrich Any Analysis functionality from one iteration of your code to the next. If that happens, go back to the previous working version and adjust the code. 4 Complete the steps in Compile and test the visualization, page 15 to return the visualization in the dossier to a grid, remove the custom visualization from MicroStrategy Workstation, and close the dossier without saving. Congratulations! Your visualization now has a custom icon. Notice the path of the images. In your organization, this may need to be adjusted to a corporate repository of standard images set in place by the Services Architect and the System Administrator. Exercise 5: Create custom drop zones The next element on your roadmap is the drop zones. A drop zone is the area where you drag dataset objects that you want to include in the visualization. It defines the behavior of the objects for how they will be used in the visualization. You can add attributes and metrics to the drop zones. Some of the common drop zones used are Attributes, Metrics, Grouping by, Size by, Break by, Color by, and so on. At its most basic, the editor where you drag and drop attributes and metrics offers two or more zones. Below is an example of the simplest drop zones you can find: The grid visualization has more zones and more suitable names for the zones available, as shown below on the left. Other out of the box visualizations offer even more zones for more complex scenarios, like a network chart illustrated below on the right. 18 MicroStrategy

19 MicroStrategy World 2019 Workshop Book You can customize the drop zone for your visualization built on the MicroStrategy JavaScript platform, by configuring the visualizations.xml file. Using the API provided in mstrmojo.vi.models.customvisdropzones, you can define: Which zone to display on the visualization. The behavior of the visualizations when objects are added or removed from the drop zone. With that in mind, the Services Architect gave you the following requirements for the custom zones: Two zones for attributes, called Color and Group. One zone for metrics called Size, accepting only one element at a time. Follow the steps below to add these zones and customize the D3BubbleChart even more. MicroStrategy 19

20 Develop Custom Visualizations to Enrich Any Analysis Adjust the visualizations.xml file 1 In File Explorer, navigate to Desktop\CustomViz. Rename D3BubbleChart.zip to D3BubbleChart-icon.zip. 2 Navigate to Desktop\CustomViz\D3BubbleChart\WEB-INF\xml\config. Open visualizations.xml in your text editor. 3 At the end of the line, insert a space before /> and insert the following text: drop-zones="plugins.d3bubblechart.d3bubblechartdropzones" widget-type="7" The end of the line in the file should look like the image below. attribute-minimum="1" drop-zones="plugins.d3bubblechart.d3bubblechartdropzones" widget-type="7"/> 4 Save the file. Install the new zones class file As mentioned in the configuration file above, a new class is needed to define the zones and their behavior. This file is called D3BubbleChartDropZones.js and is provided in the exercises files. Follow these steps to put it in place. 1 In File Explorer, navigate to Desktop\CustomViz\. 2 Copy D3BubbleChartDropZones.js. 3 Navigate to Desktop\CustomViz\D3BubbleChart\javascript\mojo\js\ source. 4 Paste the file. 5 Open D3BubbleChartDropZones.js in your text editor. Take a few moments to examine the content. Can you identify the section that defines the drop zones? Can you find the section that defines the behavior when an object is dropped into a zone? To view these sections, see Appendix A, Code Extracts. 6 Close the file. 20 MicroStrategy

21 MicroStrategy World 2019 Workshop Book Test the visualization 1 Use the steps in Compile and test the visualization, page 15 to compile and add the visualization to your MyConsolesWar dossier. 2 Use the steps in Compile and test the visualization, page 15 to change the visualization to a bubble chart and test the visualization to confirm that all functionality is still there. A clue that some of the new code is not right is that you lose some functionality from one iteration of your code to the next. If that happens, go back to the previous working version and adjust the code. 3 In the Editor panel, the drop zones should look like the image below. 4 Complete the steps in Compile and test the visualization, page 15 to return the visualization in the dossier to a grid, remove the visualization from MicroStrategy Workstation, and close the dossier without saving. Congratulations! Your visualization now has custom drop zones with your names and the expected behavior associated with them. Exercise 6: Add custom properties The last item on your roadmap is to add custom properties to allow end users more flexibility when using the visualization. After a conversation with the Services Architect and the Application Architect, you came up with the following custom properties: Size of the caption in the bubbles. Possibility to display the name and/or the value for each bubble. MicroStrategy 21

22 Develop Custom Visualizations to Enrich Any Analysis Custom properties are present in a visualization as an extra drop-down list inside the Format panel. To save and retrieve custom properties as well as to customize the Format panel for the visualization, you can use the APIs available in mstrmojo.vi.models.editors.customviseditormodel. These APIs support commonly used controls for customizing the Properties panel, like text boxes, drop-down lists, and character groups that contain multiple other controls. They also provide various functions for setting and retrieving properties. To create and use custom properties in a visualization, you must first create or select a visualization, create a JavaScript for customizing the Format panel, and configure visualizations.xml to point to this support JavaScript file, like you did for the drop zones. You can get and set the values of the properties for the controls on the Format panel by using the plot() method of the JavaScript class CustomVisBase.js. The get property refers to reading the value from the Format panel. The set property refers to setting a property s value that is saved with the visualization. For example, using the set function, the value for showlegend is initially defined as false. When the Format panel is viewed, the Show Legend check box is cleared. When a user selects the Show Legend check box, the visualization returns the value of showlegend as true. Based on that information, you decide to implement the custom properties mentioned above. The additional JavaScript for the editor is provided in your exercise files. Adjust the visualizations.xml file 1 In File Explorer, navigate to Desktop\CustomViz. Rename D3BubbleChart.zip to D3BubbleChart-Dropzones.zip. 2 Navigate to Desktop\CustomViz\D3BubbleChart\WEB-INF\xml\config. Open visualizations.xml in your text editor. 3 At the end of the line, insert a space before /> and insert the following text: editor-model="plugins.d3bubblechart.d3bubblecharteditormodel" 22 MicroStrategy

23 MicroStrategy World 2019 Workshop Book The end of the line in the file should look like the image below. widget-type="7" editor-model="plugins.d3bubblechart.d3bubblecharteditormodel"/> 4 Save the file. Install the new editor class file In this configuration file, a new class is needed to define the editor and its behavior. The file is called D3BubbleChartEditorModel.js and is provided in the exercise files. Follow these steps to put it in place. 1 In File Explorer, navigate to Desktop\CustomViz\. Copy D3BubbleChartEditorModel.js. 2 Navigate to Desktop\CustomViz\D3BubbleChart\javascript\mojo\js\ source. 3 Paste the file. 4 Open D3BubbleChartEditorModel.js in your text editor. Take a few moments to examine the content. Can you identify the portion of code that defines the GUI elements to display in the editor? Can you find the links to the visualization code that react to property changes? To view these sections, see Appendix A, Code Extracts. 5 Close the file. Update the visualization file The visualization code also needs to be updated to abide by the properties exposed in the editor. Follow these steps to replace the visualization code with a new version containing code to handle the new custom properties. 1 In File Explorer, navigate to Desktop\CustomViz\. 2 Rename D3BubbleChart-editor.js to D3BubbleChart.js. Copy the file. 3 Navigate to Desktop\CustomViz\D3BubbleChart\javascript\mojo\js\ source. MicroStrategy 23

24 Develop Custom Visualizations to Enrich Any Analysis 4 Paste the file. Accept to replace the file. If you were curious enough to inspect D3BubbleChart.js like we did for other files, you would discover that these functions were added: updatelabelsize: function(weight) updatelabelformat: function (rawd, labels) Test the visualization 1 Use the steps in Compile and test the visualization, page 15 to compile and add the visualization to your MyConsolesWar dossier. 2 Use the steps in Compile and test the visualization, page 15 to change the visualization to a bubble chart and test the visualization to confirm that all functionality is still there. 3 In the dossier, switch to the Format panel. From the first drop-down list on the panel, select Label Editor. Your screen will look like the image below. 4 In the Label format area, click Values. Notice the bubbles in the visualization display only the values. 5 Click Text. Now, both text and values are displayed. 6 Adjust the text size to your liking. Keep the aesthetics pleasing. You may want to provide more room for the visualization by making it wider. The table on 24 MicroStrategy

25 MicroStrategy World 2019 Workshop Book the right does not need as much space to convey its message. The example below uses size Complete the steps in Compile and test the visualization, page 15 to return the visualization in the dossier to a grid, remove the visualization from MicroStrategy Workstation, and close the dossier without saving. Congratulations! Your visualization now has a custom editor with properties that end users can adjust in their own dossiers. Exercise 7: Add more custom properties Some end users that have placed the D3BubbleChart visualization in their dossiers have provided feedback. You decide to add check boxes to the custom properties for the following features: Bold Change the font to Comic Sans MS (instead pointing to a corporate standard font) The process is similar to the previous exercise, meaning: Adjust D3BubbleChartEditorModel.js to display the correct UI controls. MicroStrategy 25

26 Develop Custom Visualizations to Enrich Any Analysis AdjustD3BubbleChart.js to include the supporting steps when the visualization is drawn or a custom property is changed. Install the new editor class file To accommodate the new check boxes to add to the user interface, replace the editor file with a new one. * A complete replacement of the file is done during the workshop to minimize the risks of breaking the code. In normal conditions, you would edit the file using a text editor and add the specific lines of codes to incorporate those UI elements. 1 In File Explorer, navigate to Desktop\CustomViz. Rename D3BubbleChart.zip to D3BubbleChart-Editor1.zip. 2 In File Explorer, navigate to Desktop\CustomViz\. 3 Copy D3BubbleChartEditorModel-2.js. 4 Navigate to Desktop\CustomViz\D3BubbleChart\javascript\mojo\js\ source. 5 Paste the file. 6 Delete D3BubbleChartEditorModel.js. 7 Rename D3BubbleChartEditorModel-2.js to D3BubbleChartEditorModel.js. 8 Open D3BubbleChartEditorModel.js in your text editor. Take a few moments to examine the content. Can you find the added code that defines the GUI elements to display in the editor? To identify the sections, see Appendix A, Code Extracts. Update the visualization file The visualization code also needs to be updated to abide by the properties exposed in the editor. Follow these steps to replace the visualization code with a new version containing code to handle the new custom properties. 1 In File Explorer, navigate to Desktop\CustomViz\. 26 MicroStrategy

27 MicroStrategy World 2019 Workshop Book 2 Rename D3BubbleChart-editor2.js to D3BubbleChart.js. Copy the file. 3 Navigate to Desktop\CustomViz\D3BubbleChart\javascript\mojo\js\ source. 4 Paste the file. Accept to replace the file. If you were curious enough to inspect D3BubbleChart.js like we did for the other files, you would discover that the following functions were added: updatelabelface: function(changeface) updatelabelweight: function(weight) Test the visualization 1 Use the steps in Compile and test the visualization, page 15 to compile and add the visualization to your MyConsolesWar dossier. 2 Use the steps in Compile and test the visualization, page 15 to change the visualization to a bubble chart and test the visualization to confirm that all functionality is still there. 3 In the dossier, switch to the Format panel. From the first drop-down list on the panel, select Label Editor. Your screen will look like the image below. 4 In the Label format area, click Values. Notice the bubbles in the visualization display only the values. MicroStrategy 27

28 Develop Custom Visualizations to Enrich Any Analysis 5 Click Text. Now, both text and values are displayed. 6 Adjust the text size to your liking. Resize the visualization so it is wider. 7 Select the Bold check box and the Comic font check box. Your visualization looks like the image below. 8 Complete the steps in Compile and test the visualization, page 15 to return the visualization in the dossier to a grid, remove the visualization from MicroStrategy Workstation, and close the dossier without saving. Congratulations! You started with a simple visualization and added many features and transformed it into a very usable and practical visualization that end users will want to use again and again. They can use the new visualization within MicroStrategy Workstation like we did here, or in MicroStrategy Desktop, an agile environment for individual data discovery and ad-hoc, self-service reporting. They can also connect to the enterprise Intelligence Server and share valuable BI data with your department or the organization. Going further In this workshop you have successfully deployed a custom visualization and added many features that the Visualization SDK offers. You replaced files and the amount of code to write was minimal to ensure that everyone can see the results on their screen. Two tasks were left out of this workshop that you may want to explore further if you want to know more about custom visualizations within the MicroStrategy platform. Converting a visualization 28 MicroStrategy

29 MicroStrategy World 2019 Workshop Book Converting a visualization You used a custom visualization that was already compatible with MicroStrategy. However, when browsing the Internet, you can find many visualizations that are presented with a specific data set (often a.csv or Excel file). Taking the JavaScript of this visualization and adapting it to request and digest MicroStrategy data takes a fair amount of JavaScript skills and knowledge about how MicroStrategy delivers data in code. Creating a visualization from an empty template You used a visualization that had all the necessary files to start with. That included the description file (visualizations.xml) and many others. The Visualization SDK provides an empty template to help you start when converting a visualization you find online. The Visualization SDK also provides a plugin called Visualization Builder that can help you start building that file structure for you. Refer to the Visualization SDK for more details on Visualization Builder. Congratulations You have completed the Develop Custom Visualizations to Enrich Any Analysis workshop! To learn more about the Visualization SDK, MicroStrategy offers the Advanced SDK for Customizing Visualizations course. For resources and certifications with MicroStrategy Education, visit MicroStrategy 29

30 Develop Custom Visualizations to Enrich Any Analysis This appendix contains the source code for specific files mentioned in the workshop. From Exercise 5: Create custom drop zones Below are extracts of the file D3BubbleChartDropZones.js. The first portion defines the zones, while the second part defines the behavior when an object (attribute or metric) is dropped in a zone and if an object is allowed in a zone. Here the coded restriction prevents an object from being in both Color and Group. getcustomdropzones: function getcustomdropzones() var ENUM_ALLOW_DROP_TYPE = mstrmojo.vi.models.customvisdropzones.enum_allow_drop_type; return [ name: 'Color', title: mstrmojo.desc(13828, 'Drag attributes here'), maxcapacity: 1, 30 MicroStrategy

31 MicroStrategy World 2019 Workshop Book allowobjecttype: ENUM_ALLOW_DROP_TYPE.ATTRIBUTE, disabled: false, name: 'Group', title: mstrmojo.desc(13828, 'Drag attributes here'), allowobjecttype: ENUM_ALLOW_DROP_TYPE.ATTRIBUTE, 0 disabled: this.getdropzoneobjectsbyindex(0).length ===, name: 'Size', title: mstrmojo.desc(13827,'drag metrics here'), maxcapacity: 2, allowobjecttype: ENUM_ALLOW_DROP_TYPE.METRIC ];, shouldallowobjectsindropzone: function shouldallowobjectsindropzone(zone, dragobjects, idx, edge, context) var me = this; return (object) alloweditems: mstrmojo.array.filter(dragobjects, function switch(zone.n) case 'Group': return!me.isobjectinzone(object, 'Color'); return true; ) ;, getactionsforobjectsdropped: function getactionsforobjectsdropped(zone, droppedobjects, idx, replaceobject, extras) MicroStrategy 31

32 Develop Custom Visualizations to Enrich Any Analysis var me = this, actions = []; switch(this.getdropzonename(zone)) case 'Color': (object) mstrmojo.array.foreach(droppedobjects, function if (me.isobjectinzone(object, 'Group')) object); me.getremovedropzoneobjectsactions(actions, 'Group', ); break; case 'Size': this.getadddropzoneobjectsactions(actions, 'Tooltip', droppedobjects, idx, extras);, break; return actions; From Exercise 6: Add custom properties Below is an abstract of the file D3BubbleChartEditorModel.js. This portion of code defines the GUI elements to display in the editor, and the links to the visualization code to react to property changes. name: 'Label Editor', value: [ style: $WT.EDITORGROUP, items: [ style: $WT.LABEL, labeltext: "Label format", 32 MicroStrategy

33 MicroStrategy World 2019 Workshop Book style: $WT.BUTTONBAR, propertyname: "labels", labeltext: "Label format", items: [ labeltext: "Text", propertyname: "text", labeltext: "Values", propertyname: "values" ], config: suppressdata: true, clientundoredocallback: function(), onpropertychange: function (propertyname, newvalue) if (propertyname === "labels") labels = newvalue;, return ; callback: function() rawd = myviz.datainterface.getrawdata(mstrmojo.models.template.dataint erface.enum_raw_data_format.adv);, myviz.updatelabelformat(rawd,labels); multiselect: true MicroStrategy 33

34 Develop Custom Visualizations to Enrich Any Analysis ], style: $WT.EDITORGROUP, items: [ style: $WT.TWOCOLUMN, items: [ style: $WT.LABEL, name: "text", width: "40%", labeltext: "Label Size", style: $WT.STEPPER, width: "60%", propertyname: "labelsize", min: 8, max: 32, config: suppressdata: true, clientundoredocallback: function(), newvalue) onpropertychange: function (propertyname, if (propertyname === "labelsize") labelsize = newvalue; return ;, callback: function() myviz.updatelabelsize(labelsize); 34 MicroStrategy

35 MicroStrategy World 2019 Workshop Book, ] ] ] From Exercise 7: Add more custom properties Below is an abstract of added content in D3BubbleChartEditorModel.js. This portion of code defines the GUI elements to display in the editor and the links to the visualization code to react to property changes. style: $WT.EDITORGROUP, items: [ style: $WT.TWOCOLUMN, items: [ style: $WT.CHECKBOXANDLABEL, propertyname: "BoldText", labeltext: "Bold", config: suppressdata: true, clientundoredocallback: function(), onpropertychange: function ( propertyname, newvalue) if (propertyname = "BoldText") BoldText = newvalue; MicroStrategy 35

36 Develop Custom Visualizations to Enrich Any Analysis //console.log(boldtext); return ;, callback: function() myviz.updatelabelweight(boldtext); ] ], style: $WT.EDITORGROUP, items: [ style: $WT.TWOCOLUMN, items: [ style: $WT.CHECKBOXANDLABEL, propertyname: "FancyText", width: "100%", labeltext: "Comic font", config: suppressdata: true, clientundoredocallback: function(), onpropertychange: function ( propertyname, newvalue) if (propertyname = "FancyText") FancyText = newvalue; //console.log(fancytext); 36 MicroStrategy

37 MicroStrategy World 2019 Workshop Book return ;, callback: function() myviz.updatelabelface(fancytext); ] ] MicroStrategy 37

38 1850 Towers Crescent Plaza Tysons Corner, VA Copyright All Rights Reserved. EV-COLL-0969 microstrategy.com