416.467.9100 | Dundas Data Visualization | Login
Welcome Guest
This is the support page for the legacy Dundas Dashboard application. For assistance with the current Dundas BI application please click here.
Dashboard v5.0

This site makes extensive use of JavaScript.

Please enable JavaScript in your web browser and reload the page before proceeding.

Using the Small Multiples Control

Hide navigation
RSS
Modified on Fri, 27 Apr 2012 11:23 AM Categorized as Data Controls, Small Multiples
Click to return to: Documentation | Designing Dashboards | DV Controls | Small Multiples


Introduction

The Small Multiples control lets you easily compare visualizations by displaying multiple instances of child controls in a linear or grid arrangement. This type of visualization is similar to a Trellis chart.

You use the small multiples control by passing it data in the form of a KPI or dataset that has 1 or 2 dimensions defined. If you configure a small multiples control with 1 dimension only, it will split its data into a line of cells based on that dimension. If you configure a small multiples control with 2 dimensions, it will split its data into rows and columns based on the two dimensions, forming a grid of cells.

Besides data, you must also add one or more child controls to a small multiples control. Each cell that the small multiples control generates contains a copy of these child controls. If a child control is a data visualization control, it will be able to display a subset of the original data that corresponds to the cell.

The following example shows how a dataset appears when visualized by a small multiples control with a gauge as a child control. The dataset has 1 dimension, ‘Row’, and one metric, ‘Y’. In this case, the ‘Row’ dimension is bound to the small multiples control and the ‘Y’ metric is provided to each cell that is generated.

A dataset (left), and its corresponding small multiples visualization (right).

A dataset (left), and its corresponding small multiples visualization (right).


As another example, consider the dataset below which has two dimensions that are bound to a small multiples control. In this case, the small multiples control generates a grid of cells where each cell is provided with a ‘Y’ metric value that is visualized using a gauge as a child control.

A dataset (left), and its corresponding small multiples visualization (right).

A dataset (left), and its corresponding small multiples visualization (right).


Elements of a small multiples control

The figure below shows the main elements of a small multiples control.

Elements of a small multiples control.

Elements of a small multiples control.


Usage

The following example shows how to use the small multiples control to display sales figures for a set of products. You will use the control to generate a horizontal row of cells, where each cell contains its own gauge instance that displays the sales figure for a specific product.

Small multiples control using a gauge as a child control.

Small multiples control using a gauge as a child control.


Preparing data

Set up a KPI with 1 measure and 1 dimension as follows:

  • Name - Sales By Product
  • Measure - Sales
  • Instant dimension - Product
  • Filter - None
  • Preferred visualization - None

Preview of Sales By Product KPI.

Preview of Sales By Product KPI.


Adding a small multiples control

Add the small multiples control to your dashboard as follows:

  1. Go to the Toolbox and expand the Data Controls folder. Locate the Small Multiples item and drag it to the dashboard canvas.
    Small Multiples control in toolbox.
  2. The small multiples control appears on the canvas in the form of a 500 by 500 unit square. An empty cell is displayed in the top-left corner of the control to indicate that no data (⪚ KPI or dataset) has been bound to the control yet.
    Small Multiples control on canvas.

At this point, the small multiples control is ready to accept data (⪚ a KPI or dataset) and/or child controls (⪚ a gauge) via dragging from the toolbox. By dragging other dashboard controls from the toolbox onto the small multiples control you can populate its Cell Children collection property (which will be empty initially). A copy of each control in this collection will appear in each cell that is generated by the small multiples control.

Adding and binding data

Add the Sales By Product KPI to the small multiples control as follows:

  1. Drag the Sales By Product KPI from the Toolbox and drop it onto the small multiples control. The first step of the Data Settings Configuration wizard appears. Click Next to accept the default settings and go to the next step.
    Add a KPI.
  2. In the Small Multiples Data Binding step, enter the settings listed below. Specifically, you want the Product dimension values to be represented by the cell columns that will be generated by the small multiples control. This will give you the desired horizontal, single row layout.
    • Row Dimension - None
    • Column Dimension - Product
    • Color Dimension - None
    • Metric - None
    • State Group - None
      Data binding settings.
  3. In the bottom half of the Small Multiples Data Binding step is a list of child control types which you can bind to the KPI by clicking the corresponding checkbox. This list relates directly to the contents of the Cell Children collection property. The collection was initially empty but is now automatically populated with 1 item based on the preferred visualization of the KPI/dataset. Since the Sales By Product KPI did not specify a preferred visualization, the default chart type is listed instead (&ie; BarChartChild). However, you want to use gauge controls instead of bar charts, so just click Finish to close the data binding wizard.
  4. Open the Cell Children collection editor. Click Remove to remove the BarChartChild item, then click Close.
    Cell Collection property.

At this point, the small multiples control is bound to the KPI and its appearance on the canvas changes to show a row of cells. The cells will be empty though because you have not bound to a child control yet (see Adding a child control).

