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.

Designing Resizable Dashboards

Hide navigation
RSS
Modified on Thu, 23 May 2013 11:43 AM Categorized as DashBlocks, Design, Level-Advanced, Level-Intermediate
Click to return to: Documentation | Designing Dashboards


Overview

This article shows 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 computer monitors and tablets (e.g. via the HTML Viewer).

The Re-Size Mode property

The ability to resize a dashboard is controlled by the dashboard's Re-Size Mode property, which has three options: None, Scale, and Resize.

Tip: This property is also available for dashblocks, analytical dashboards, and analytical dashblocks.

None

By default, when you create a new dashboard, it is given a default width and height (e.g. 960 by 600 units/pixels), and its Re-Size Mode property is set to None, which means no resizing.

Default dashboard properties.

Default dashboard properties.


Under this mode:

  • The dashboard does not change size (width or height) when a user viewing the dashboard resizes his or her browser window.
  • The contents of the dashboard (e.g. charts and other elements) do not change size or position relative to the dashboard when the browser window is resized.
  • If the browser window is large enough to display the entire dashboard, the dashboard is centered within the dashboard viewing area both vertically and horizontally. In the case of the HTML Viewer, the dashboard is centered horizontally and positioned at the top of the viewing area.

Dashboard is centered if it is small enough to fit within the viewing area.

Dashboard is centered if it is small enough to fit within the viewing area.


  • If the browser window is small enough that the entire dashboard cannot be displayed within the dashboard viewing area, horizontal and/or vertical scrollbars appear as needed in the dashboard viewer to allow the user to access the non-visible portions of the dashboard.

Scrollbars appear when the dashboard is larger than the viewing area.

Scrollbars appear when the dashboard is larger than the viewing area.


Here are the pros and cons of using Re-Size Mode = None:

  • Pros:
    • This is the default setting so there is no further design work required except to choose the fixed width and height of the dashboard.
    • Since the dashboard size is fixed, less testing is required because you can be sure that the dashboard will look more or less the same using different monitors or resolutions.
  • Cons:
    • If the dashboard is large enough that scrollbars are needed, important information in the dashboard may be hidden from view or even missed.

Scale

When you set the Re-Size Mode of a dashboard to Scale, the dashboard (including its contents) will be scaled proportionally to cover as much of the dashboard viewing area as possible while keeping the overall aspect ratio (e.g. width divided by height) of the dashboard fixed. Since the entire dashboard will always be in view, no scrollbars appear in the dashboard viewer.

Re-Size Mode property set to Scale.

Re-Size Mode property set to Scale.


Scaling a dashboard is similar in concept to zooming. The figure below shows a dashboard that uses scaling and appears to be ‘zoomed out’ to fit exactly within the dashboard viewing area. The dashboard does not cover the entire dashboard viewing area though because the dashboard's aspect ratio must be preserved.

A dashboard using the Scale resize mode.

A dashboard using the Scale resize mode.


Here are the pros and cons of using Re-Size Mode = Scale:

  • Pros:
    • Easy to set up since just a single property needs to be changed (i.e. Re-Size Mode).
    • Scrollbars will never appear because the entire dashboard is always in view.
    • Looks good on mobiles/tablets when using the HTML Viewer because of the way the mobile browser does zooming and the use of SVG (requires Dundas Dashboard 3.0.2 or later).
  • Cons:
    • Graphics and text appearing in the dashboard may become unreadable when the dashboard is scaled smaller. This means that if you have a fairly large dashboard but your viewing area is small, the dashboard may be scaled so small as to be practically unusable.

Tip: The Scale mode works best when the dimensions of your dashboard are close to the screen size of your display device.

Resize

The Resize mode lets you implement true resizing of the dashboard and its contained elements such as charts and labels. Under this mode, resizing behavior can be customized on a per-control basis by using design-time elements called guidelines.

Re-Size Mode property set to Resize.

Re-Size Mode property set to Resize.


When you set the Re-Size Mode of a dashboard to Resize, the dashboard is always resized to cover the entire dashboard viewing area. You can see this if you change the background color of your dashboard and then view it. However, the elements contained within the dashboard do not move or resize unless they have been anchored to guidelines in the dashboard design area.

Below are a couple of examples of the same dashboard resized in different ways using guidelines. In both cases, the dashboard (with a light blue background) is automatically resized to cover the entire viewing area. The two controls (i.e. bar chart and pie chart) are then repositioned and resized with the help of guidelines (which are only visible at design-time).

