Using a template grid for resizing

Contents[Hide]

1. Overview

This article shows you how to design dashboards that can resize and thus better adapt to different viewer display choices and resolutions.

Resizing is useful if you intend your dashboards to be viewed on a wide range of display types, including desktop monitors and tablets.

2. Set the view size

At design-time, you can resize a view such as a dashboard by dragging the resize icon in the bottom right corner. The Height and Width properties of the view will be updated accordingly.

Drag to resize the dashboard
Drag to resize the dashboard

3. The Re-Size Mode property

During viewing, the ability to resize a dashboard (or view) is controlled by the dashboard's Re-Size Mode property, which has three options: scroll, scale, and resize.

Re-Size Mode property
Re-Size Mode property

3.1. Scroll

By default, when you create a new dashboard, it is given a default width and height (e.g. 1024 by 768 units/pixels), and its Re-Size Mode property is set to scroll. Under this mode:

  • The dashboard does not change size (width or height) when you resize your browser window.
  • The elements on the dashboard (e.g. charts and other components) do not change size or position relative to the dashboard when the browser window is resized.
  • If the browser window is resized large enough, the dashboard will be centered horizontally and positioned at the top of the viewing area.
  • As the browser window is resized smaller, scrollbars will appear as needed, allowing you to scroll the parts of the dashboard you want to see into view. These are browser scrollbars which appear styled when using Google Chrome, and this style can be customized with CSS.
  • You can use the zoom slider and the View panel from the status bar to zoom in, zoom out, or pan the dashboard.
  • 'Pinch-to-zoom' will also work in scroll mode.
  • Since this mode is the default setting, there's no further design work you need to do other than deciding on the width and height of the dashboard. This makes it easier for testing as well since you can be sure the dashboard looks more or less the same using different monitors, devices, and resolutions.
  • If your dashboard is very large though, important information on the dashboard itself may be scrolled out of view initially and potentially missed by a user.

3.2. Scale

When the Re-Size Mode property of a dashboard is set to scale, the dashboard (including its contents) will be scaled to fit the available viewing area. Under this mode:

  • The entire dashboard will be visible initially without any scrollbars present. This is also the behavior whenever the browser window is resized.
  • By default, the aspect ratio of the dashboard is maintained upon resizing of the browser window. If you don't want the aspect ratio to be maintained, set the dashboard's Ignore Aspect Ratio On Re-Size property to true.
  • You can use the zoom slider and the View panel from the status bar to zoom in, zoom out, or pan the dashboard. Scrollbars will appear as needed in this case. The regular scale behavior will be re-applied though whenever the browser window is resized (i.e. the dashboard will be scaled to fit the available space again).
  • 'Pinch-to-zoom' will also work in scale mode.
  • The downside of using the scale mode is that text may become unreadable when the browser window is resized too small.
  • Scale mode works best when the width and height of your dashboard are close to the screen size of your target display device. 

3.3. Resize

The resize mode is a smart resizing option that is designed to be used in conjunction with a template grid, which allows you to set up charts and other components on your dashboard for resizing within a tabular or grid-like layout. Under this mode:

  • The dashboard canvas is resized to fit the available viewing area without any scrollbars.
  • [ New in Version 3.0 ] Re-size Mode Fit: When the resize mode is selected, you will have an option to lock horizontal or vertical re-sizing, or both (default). This will allow you to select the best layout for your dashboards designed for mobile devices.

    Re-size lock options.
    Re-size lock options.

  • The zoom slider and View panel are not available in this mode.
  • By default, the aspect ratio of the dashboard is maintained upon resizing of the browser window. If you don't want the aspect ratio to be maintained, set the Ignore Aspect Ratio On Re-Size property to true.
  • Charts and other components on the dashboard do not resize however unless they are attached to cells within a template grid.
  • One of the advantages of using this mode in conjunction with a template grid is that the components on the dashboard are truly resized instead of just scaled. This lets you take advantage of any smart layout or labeling logic that may be built into the components. For example, when a chart is resized smaller, the chart axes may adjust themselves to show fewer labels to avoid overlap and maintain readability.