Small multiples control is bound to the KPI.

Small multiples control is bound to the KPI.


More details about the various data binding settings are given below.

Row and column dimensions

For every unique dimension member in the row dimension, a row of cells will be generated in the small multiples control. If only the row dimension is bound to data, a single column of cells will be generated which extends vertically downward.

For every unique dimension member in the column dimension, a column of cells will be generated in the small multiples control. If only the column dimension is bound to data, a single row of cells will be generated which extends horizontally from left to right (as shown in the current example).

If both the row and column dimensions are bound to data, a rectangular grid of cells will be generated where each cell corresponds to a unique row/column dimension member pair.

Color dimension

The color dimension allows cells to be easily colored based on a third dimension that is distinct from row and column (although the row and column dimensions can be reused if desired).

For every unique member in the color dimension, the cell background color will be set to a color that is determined by the Dimension Palette property of the small multiples control. Dimension colors will override colors from both the Cell Background Brush property and any coloring defined in custom cells if both are defined and applied to the same cell.

Metric

You can bind to a metric field from your KPI/dataset in order to assign a single numeric value to each cell in the small multiples control. These numeric values are used for cell sorting and also for coloring cells based on state group coloring rules. Metric colors will override all other methods of coloring if both are defined and applied to the same cell. If a cell contains more than 1 data point, the single value representation defined on the KPI/dataset will determine the actual value of the metric.

State group

If the KPI/dataset has any state groups defined they will be listed here. Selecting one will cause those states to be automatically created in the small multiples control’s States collection.

Adding a child control

Add a radial gauge as a child control as follows:

  1. Go to the Toolbox and expand the Data Controls\Gauges folder.
    Radial gauge in toolbox.
  2. Locate the Radial Gauge item, drag it from the toolbox, then drop it on top of the small multiples control. The radial gauge is added to the Cell Children collection property of the small multiples control, which now has 1 item (&ie; RadialGaugeChild).
  3. Right-click over the small multiples control. From the menu, choose Data Information.
    Data Information.
  4. Hover over the Sales By Product item, then click its Configure KPI settings button.
    Configure KPI settings.
  5. Skip the first step of the Data Settings Configuration wizard to go to the Small Multiples Data Binding screen again.
    Data binding with gauge.
  6. Select the checkbox for the RadialGaugeChild item in order to bind it to the KPI. The Data Settings Configuration wizard for the gauge control appears. Default all options in the wizard. Some additional notes:
    • The steps involved in binding a child control varies depending on the type of control.
    • If you need to reconfigure the binding for a child control, click the Edit button in the Action grid column.
    • The checkbox simply indicates whether the child control is bound or unbound to data. Thus, unchecking a control does not mean it won't appear when you view the dashboard. Certain controls, such as display indicators, are still visible even when they are not bound to any data. If you do not want a child control to appear for certain, remove it from the Cell Children collection.
  7. Click Finish to close the Small Multiples Data Binding wizard. A gauge control now appears in the small multiples control on the canvas.
    Gauge appears at design-time.
  8. (Optional) Configure properties of the gauge control (such as scale label appearance) via the Cell Children collection property editor.
    Gauge properties.
  9. Set the Column Header Visibility property of the small multiples control to Visible.
    Column Header Visibility property.

You can now save and preview the completed dashboard.

Preview the completed dashboard.

Preview the completed dashboard.


Properties

This section provides more details about the various properties of the small multiples control.

For the complete properties reference, see Small Multiples - Properties.

Cell Children

The Cell Children collection contains the child controls that have been added to the small multiples control (either automatically or by dragging the control from the toolbox to the small multiples control). When viewing a dashboard with a small multiples control, a copy of each cell child will be displayed in each cell. By editing the Cell Children collection, children can be moved or removed, and their properties can be configured. The z-order of any child control is determined by the order in the Cell Children collection with items at the top of the list appearing at the bottom of the z-order.

Custom Column Headers and Custom Row Headers

Custom column and row headers allow column and row headers to be pre-defined at design-time. These columns or rows will appear on the small multiples control regardless of their appearance in data. They will always appear either before or after any columns or rows generated by data depending on the value of the header's Display Position property. If custom columns or rows match those generated by data, this has the effect of forcing the position of that column to always be the same. Custom row and column headers have a Background property which can be used to color them differently. If a custom row and column intersect, the row background color will take priority over the column color.

An example scenario for using custom columns and rows is the display of a month calendar. In this scenario, a dashboard designer knows beforehand that the calendar should always have 7 columns in the same order from ‘Sunday’ to ‘Saturday’. By creating 7 custom column headers the order of these columns could be enforced, and each column would always appear even if there was no data on that day. The background color property could be used to color ‘Sunday’ and ‘Saturday’ differently to indicate that they are weekend days.

Dimension Palette

This Dimension Palette property is used to assign background colors to cells that are colored based on the Color Dimension. Every unique color dimension value will be assigned a color from the palette in the order it is first encountered.

Horizontal and Vertical Scrollbar Visibility