Example 1 - Resized dashboard that uses guidelines.

Example 1 - Resized dashboard that uses guidelines.


Example 2 - Resized dashboard that uses guidelines.

Example 2 - Resized dashboard that uses guidelines.


Here are the pros and cons of using Re-Size Mode = Resize:

  • Pros:
    • Ability to customize repositioning and resizing on a per-element basis by using guidelines.
    • Takes advantage of any layout or smart labeling logic inherent within each type of DV control (for Silverlight viewer only, not HTML). For example, when a chart is resized smaller, the chart axes may adjust themselves to show fewer labels to avoid overlap and maintain readability.
  • Cons:
    • More design work is required to create all of the guidelines and then to anchor elements to those guidelines.

Using guidelines

Guidelines are design-time elements that are used in conjunction with Re-Size Mode = Resize. They appear as thin, red horizontal or vertical lines on the dashboard design surface. You can create guidelines and place them anywhere on the design surface, including outside of the dashboard canvas.

At viewing-time, guidelines are not visible but they are used to determine the positioning and sizing of controls (which are anchored to guidelines) as the dashboard is resized.

Default guidelines

By default, when you create a new dashboard or dashblock, you have access to four, built-in guidelines which are aligned along the borders of the dashboard. These guidelines are permanent - you cannot remove or modify them in any way.

Permanent border guidelines.

Permanent border guidelines.


Adding a guideline

Follow the steps below to add your own horizontal guideline which is positioned exactly in the middle of the dashboard:

  1. Click anywhere on the horizontal ruler and drag downwards with your mouse. A horizontal, dotted drag line appears which tracks the position of your mouse.
    Click on ruler and drag downward.
  2. Position the drag line in the middle of the dashboard, then release the mouse button. A new horizontal guideline is added to your dashboard.
    New horizontal guideline added.
  3. If the guideline is not exactly where you want it to be, click the guideline and drag it to the desired location.

To add a vertical guideline instead, simply click on the vertical ruler and drag towards the right.

Tip: You can add multiple horizontal and vertical guidelines to your dashboard and space them out to form a (not necessarily uniform) table or grid. Within each cell, you could then anchor an individual DV control, which will resize as the dashboard and its network of guidelines are resized.

Removing a guideline

To remove a user-created guideline from a dashboard:

  1. Click the guideline that you want to remove and drag it back towards its ruler.
  2. Release the mouse button when the cursor is over the ruler and you see the drag-and-drop indicator.

The guideline is removed from the dashboard.

Note: You cannot remove any of the permanent border guidelines.

Guideline positioning

The position of a guideline is represented internally as a percentage of the height (for horizontal guidelines) or width (for vertical guidelines) of a dashboard. Some examples:

  • The position of the top border guideline is 0%.
  • The position of the horizontal guideline (from the previous example) is 50%.
  • The position of the bottom border guideline is 100%.

Guideline position values remain fixed when a dashboard is resized. However, since these values are percentages, this means that guidelines actually move proportionally when their dashboard is resized. Using the example from a previous section, the horizontal guideline in the middle of the dashboard will still be in the middle even if the dashboard is resized to be twice as large. This is the key to understanding how guideline-based resizing works - which is that guidelines move proportionally with a dashboard while it is being resized. This in turn means that anything that is anchored to a guideline will be moved or resized as well.

Anchor points

Each element on your dashboard, such as a DV control, has four anchor points which appear just inside the selection border whenever the element is selected at design-time. An anchor point looks like a small red square with a black border. If you have multiple controls selected on the canvas, only the control that is the ‘primary’ selection will have its anchor points visible.

Anchor points on a bar chart.

Anchor points on a bar chart.


Creating an anchor line

Follow the steps below to create an anchor line that connects the bottom anchor of a bar chart to a user-created guideline. This will form a hard constraint that forces the bottom of the bar chart to remain a fixed distance (i.e. the length of the anchor line in pixel units) from the guideline no matter how the dashboard is resized.

  1. Create a new dashboard and add a bar chart to it.
  2. Set the Re-Size Mode property of the dashboard to Resize.
  3. Add a horizontal guideline and place it in the middle of the dashboard.
    Dashboard with chart and guideline.
  4. Click the bar chart's bottom anchor and drag downwards with your mouse. The anchor point turns white and a vertical drag line appears which tracks the position of your mouse.
    Anchor drag line.
  5. Continue extending the drag line until your mouse cursor is over the horizontal guideline and you can see a red connection point and the drag-and-drop indicator.
    Anchor connection point.
  6. Release the mouse button.

