PerformancePoint Dashboard Sizing Explained

This article gives on overview of PerformancePoint dashboard sizing behavior, and how to configure zones and dashboard items to achieve desired behavior in deployed dashboards. This article will cover the following topics:

· Zone Sizing and Orientation

· Dashboard Item Sizing Options

· The Relationship Between Zone and Item Sizing

· Common Sizing Scenarios

· Frequently Asked Questions

This article assumes some basic knowledge of the PerformancePoint Dashboard Designer.

Zone Size and Orientation

Let's start by discussing Zone sizing and orientation. Zones in PerformancePoint dashboards are similar to zones on a SharePoint page, except that PerformancePoint zones may be configured to occupy a certain percentage of the dashboard page (see "What is a Dashboard Page?" below.) Zone size is configured in the zone settings dialog, which is launched from a right-click menu on the dashboard zone.

Figure 1: Zone Settings | Size Tab

Zones may only be sized by specifying a percentage of dashboard page, no other sizing options are available for zones. (Note that auto-size and pixel options are grayed-out in the dialog shown in the previous figure.) The size of the zone may affect the size of the items contained within the zone, but in most cases items will expand zones as needed. This is explained in more detail in the section "The Relationship between Zone and Item Sizing."

Some other things to keep in mind about zone sizes:

· Zones with one or more items have a minimum width of 200 pixels.

· Zones with no items are sized at 0 pixels. The zone may appear to not be in the dashboard, but the zone will be visible if the dashboard page is placed into edit mode in SharePoint.

What is a Dashboard Page?

The size of the dashboard page that "percentage of dashboard page" is based on is dependent on the frame that the dashboard is rendered in, as well as the size of the browser window. SharePoint navigational menus, or other items in the master page, may reduce the amount of available screen real estate as shown in the examples below.

In this first example, the dashboard was deployed using the PerformancePointDefault master page. The dashboard page fills nearly the entire browser window.

Figure 2: Available Space, PerformancePoint Default Template

In the next example, the dashboard was deployed using the default master template, which includes SharePoint navigational web parts and page info. These additional web parts may be useful, but note that they do reduce the size of the dashboard page (as compared to the previous example.)

Figure 3: Available Space, WSS Default Template

Zone Orientation

Zone orientation affects how items are arranged in the zone. Zone orientation is configured in the zone settings dialog, shown below.

Figure 4: Zone Settings | Orientation Tab

Zone orientation options are compared in the following figure.

Figure 5: Zone Orientations Compared

Zone orientation can have a big impact on how elements are sized within the zone, particularly when items are sized as a percentage of dashboard page. This is discussed in more detail in following sections.

Dashboard Item Sizing Options

Dashboard items have their own sizing options, which are interrelated to the configuration of the item's parent zone. In this article, the term "item" refers to dashboard content: scorecards, reports, and filters. Items have three options for setting width and height. The three options are:

1. Auto-size

2. Percentage of dashboard page

3. Pixels

Item sizes are configured in the Edit Item dialog, as shown below.

Figure 6: Edit Item Dialog

Not all sizing options are available for every item. The configuration of the item's parent zone also impacts what item sizing options are available. Valid zone/item sizing options are discussed in the section "The Relationship between Zone Size and Item Size." Also keep in mind that items may have independent settings for height and width, so these items may be "mixed-and-matched" per item to meet your sizing requirements.

Item size options are discussed in detail below.

Item Size Option #1: Auto-size

This option will size the item by a pre-defined pixel size. Some items such as analytic charts have a fixed default pixel size for auto-width. Some items such as scorecards have more complex auto-sizing algorithms.

Some auto-size defaults are listed below:

· Filters are always sized as auto-size width and auto-size height. This cannot be overridden with pixel or percentage-based item sizing. The minimum width of a filter is 375 pixels, and will grow in width depending on the size needed by the text in the filter drop-down.

NOTE: This can produce some confusing sizing behavior for filters, as the width needed by the currently selected member may be much less than what is needed to display the tree when the filter drop-down is selected. Also, the minimum width of a filter may be much wider than appears to be needed. When more than one filter is used on a dashboard page, this can give the effect of wasted white space between filters.

Minimum filter width may be adjusted in the ParameterTree.css file. See the article Working with the Monitoring CSS Files to Adjust Settings in Deployed Dashboards on the PerformancePoint team blog for more detail.

· The default size for Analytic Chart and Analytic Grid is 450 pixels in height by 800 pixels in width. Analytic Grids display scroll bars when the grid needs more space than afforded by the default height and width.

