Design tips


1. Overview

A collection of design tips and miscellaneous how-tos for designing dashboards in Dundas BI.

2. Brush editor

In Dundas BI, color properties of components and data visualizations can be modified using the brush editor in the Properties window. One of the features it supports is the ability to enter hexcodes or RGB/RGBA values using a number of different formats.

Entering hex values for a color property
Entering hex values for a color property

3 hex characters #F00 Red
3 hex characters without hashmark F0F Fuchsia
6 hex characters #FFFFFF White
6 hex characters without hashmark 808080 Gray
rgb() rgb(255,255,0) Yellow
rgba() rgba(0,255,255,0.5) Aqua with 50% Opacity
RGB values with spaces 255 255 255 White
RGB values with commas 255,255,255 White
RGBA values with spaces 255 255 0 0.75 Yellow with 75% Opacity
color name with alpha red 0.5 Red with 50% Opacity
3 hex characters with alpha 333 .5 #333333 with 50% Opacity
6 hex characters with alpha 696969 .5 DimGray with 50% Opacity

3. Default font settings

Define the font settings for the whole dashboard or template. All items on the dashboard will default to these settings, but you can still override them when necessary by setting their font properties separately.

With nothing selected on the dashboard, open the Properties panel and go to the Text tab.

Default font settings
Default font settings

All web browsers render fonts slightly differently. For example, this may cause a table visualization in Internet Explorer to show a vertical scrollbar that does not appear when using Chrome. In most cases, you can resolve such issues by resizing the table a bit larger. Alternatively, check that the sizing looks correct in other browsers.

4. Re-Size action

Add a Re-Size script action on a view such as a dashboard so you can respond when the view is resized. This may occur when the user resizes their browser or when the orientation is changed on the user's device. But note that orientation changes are not always detected because some devices fire a different event in this situation.

Scripting the Re-Size action may be useful for responsive design. For example:

  • Add a script to detect a change in screen width (e.g., from 500 px to 1200 px), and then show or hide layers in response.
  • Add a script to detect a change in screen width, and then redirect to another dashboard more suited for the size of the screen.

Re-Size action for a dashboard
Re-Size action for a dashboard

5. Align controls

As you drag or resize a control, contextual guidelines (dotted lines) appear to help you align the control with other controls. When your control snaps into alignment with another control, the line turns red and the boundaries of the relevant control appear.

Contextual guidelines for snapping to other controls
Contextual guidelines for snapping to other controls

If you want to temporarily disable snapping to other controls, hold the Alt or Option key while dragging or resizing your control.

If snap-to-grid is enabled, your control will also be snapped to the grid while dragging or resizing. To turn snap-to-grid off, go to the status bar and click Disable snap grid.

5.1. Arrange multiple controls

When multiple controls are selected, you can adjust their alignment using the Arrange option on the toolbar.

Arrange options for multiple controls
Arrange options for multiple controls

You can use these options to quickly Distribute, Align, and Size multiple controls.

The options Match Width and Match Height will match the last-selected control, which will be indicated by bold borders.

6. Resize control within template grid

Double-click the resize handle of a control within a template grid cell to expand/contract the corresponding side (or corner) of the control to the cell edge (or corner).

Double-click resize handle to expand that side to cell edge
Double-click resize handle to expand that side to cell edge

Control is resized to the cell edge
Control is resized to the cell edge

7. Upload multiple files

Instead of using drag-and-drop, you can upload one or more image files, maps, or diagrams to corresponding Explore folders using a context menu option.

For example, right-click on the Images folder and select Upload File.

Click Upload File
Click Upload File

In the Upload File dialog, click Choose Files. Then select one or more image files from your computer.

Click Choose Files
Click Choose Files

The images will be uploaded to the Images folder in Explore.

Uploaded images
Uploaded images

8. 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:
Phone: 9am-6pm, ET, Mon-Fri
Email: 7am-6pm, ET, Mon-Fri