The anchor line is created along with its connection point (on the horizontal guideline). The bottom anchor point of the bar chart remains a white/clear color to indicate that it has already been anchored.

Bottom of bar chart is now anchored to a guideline.

Bottom of bar chart is now anchored to a guideline.


Removing an anchor line

To remove an anchor line from a control on your dashboard:

  1. Select the control on your dashboard so that its anchor points and lines will be visible.
  2. Locate the anchor line you want to remove.
  3. Click and drag its connection point (on the guideline) in any direction until the connection point disappears, then release the mouse button.

The anchor line is removed and the corresponding anchor point on the control returns to a red color.

Margin and pin properties

When you anchor one side of a dashboard control to a guideline, the corresponding margin and pin properties of the control are updated automatically. A pin property is a flag indicating whether that side of the control is anchored or not. A margin property is used to represent the length of the corresponding anchor line.

For example, suppose you have anchored the top of your chart to the top guideline, and the corresponding anchor line has a length of 25 units. Next, you anchor the bottom of your chart to a guideline in the middle of the dashboard, where the anchor line has a length of 50 units. If you go to the Properties grid for the chart and show advanced properties, you will see the following Layout properties are automatically set as follows:

  • Margin.Top = 25
  • Margin.Bottom = 50
  • Top Pin = True
  • Bottom Pin = True

Layout margin and pin properties.

Layout margin and pin properties.


From the Properties grid, you can:

  • Set a pin property to False to remove the corresponding anchor line.
  • Set a pin property to True to anchor the corresponding side to a guideline.
  • Set the margin value for an anchored side in order to precisely fix the length of the anchor line. This is useful for making fine-grained adjustments but note that the size and/or position of the control (⪚ chart) may be changed as well.

Tip: You can also change these property values from script.

Examples

Creating a resizable dashboard

The following example shows how to create a resizable dashboard similar to the one shown earlier.

Create a new dashboard:

  1. Change the dashboard's Background to a light blue color.
  2. Set the Re-Size Mode property of the dashboard to Resize.
  3. Set the Width to 500 and the Height to 300.
  4. Add a horizontal guideline and position it in the middle of the dashboard.

Add a bar chart to the dashboard:

  1. Position the bar chart in the top half of the dashboard.
  2. Change its Background to White.
  3. Anchor the left, top, and right sides of the bar chart to the border guidelines.
  4. Anchor the bottom of the bar chart to the horizontal guideline in the middle of the dashboard.

Bar chart anchored on all four sides.

Bar chart anchored on all four sides.


Add a line chart to the dashboard:

  1. Position the line chart in the bottom half of the dashboard.
  2. Change its Background to White.
  3. Anchor the left, bottom, and right sides of the line chart to the border guidelines.
  4. Anchor the top of the line chart to the horizontal guideline in the middle of the dashboard.

Line chart anchored on all four sides.

Line chart anchored on all four sides.


You can now save and view the completed dashboard. Try resizing your browser window to see how the two charts resize.

A resizable dashboard.

A resizable dashboard.


Tip: You can achieve different kinds of repositioning and/or resizing behavior for a control by anchoring just one, some, or all of its anchor points.

Minimum and maximum dashboard size

By default, while viewing a resizable dashboard, the user is able to resize the dashboard as small or as large as they like. But resizing a dashboard too small may make it unusable. In this case, you can set the dashboard's Minimum Width and Minimum Height properties (advanced) to prevent the user from resizing the dashboard too small. Correspondingly, the dashboard's Maximum Width and Maximum Height properties (advanced) can be used to prevent the user from resizing the dashboard too large.

Dashboard min/max size properties.

Dashboard min/max size properties.


Notes

Mixed positioning system

When using the Resize mode, the system of guidelines and anchor lines operate under a mixed positioning system. Guidelines, as mentioned earlier, are positioned internally using percentages of the size of the dashboard. An anchor line, on the other hand, represents a hard constraint on the distance between the anchored element and a guideline, and this distance is measured in pixel units. This combination of a percentage-based (relative positioning) and pixel-based (absolute positioning) system makes it possible for designers to implement almost any kind of desired repositioning/resizing/layout scenario.

HTML and mobile viewing considerations

For some notes regarding the design of resizable dashboards for HTML viewing, see Designing Dashboards and Tiles for HTML Viewing.

Related topics


Click to return to: Documentation | Designing Dashboards

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

Copyright © 2009-2014 Dundas Data Visualization, Inc.