If the generated cells of a small multiples control are larger than the control itself, scrollbars will be displayed; this allows additional cells to be viewed. Scrollbar visibility defaults to Auto. Below are the scrollbar visibility choices:

  • Auto – Scrollbars are shown when they are available for scrolling.
  • Disabled – Scrollbars are shown but disabled.
  • Hidden – Scrollbars are never shown.
  • Visible – Scrollbars are shown and enabled if scrolling is possible.

Item Overflow

The Item Overflow property will cause cells to wrap to the next row or column when they reach a certain limit. This property behaves differently depending on how data binding has been set up. By default, wrapping will not occur. The overflow behavior for different data binding cases is described below.

  • Only row bound - Cells are generated vertically from top to bottom. When the number of rows reaches the overflow threshold a new column is created.
  • Only bound to column - Cells are generated horizontally from left to right. When the number of columns reaches the overflow threshold a new row is created.
  • Bound to both row and column - Cells are generated in a rectangular grid. Rows are generated one at a time with cells extending from left to right. When the overflow threshold is reached the current row wraps to create a new row.

Orientation

The Orientation property determines if rows and columns are displayed on the vertical and horizontal axes or vice versa. Changing the orientation from Horizontal to Vertical effectively transposes the small multiples control.

States

States can be defined that will color the background of small multiple cells. The value used to determine which cell a state falls into is the metric value that has been bound to that cell.

Max Cells

The small multiples control has the potential to render a very large number of controls if it is bound to dimensions with a large number of members; allowing this to happen can cause undesirable performance on the machine that attempts to render the controls. To prevent any accidental cases of rendering more data than intended, the Max Cells advanced property is used to limit the number of cells that can be rendered. This property value defaults to 200 but it can be set to any number, or disabled entirely at the discretion of the dashboard designer. If the Max Cells threshold is reached while viewing a dashboard a warning may be displayed depending on the value of the Show Max Cells Warning property.

Show Max Cells Warning

The Show Max Cells Warning advanced property determines if a warning message will be displayed when the Max Cells threshold is reached. This property can be disabled if desired. The purpose of this warning is to prevent incomplete data from being shown without any indication.

Sorting properties

Sorting properties can be set at design-time to determine the default column (or row) to sort on and the corresponding sort direction. The Sort Priority property determines whether rows or columns will be sorted first; this can sometimes lead to different results.

Scripting

The small multiples control has support for interactions at both the parent and cell child level. For example, in a small multiples control with a chart child, interactions could be added to a child directly (via the Cell Children collection editor). If an interaction is added to a child, the interaction will be cloned along with the child and available on the child in every cell where it appears.

One problem when scripting with the small multiples control compared to other controls is that it isn’t possible to know the names of the child controls in each cell in advance. To address this problem, the small multiples control provides methods for retrieving a specific child element or cell. For more details, see Small Multiples - Interactions and Methods.

Examples

For more examples of using the small multiples control, see Small Multiples Examples.

Notes

Additional data descriptors

Additional data descriptors (⪚ KPIs, datasets) can be added to the small multiples control by dragging them from the toolbox. Each data descriptor will need to be bound to any applicable child control again, and is equivalent to adding a second data descriptor to that control. For example, a chart with 2 data descriptors would display 2 series; a gauge would display 2 pointers. If a data visualization can only be bound to 1 data descriptor and it has already been bound to one, a warning will appear in the wizard that binding it to a second data descriptor will unbind it from the first one.

Cell background coloring

The background of a cell can be colored in 4 different ways. They are listed here in order of priority from lowest to highest:

  • Cell background color property (lowest priority)
  • Custom row or header color property
  • Dimension color
  • Metric color based on state rule (highest priority)

If multiple types of cell coloring apply to a single cell the coloring type with the highest priority will be used.

If a metric or color dimension is bound to a cell in more than 1 data descriptor (⪚ KPI) and the resulting small multiple has cells that get data from both data descriptors, the metric and color dimension used will be from the first data descriptor encountered during data binding. It is good practice to only bind to the metric and color dimension fields on one data descriptor.

Sorting

If a metric value is bound to a data descriptor (⪚ KPI or dataset), sorting of cells will be enabled. Cells default to an unsorted state but can be sorted by clicking a row or column header. Cells can be sorted by both row and column simultaneously, and the order used will depend on whether a row or column was clicked last.

  • Clicking a row will sort by column, then row.
  • Clicking a column will sort by row, then column.
  • Clicking on a header multiple times will move it between the unsorted, ascending and descending sort orders.

Limitations

Below are the current limitations of the small multiples control:

  • Formulas are not supported.
  • Annotations are not supported.
  • Dashboard parameters cannot be added as cell children.

Related topics


Click to return to: Documentation | Designing Dashboards | DV Controls | Small Multiples

About Dundas | Contact Us Follow us on Twitter! | Privacy Statement | Report Site Issues

Copyright © 2009-2014 Dundas Data Visualization, Inc.