Controlling the Appearance of a Dashboard Using the Flow Containers

Dimensions and Wrapping

When the SAS BI Dashboard draws the indicators within a dashboard, the indicators are wrapped into rows or columns based on the width or height specified for the individual indicators and the dimensions of the container. For example, if a dashboard has ten indicators with a width of 180 pixels each, the total required width for the dashboard portlet is 1800 pixels. If the dashboard is only 1000 pixels wide, then two rows of indicators appear. If the first indicator is 900 pixels wide, then three rows of indicators appear.
The indicator width is specified when you define the display for an indicator.
There are two more sizing factors that affect the display of a dashboard. All of these factors interact in different ways to determine how a dashboard is laid out. All of the factors are described in this table:
Factor
Where to Specify the Values
Purpose
Is It Ignored?
Dashboard portlet dimensions
The dimensions are specified when you edit the content of a portlet. For more information, see Specify the Dashboard Dimensions.
This factor specifies the dimensions of the dashboard portlet.
Never ignored. If the content is larger than the portlet’s dimensions, scroll bars appear.
Indicator dimensions
The dimensions are specified when you define the display for an indicator.
This factor specifies the preferred dimensions of the indicator.
The width is ignored when a graph display type specifies the Output type as Image or a gauge width is larger. For example, if a KPI display contains more than one gauge, the gauges are wrapped into rows according to the width of the indicator. The height is ignored.
Graph display, bar chart with reference lines display, and range map display dimensions
The dimensions are specified when you define the indicator display.
This factor specifies the dimensions of a graph inside of an indicator.
Never ignored. If a graph display type specifies the Output type as HTML and there is more content than the dimensions allow, scroll bars appear.
Dynamic gauge dimensions
The dimensions are specified when you select a gauge for an indicator. For more information, see Select a Gauge for an Indicator.
This factor specifies the dimensions of a dynamic gauge. A dynamic gauge grows to fill the space as long as the gauge image scaling remains 1:1. The gauge is always centered in the available space. For example, a dynamic gauge that is 100x200 does not grow, and white space is added around the gauge until the dimensions are at least 200x400.
Never ignored.
Based on these factors and how they control the appearance of a dashboard, here are some guidelines that are important to good dashboard layout:
  • With a dynamic gauge, you can use disproportionate dimensions to create extra white space around a gauge.
  • A single KPI display that contains multiple gauges will manage the horizontal alignment correctly. But if there are several different indicators, each with just one dynamic gauge, then you might need to manipulate the heights of the various dynamic gauges to correctly align the indicators.
    This problem often occurs when the title of one indicator has two lines of text and the adjacent indicators have only one line of text. The extra line of text causes the indicator to be positioned farther down the page than the rest of the indicators in the row. By setting the height for that one indicator to less than the heights of the others, you can get the whole dashboard properly aligned.
  • An indicator width that is less than the dynamic gauge width or graph width causes scroll bars to appear in the dashboard portlet. If you want everything to wrap nicely, ensure that the indicator width is larger than the dynamic gauge width or the graph width.
  • To vertically align several graphs, specify the same width for all of the indicators in the column.

Fonts

Here are some general guidelines for specifying fonts in a dashboard:
  • For the best appearance of fonts in a dashboard, specify the same zoom value for all of the indicators in the dashboard. Set the zoom width and height to the same value, generally between 100% and 300%.
  • In the Font Settings area, some of the types that you can select include (preferred) in the name. Preferred means that the size of the font that you specify applies only if the graph is large enough to accommodate the text. But the graph component determines the best size of the font, which is based on the size of the graph and an algorithm that shrinks text so that the graph and the text are legible at smaller sizes.