Widgets provide the user with a visual and interactive look for their data. In this section, with MicroStrategy 10 we will discuss DHTML widgets. We will also talk about replacing Flash widgets with other components, such as graph or selectors.
The following screenshot shows the types of DHTML widget available with MicroStrategy 10:
Perform following steps to create widgets:
- In MicroStrategy Web, open the document in
Design Mode. - Click Insert | Widgets | DHTML and select the appropriate widget.
- Click on the location in your document where you want to place the widget. The grid/graph containing the widget is displayed. A small icon at the bottom-right corner of the grid/graph identifies the type of widget you have added to the document.
- Add objects to the grid/graph from the Dataset Objects panel on the left, select objects, and drag them on top of the widget, based on the requirements of a selected widget type.
This is a calendar selector that lets the user view data based on the date selected. The date selection widget displays a calendar where the user can select the date for which data is needed.
The minimum requirement for the date selection wizard is at least one date attribute.
To create a date selection widget:
- Open the document in MicroStrategy Web, in design mode.
- Create the grid/graph or panel stack to be used as the target.
- Once a target is created, follow the steps to create the selector widget.
- Click the Insert menu | Widgets | DHTML | Date Selection.
- Click on the location in the document where you want to place the widget. The grid/graph containing the widget is displayed.
- From the Dataset Objects panel on the left, select one date attribute and drag it on top of the grid/graph's rows.
Now to connect the selector to the target, right-click the attribute to be used as the selector, and choose Use As Selector.
Sample document with date selection wizard
A graph matrix widget allows the user to analyze trends in various metric dimensions. Basically, a graph matrix is composed of several area graphs. The graphs should have either three attributes in a row and one metric in a column, or two attributes in a row and one attribute and one metric in a column.
For example, in the following widget, the rows of the report display two attributes, sales territory region and product category, and the column displays one attribute, calendar year, and one metric, total sales:
DHTML view graph
In Flash (deprecated) view the graph location is displayed as follows:
A separate graph is displayed for each combination of objects. To view a document in Flash view:
- Select the graph.
- Click Tools | Report custom visualization.
- Move the graph matrix (deprecated) from available to selected.
- Click OK.
A heat map widget represents different attribute elements using combinations of colored rectangles. In a heat map:
- Rectangle size represents the relative weight
- Rectangle color represents the relative change in the value of the rectangle (a percentage term)
- Hovering over a rectangle displays complete information about the associated metrics and attribute values
The minimum requirement for a heat map is at least one attribute in a row and two metrics in a column. Based on the attributes selected, the rectangles are created and grouped.
In the following example, we show the total profit and sales made by a product in different regions on a yearly basis. To do this, we have selected three attributes, product, year, and region, and two different metrics, total product and total sales.
The following is the DHTML view of the heat map:
A map widget provides data for location-based analysis. We will discuss this widget in detail in the section covering the integration of ESRI maps with MicroStrategy.
Network widgets allow the user to identify an individual item and the relationship between these items. With this widget, the user can choose from one of the following three layout options:
- Force-directed layout
- Circular layout
- Linear layout
The minimum requirements for a network widget are two attributes, which act as starting and ending nodes for the edges, and three metrics, used to size the edges and nodes, and color the edges.
Let's say the user wants to identify the relationship between the products sold in different regions based on profit, cost, and revenue; the following network graph displays this:
Forced-directed layout
A different representation is used to display the relationship between attributes and metrics:
Circular layout
And now the linear representation of attribute and metric connectivity:
Linear layout
A survey widget lets the user create a survey in the database. The user can answer survey questions, which are then stored in the data source. This widget allows the user to dynamically generate and maintain surveys.
Prerequisites for creating a survey widget are as follows:
- Create table access in database
- MicroStrategy 9.4 or above
- Transaction service license
To create a survey widget:
- Create or import a table with the information needed to create or display a survey, for example
questionID,questiontitle,answertitleand so on:
- Add the created or imported table to the warehouse catalog and import the table prefix.
- Create the attributes based on each of the columns in the added table.
- Create a report with the newly created attributes.
- Create another table to store the survey response.
- Create a transaction report using freeform SQL.
- Create transaction reports.
Freeform SQL editor
- Go to MicroStrategy Web and create a document based on adding the report created in step 4.
- Right-click on the added report and click Properties and Formatting.
- Under Properties and Formatting, go to the grid and uncheck Enable incremental fetch on grid, then navigate to widgets and set it as DHTML survey.
- Click Widget Properties, match the survey elements to the appropriate template units, and click OK.
- Again, right-click on the report and select Configure Transaction.
- In the configure transaction dialog box, browse for the report created in step 6 and update the input properties accordingly.
- Create an Action Selector button to submit the survey.
- Save and run the document.
- In presentation mode, fill in the survey answers and press Submit.
- The table created in step 5 should be updated based on the user's response:
Sample of a survey widget on a document
A timeline widget provides the ability to look at data from different time frames on a single page, allowing the user to quickly spot repeating trends.
The minimum requirements for a timeline widget are as follows:
- The report must have the first two attributes on the row axis, and the first attribute must have its first form.
- The first attribute has the following forms:
- Event name: This mandatory form is displayed on the horizontal bar () representing the event on the timeline
- Event description: This optional form displays the description in the tooltip
- Event image: This optional form displays the image in the tooltip that opens when an event is clicked on in the timeline
- Event color: This optional form is the color of the horizontal bar
- Event icon: This optional form is the source for the image displayed on the horizontal bar
- Event text position: This optional form determines whether to start the text of the event name to the right of or on top of the horizontal bar
- The second attribute represents the start date of the event
- The third attribute is optional and represents the end date of the event
Let's say an HR department wants to understand the trends for employee retention by seeing the start date and end date for an employee, and how long the employee stayed with the company; this is achieved using a timeline:
Sample document with a timeline widget
In MicroStrategy 10, use the following rules to replace Flash widgets with a graph:
|
Flash widget |
Graph |
|
Funnel |
Funnel |
|
Interactive bubble graph |
Bubble |
|
Interactive stacked graph |
Vertical Area (change the graph sub-type to Stacked in the Graph toolbar) |
|
Time series slider |
Vertical Area |
|
Flash widget |
Selector |
|
Date selection |
Calendar |
|
Fish eye |
Listbox |