Attaching a chart to a template grid cell at design-time
Attaching a chart to a template grid cell at design-time

The figure below shows the previous dashboard at viewing-time. Observe that even though the aspect ratio has changed and the browser window has been resized smaller, the labels on the charts are still very legible.

See the next section for a walkthrough on setting up this example dashboard.

4. Define a template grid

This section shows you how to define a template grid and use it to resize components on a dashboard with Re-Size Mode set to resize.

4.1. Create a new dashboard

For this example, create a new dashboard based on the Blank template, and then set the following dashboard properties:

  • Ignore Aspect Ratio On Re-Size: true
  • Re-Size Mode: resize
  • Width: 700
  • Height: 450

4.2. Add a template grid

Go to the toolbar and click Define Template Grid.

Define Template Grid button
Define Template Grid button

In the Define a New Template Grid dialog, grid cells are highlighted as you move the mouse.

Move your mouse around until the desired layout of grid cells is highlighted (e.g. 2x3 or 3x3) and then click with your mouse.

Defining a 1x2 template grid
Defining a 1x2 template grid

Click Submit to close the dialog and go back to your dashboard. You'll see that a grid of cells has been added to your dashboard.

Dashboard with a 1x2 template grid
Dashboard with a 1x2 template grid

4.3. Add components to template grid cells

Go to the EXPLORE window and drag a metric set to the design area (outside of any template grid cells). The metric set appears as a bar chart.

Drag metric set to design area
Drag metric set to design area

To attach the chart to a grid cell, drag the chart and drop it over a highlighted grid cell.

Drag chart onto grid cell
Drag chart onto grid cell

Use the above two step procedure to add components to the remaining grid cells as required.

Template grid cells are now filled
Template grid cells are now filled

4.4. Test resize behavior

Test the resize behavior by switching to View mode (or Sandbox View), and resizing your browser window.

Observe that the dashboard can be manipulated into different aspect ratios, or made smaller, but the text labels generally remain legible. This is one of the advantages of using the resize mode with a template grid.

Test by resizing the browser window while viewing
Test by resizing the browser window while viewing

5. Merge and split cells

The initial template grid that you define is always a uniform one where each grid cell has the same dimensions. After defining the grid though, you can split any cell horizontally or vertically, or merge two or more selected cells into a single cell. This lets you create a layout for your dashboard composed of cells of different proportions.

As an example, create a new dashboard with Re-Size Mode set to resize, and then define a 1x2 template grid. To split the bottom cell into left and right parts, select the bottom cell, and then click Split Horizontally from the toolbar.

Split the bottom cell horizontally into left and right parts
Split the bottom cell horizontally into left and right parts

The bottom cell is now divided into two equal parts.

After the split operation there are 2 equal cells in the bottom row
After the split operation there are 2 equal cells in the bottom row

Next, select the bottom left cell and divide again by clicking Split Horizontally. There are now 3 cells in the bottom row of the template grid.

Select the bottom two cells on the right by clicking on one cell first, press the CTRL key, and then click the second cell. Go to the toolbar and click Merge.

CTRL-select two cells and then click Merge
CTRL-select two cells and then click Merge

The bottom row of the template grid now has two cells of different proportions. Drag metric sets and place them in the cells to complete the dashboard.

Add metric sets to grid cells
Add metric sets to grid cells

6. Resize template grid

Using the merge and split functions alone will not always give you the desired proportions for the grid cells.

Once you've defined the cells you want, you can adjust them further by clicking Resize Template Grid from the toolbar.

This puts the canvas into a special resize mode where the divisions between grid cells are outlined by thick, blue resize bars which you can drag, or set the percentage or size in pixels directly.

Resize Template Grid mode
Resize Template Grid mode

Once you're done resizing the grid cells, click Resize Template Grid in the toolbar once more to exit the mode.

7. 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