Using a template grid for resizing
This article shows you how to design dashboards that can resize and adapt to different viewer display choices and resolutions.
Resizing is useful if you intend your dashboard content to resize to fill a wide range of display types, including monitors, widescreen TVs, and tablets with different aspect ratios.
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.
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 four options: scroll, scale, resize, and Responsive.
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.
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.
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.
- 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.
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.
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.
- Responsive mode works best when designing for a large screen size while considering the potential use of smaller screen sizes.
For additional information on the Responsive mode, see the article Responsive Layout Dashboard Mode.
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.
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.
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.
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.
To attach the chart to a grid cell, drag the chart and drop it over a highlighted grid cell.
Use the above two step procedure to add components to the remaining grid cells as required.
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.
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.
The bottom cell is now divided into two equal parts.
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, hold the Ctrl or Shift key, and then click the second cell. Go to the toolbar and 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.
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.
Once you're done resizing the grid cells, click Resize Template Grid in the toolbar once more to exit the mode.