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:
_VisBuilder
folder into the MicroStrategy/plugins
folder
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:
plugins
folder of MicroStrategy Web.
SDK Sample Report
.Year
to Attributes
and Units Sold
and Revenue 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.Google Chart Line Graph
, set Minimum number of metrics to 2
, check Available for dashboards, add http://www.google.com/jsapi
to the list of libraries, and click Apply:
GoogleVis
. After the new plugin has been created, you can go to the plugins
folder of your MicroStrategy Web folder to check it.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; }
var domNode = this.domNode
is 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.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"]});