· Scorecards will auto-size according to the size required by the scorecard. This is dependant on the number of columns displayed in the scorecard (actual and targets) and the dimension members displayed in the scorecard row and columns.

When to Use Auto-Size

Auto-size is commonly used when:

· The dashboard builder needs to ensure that the item will be given enough screen real estate to be effectively displayed, and the scrolling behavior of the dashboard page is less of a concern

· The dashboard item should not dynamically resize itself when the browser size is changed (and the page refreshed) by the user

A common misconception is that auto-size will cause the item to dynamically resize when the dashboard user resizes the browser window, but this is not the case. For dynamic resize behavior, use percentage of dashboard page, which is discussed in the following section.

Item Size Option #2: Percentage of Dashboard Page

This option will size the item based on the percentage of dashboard page that its parent zone has available. The percentage is not editable; it is inherited from the parent zone. The percentage is dependent on the percentage of dashboard page that the parent zone may occupy (see "Zone Sizing and Orientation" above) and the number of elements in the zone.

Consider the example shown in the figure below. The zone is configured to occupy 100% of the dashboard page height. The zone contains two items, each item configured to use percentage of dashboard page for height. Each item will occupy 1/2 of the dashboard page height, or roughly 50%.

Figure 7: Zone with Two Percentage-sized Items

If we add another element to the zone, each item will automatically adjust its height to fit the new element in the zone. Each item now occupies 1/3 of the dashboard page height, or roughly 33%.

Figure 8: Zone with Three Percentage-sized Items

When to Use Percentage of Dashboard Page

This sizing option is useful when dynamic resizing of items within the browser window is desired. Using this sizing option will cause elements to resize in the deployed dashboard as the browser size is changed, as changing the browser size changes the size of the dashboard page. This dynamic resizing behavior can be applied to height, width, or both.

Again, terminology may be confusing here - it is reasonable to expect that items using "auto-size" will resize themselves automatically when the browser size is changed by the user, but this is not the case. Auto-size is more closely associated with pixel sizing, where a default pixel size is automatically selected.

Item Size Option #3: Pixels

This option sizes the item by a user-specified amount of pixels.

When to Use Pixels

This option is commonly used when:

· A fine level of control is needed over the item size

· The item should not resize itself when the browser size is changed (and the page refreshed) by the user

In practice, pixel sizing is often used because the other sizing options produce confusing results. Much of this confusion is the result of forced behavior related to zone size and item size relationships, which are discussed in the following section.

The Relationship between Zone Size and Item Size

Now that we have a basic understanding of how zone and item sizing works, it is important to understand the relationship between zones and items. Zone sizing can override item sizing, and vice versa. This section discusses five principles of zone and item size relationships.

· Zone sizes are "suggestions"

· Auto-sized and pixel-sized items override zone sizes

· Percentage-sized items will snap to the zone size

· Stacked items behavior

· Conditional visibility

Zones Sizes Are "Suggestions"

Zones largely act as guides for aligning items and arranging items by a certain orientation. Zone sizes may be thought of as suggestions on how to size the items contained within the zone, and can often be overridden by the item size settings.

Some things to keep in mind about zone size settings:

1. Zones height and width may only be sized by a percentage of dashboard page

2. Zones may act as a way to bulk-edit the size of items within the zone - when the unfixed axis of the item is set to percentage size (See "Percentage-sized Items." below.)

Auto-sized and Pixel-sized Items Override Zone Sizes

Auto-sized and pixel-sized items will override zone size, meaning that zones may shrink or grow according to item size.

NOTE: If an item is set to auto-size height and/or auto-size width than the item is actually set to a fixed pixel size that is dependent on the type of item. Some items, like analytic charts, have a default pixel size they will render to. Some items, like scorecards, use an algorithm to determine what pixel size they should be rendered to. For more detail, see the previous section, "Item Auto-Size Defaults."

Percentage-sized Items Will Snap to the Zone Size

Items that are sized as a percent of dashboard page will snap to the zone size, along the zone's fixed axis. This axis is called the fixed axis as the zone axis will stay a fixed size and the items inside the zone will be re-sized to fit inside the zone.

A zone's fixed axis is the axis opposite the axis along which the zone is orientated. Consider a zone that is oriented along the horizontal axis. In this case, the vertical axis is the fixed axis and the horizontal axis is referred to here as the orientation axis or un-fixed axis.

The zone's orientation axis (or un-fixed axis) will grow or shrink to respect the item size along that axis, whether the item is set to auto-size, fixed pixel or percentage-based.

