3.1. Scroll

When you create a new dashboard, it is given the default width and height 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, 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, 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 initially visible 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.

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.

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.

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.

3.4. Responsive

The responsive mode is also designed to be used in conjunction with a template grid, but takes smart resizing a step further. This mode reflows the individual cells from left to right and then from top to bottom, as the available size of the screen changes. Under this mode:

The layout of the cells on the canvas is computed based on the page size and is recomputed when resizing. For example, the layout will change when a mobile device changes from portrait to landscape mode.

By default, the size of the cells is uniform. However, the size can be changed to better reflect the content in each cell.

Grouping cells ensures they are kept together when the layout is computed.

Toggle header row: This option can be applied on a cell if it is the only cell in that row of the template grid or the group and will ensure this cell will not have cells placed to the right, even if there is space. When the header row is inside a group, this applies only to that group.

4.4. Test resize behavior

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.

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.