Responsive Layout Dashboard Mode

Contents[Hide]

1. Overview

It takes time to develop dashboards. Traditionally most dashboards are created for displaying on a large device, such as a computer monitor or TV. However with today’s ubiquity of mobile devices with a variety of screen sizes, it is important to build dashboards that both display appealing informative information, but also adapt to the size of the device they are being viewed on.

Typically multiple dashboards would need to be created to serve every size of display. However with Responsive Dashboard mode, this it is no longer always necessary to create separate dashboards. It still may be better to create separate dashboards when the dashboard is designed to display very large amounts of information, for instance, a very detailed map. How much information you want to display is an important consideration when designing This is important when designing a dashboard that will also be visible on a smart phone sized display, as the size limits the amount of information you can effectively communicate.

To build a responsive dashboard you must use template grids. For more details on how to use templates, see this article.

2. Enabling Responsive Mode

Responsive mode is a property of the dashboard. It is selected in the Re-size mode property. Click on the dashboard, select properties, and change the Re-Size Mode to “Responsive”.

Enable Responsive mode
Enable Responsive mode

3. Using Responsive Mode

To use responsive mode you create the dashboard using the template grid, placing the visualizations within each of the grids. For best results element should use relative position.

Position Kind set to Relative
Position Kind set to Relative

4. How Responsive Mode works

Responsive mode reflows the individual grid cells from left to right, then top to bottom, as the available size of the screen changes. By default, the size of the cells in the grid are uniform. However, this is not a requirement for responsive mode. The sizes can be changed to better reflect the content that will be placed in those cells. In Responsive mode, when the page is loaded the layout is calculated based on the current page size. Additionally each time the page changes size the page layout is recomputed. This can happen several ways. On the desktop, the browser window can be resized. On mobile devices, the device can be changed from portrait to landscape mode.

When a layout is computed, it starts in the top left cell, and moves from left to right, top to bottom.

4.1. Grouping and Headings

Two new abilities were added to templates to allow for more complex layouts with responsive mode. These are Groups and Headers. In a regular template, headers and groups do not need to be defined because the layout is static. However in responsive mode, some extra information is required on the cells to preserve certain important layouts.

In the layout below, a template grid with 6 rows and 6 columns has been created.

6x6 Template grid
6x6 Template grid

4.2. Groups

Grouping several cells together ensures that these cells are kept together when the page layout is computed. The group is considered a single cell when the layout is computed. To configure several adjacent cells to form a group, select the cells. If the objects are selected instead of cell, the cells themselves can be selected by clicking “Select Template Cell” in the toolbar.

Select template cell toolbar icon
Select template cell toolbar icon

Select “Group Cells” in the toolbar to create a group.

Group Cells toolbar icon
Group Cells toolbar icon

In this example, cells 1 &2, 3&4, and 5,6,11&12 have been grouped. In responsive mode, the layout is recomputed to keep all groups together. Cells 1&2 take up the whole row because cells while cell 3 can fit onto that row, cell 3&4 cannot. Cells 5,6,11&12 all occur before cells 7,8,9&10 because the group is kept together, and cells 5&6 come before cells 7,8,9&10.

Template cells grouped in the dashboard designer
Template cells grouped in the dashboard designer

View mode of the dashboard using responsive mode
View mode of the dashboard using responsive mode

4.3. Headers

Frequently, when grouping items together, a header is desired. When the layout is computed, a cell that is tagged a header row will not have any cells placed to the cells immediate right, even if there is space. When the header row is inside a group, this only applies within the group.

A cell can be designated a header row if it is the only cell in the row in the template grid OR the only cell in the row in the group. When creating a group this may require merging two cells to create a header row.

Merge Cells toolbar icon
Merge Cells toolbar icon

Select the header cell, and click “Toggle Header” on the toolbar.

Toggle Header Row toolbar icon
Toggle Header Row toolbar icon

In the example below, cells 5&6 have been merged, note how despite the merger, they do not function as a header.

Cells merged in the dashboard designer
Cells merged in the dashboard designer

View mode of the dashboard with merged cells
View mode of the dashboard with merged cells

When the header property is set, cell 5&6 (which is now one cell), contains no cells to the immediate right that are in its group (“5&6”, 11 & 12). As 11 & 12 can fit underneath “5&6”, the group is shrunk, and cell 7 is placed to the immediate right of the group.

Cells with header row toggled in dashboard designer
Cells with header row toggled in dashboard designer

Cells with header row toggled in view mode
Cells with header row toggled in view mode

5. Design Notes

Responsive mode is designed to cleanly modify the layout of the dashboard cleanly when viewing on a device with a smaller display size, or different orientation. When viewing at screen sizes larger than the size the dashboard is designed for may cause undesired layouts. Dashboards targeted for larger displays should be designed for those displays from the outset. Smaller screens also require consideration of how information is conveyed in a small area.

Another consideration that must be taken into account is how the recalculation of the layout impacts the positioning of sections of the dashboard. When a dashboard is displayed at full size two related visualizations that are in different cells that are adjacent, may not be when the layout is recalculated. To ensure that related visualizations are kept together, the cells should be configured in a group.

5.1. Example Dashboard

The dashboard below has been created using responsive design. When designing the dashboard in the dashboard designer, there is a base size that is used, however when viewing the dashboard on smaller displays, the dashboard layout is recomputed to take into account the smaller sized display. 

In edit mode, the original dashboard is designed to have a grid that is 3 across and 2 down. When viewed at full size, this is the display that is seen.

Example dashboard designed for responsive mode in the dashboard designer
Example dashboard designed for responsive mode in the dashboard designer

When the dashboard is viewed on a tablet device which is often used in portrait mode, the dashboard layout is recomputed, and it able to fit a layout of 2 across and 3 down. 

Example dashboard as viewed on an iPad in portrait (vertical) orientation
Example dashboard as viewed on an iPad in portrait (vertical) orientation

On a smart phone, which has a much smaller screen, the layout can only fit a grid one cell wide.

Example dashboard as viewed on an iPhone in portrait (vertical) orientation
Example dashboard as viewed on an iPhone in portrait (vertical) orientation

6. See also

 

Dundas Data Visualization, Inc.
500-250 Ferrand Drive
Toronto, ON, Canada
M3C 3G8

North America: 1.800.463.1492
International: 1.416.467.5100

Dundas Support Hours: 7am-6pm, ET, Mon-Fri