This concept is important to understand as it helps meet a common dashboard sizing scenario: configure the dashboard so that there is no side-to-side scrolling, but the dashboard may scroll top-to-bottom to accommodate however many reports are on the dashboard. This scenario is discussed in the next section, "Scenario: Fixed Width, Variable Height Dashboard"

Stacked Items Behavior

If a zone is oriented as stacked, all items snap to the zone size along both the horizontal and vertical axes. This may not be overridden - pixel sizing is not possible with stacked items.

Conditional Visibility

Conditional visibility has no effect on item size; the items are sized as if they are all visible at the same time. If conditional visibility is enabled for one or more items in the zone, it will appear that the item is smaller than the available zone size. This may be resolved by using auto-sizing or pixel sizing for each item.

Scenario: Fixed Width, Variable Height Dashboard

A common request is to configure a dashboard that is fixed in width to the browser width, but will grow in height to accommodate the size of the elements. The individual elements in the dashboard will help determine whether or not this is possible - for example, a very wide scorecard may push other elements off the side of visible dashboard page. But, most dashboard pages can be configured to accomplish this with careful zone and item size configuration.

Consider the dashboard page shown in the screenshot below. The dashboard page contains three zones, a top zone, left zone and right zone. The right and left zone widths are each set to occupy 50% of the dashboard page. The right zone contains two items, an analytic grid and an analytic chart. The right zone is orientated along the vertical axis, so that the items are laid out one on top of the other. The horizontal axis is "fixed" meaning that the width of the items will snap to the width of the zone. The vertical axis is "un-fixed" meaning that the zone will grow in size along the vertical axis to accommodate as many items as are placed in the zone.

Figure 9: Fixed axis and orientation axis example

Note that there is no horizontal scroll-bar along the bottom of the dashboard page. That is because we set the width of the items in the left and right zones to be sized by percentage of dashboard page. This causes the item width to match the zone width, which is 50% of the dashboard page. The item heights are set to "auto-height" which means the zone height will grow to accommodate the auto-size defaults for the items within the zone.

This combination of sizing options will often result in a very readable dashboard with a minimum amount of page scrolling.

Frequently Asked Questions

Q) I added a new item to one of my zones, and the size of the other dashboard items changed unexpectedly. I didn't explicitly change them in the designer - what's going on?

A) The items are using percentage-based sizing, so all of the items were re-sized to fit inside the zone. See "Percentage-based Items Will Snap to the Zone Size" for more detail.

Q) Some of my items are pushed off the side of the screen. I have two zones, each set to 50% of screen width. The items are set to auto-size height and width. Why is my dashboard taking up more than 100% of the screen?

A) One or more of the items is wider than the requested zone size and is expanding the zone to accommodate its size. See "Auto-sized and Pixel-sized Items Override Zone Sizes" for more detail.

Q) I have two analytic charts visible on my dashboard screen, each in their own zone. They are set to auto-size height and width. One chart looks significantly larger than the other chart. Why?

A) One zone has stacked views, which is affecting the size of the items. A zone with stacked orientation will resize the elements to fit the zone height and width. See "Stacked Items Behavior" for more detail.

Q) I have three charts in one zone, and am using display conditions to only show one chart at a time. The chart only takes up a small portion of the screen, and there is a lot of wasted white space. I expected the chart to take up the entire space available. What is happening?

A) The charts are likely set to percentage-based sizing. The charts are sized as if they are all visible at the same time, so if there are three charts in the zone, they will each take up a third of the zone size. Conditional visibility settings have no effect on the chart sizing. This issue may be resolved by using auto-sizing or pixel sizing on the items.

Q) I have three filters on my dashboard, each filter contains a flat list of members. The filters are spaced out much further than they should be, there is a lot of empty white space between my filters. This is causing my dashboard page to have a vertical scrollbar. How can I fix this?

A) The filters are occupying a minimum width of 375 pixels and this cannot be adjusted in the Dashboard Designer. Adding additional "spacer" zones to the right of the filters will not help - filters are locked to auto-sizing, so their width will override the size of their parent zone. Minimum filter width may be adjusted in the ParameterTree.css file. See the article Working with the Monitoring CSS Files to Adjust Settings in Deployed Dashboards on the PerformancePoint team blog for more detail.

Summary

Dashboard layout and sizing in PerformancePoint is very flexible. All of the sizing options for zones and dashboard items can lead to confusing sizing behavior. However, understanding the basics outlined in this article can help eliminate confusion. This article covers nearly all of the sizing options available, one basic dashboard page scenario and a few common questions. If you have a question that is not covered in this article, or by product documentation, please contact me via email and we will address it in a future blog post.

Rex Parker (rexpark@microsoft.com)