MicroStrategy Visualization Builder is a new feature of MicroStrategy 10 which allows you to import and create custom HTML5 visualizations using the Visualization SDK kit:
- Choose Download a local copy of the Visualization SDK
- Extract the downloaded zip file, and then put the
_VisBuilderfolder into theMicroStrategy/pluginsfolder - Restart your Tomcat server:
Visualization Builder is based on the dashboards page. All the settings are conveniently displayed on the user interface. MicroStrategy data structure knowledge is not required. It enables live JavaScript code and live CSS code changes, and no web server restarts are required to enable changes. In addition, it has features like auto completion of JavaScript code, live validation of JavaScript and CSS, supporting third-party libraries such as D3, Google Charts, HighCharts, and so on:
Consider that we need to implement a new type of visualization based on the Google Charts library. The steps are as follows:
- Install Visualization Builder by pasting the unzipped folder into the
pluginsfolder of MicroStrategy Web. - A new shortcut will show on the side menu of the home page:
- Left-click on the Visualization Builder.
- Load a dataset, and select it by using the Selecting Existing Dataset function on the top bar:
- Use the
SDK Sample Report. - Add
YeartoAttributesandUnits SoldandRevenue to Metrics. You will see a blank screen as there is no code to display yet. You can still see the data by clicking the top-right corner and choosing Show Data to See Popup with Data Grid or Change Visualization to Grid. - Go to the Properties tab, set the Visualization name to
Google Chart Line Graph, set Minimum number of metrics to2, check Available for dashboards, addhttp://www.google.com/jsapito the list of libraries, and click Apply:
- Click Save and set the Folder name as
GoogleVis. After the new plugin has been created, you can go to thepluginsfolder of your MicroStrategy Web folder to check it. - Now we use the Code Editor tab, to create code to support our visualization.
- Make the dataset usable by Google Charts:
var data = {}; var gridata = this.dataInterface; data.cols = []; data.cols[0] = {"id": "ATT_NAME_JS", "label": "Attribute", "type": "string"}; var i; for (i = 0; i < gridata.getColumnHeaderCount(); i++) { var metricName = gridata.getColHeaders(0).getHeader(i).getName(); data.cols[1 + i] = {"id": metricName, "label": metricName, "type": "number"}; } data.rows = []; for (i = 0; i < gridata.getTotalRows(); i++) { data.rows[i] = {}; var c = [], attributesValue = "", a, z; for (a = 0; a < gridata.getRowHeaders(i).size(); a++) { attributesValue += gridata.getRowHeaders(i).getHeader(a).getName() + " "; } c[0] = {"v": attributesValue}; for (z = 0; z < gridata.getColumnHeaderCount(); z++) { c[1 + z] = {"v": gridata.getMetricValue(i, z).getRawValue()}; } data.rows[i].c = c; } - Before working with the data, make it variable to hold some parameters:
var domNode = this.domNodeis a DOM node where the visualization will be rendered.var width = this.width, height = this.height. Read width and height dynamically from the Visualization container so it will occupy all available space.
- Load the Google visualization code to render the graph:
google.load("visualization", "1", {"callback": function () { var gdata = new google.visualization.DataTable(data); var options = {'title': 'Google chart', 'width': width, 'height': height}; var chart = new google.visualization.LineChart(domNode); chart.draw(gdata, options); }, "packages": ["corechart"]}); - Save the visualization. Now you have it in the Visualization gallery.