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.

Adding Elements

Hide navigation
RSS
Modified on Wed, 22 May 2013 04:46 PM
Click to return to: Documentation | Designing Dashboards


Adding and editing elements

The Dashboard Designer screen lets you drag and drop elements onto a dashboard canvas. Here's what it looks like:

1 - Toolbox, 2 - Canvas, 3 - Properties (click to enlarge)

1 - Toolbox, 2 - Canvas, 3 - Properties (click to enlarge)


Toolbox

The Toolbox lists all of your KPIs, datasets, formulas, data controls and general controls.

You can drag items out of the toolbox and into the canvas or onto other items.

Canvas

The Canvas is where you create your dashboard. It starts out blank with a white background, ready for your data controls and general controls.

Drag elements around the canvas to position them where you want; you can also use the arrow keys to move the selected object for precise positioning.

Tip: You can drop elements outside of the canvas. These elements will not be visible when the dashboard is viewed, but they can be used for scripting interactions. Reposition them in the canvas to make them visible.

Properties

The Properties grid lets you view and change the currently selected item's properties, and switch between selected items.

Tip: You can multi-select controls on the canvas by using the CTRL key, then use the Properties grid to view just the properties that are common to the selected controls.

Element controls

Each dashboard element, including the canvas, has a standard set of design-related controls (such as a selection rectangle) associated with it:

A chart and its design-related controls.

A chart and its design-related controls.


Tip: Mousing over active parts of a design control causes the mouse cursor to change, letting you know what action dragging that part will have.

Selection rectangle

The thick blue line around the outside of the selected item is the selection rectangle. It lets you know which item is selected in the designer. Grab any edge of the selection rectangle by the four dots to resize the item along that side, or grab a corner dot to resize two sides at once.

Grid

The gray dots on the canvas are the grid. Items will snap to the grid as long as the Snap to grid option (found at the bottom of the canvas) is checked. Uncheck this option if you want to hide the grid.

Use the slider next to the Snap to grid checkbox to adjust the grid spacing. Or, use the numeric up-down control on the right to enter a precise value for the grid spacing.

Guidelines

The red lines along the edge of the canvas are guidelines. Elements can be attached to the guidelines by their anchor points to help control dashboard resizing.

You can drag additional guidelines onto the canvas from the rulers at the edge of the designer. These guidelines can be moved anywhere on the canvas.

For more details on guidelines and anchoring, see Designing Resizable Dashboards.

Anchor points

The red squares (one in the middle of each side of the selection rectangle) are anchor points.

The anchor points are used in conjunction with guidelines to define your dashboard's behavior during resizing.

Note: If a control is anchored on both sides, changing its Width property will have no effect. Similarly, if a control's top and bottom are anchored, changing its Height will have no effect.

Anchoring to a guideline

Tip: Drag an element's anchor to a guideline to anchor it to that guideline.

The element will stick to the guideline, but remain the same distance from it. For example, if you connect an image to a guideline that's 32 units away, it will stay 32 units away no matter how the dashboard is resized.

For more details on guidelines and anchoring, see Designing Resizable Dashboards.

Dashboard controls

Data controls

The Data controls are data visualization elements that present data from one or more KPIs/datasets on the screen.

General controls

The General controls are elements that can enhance your dashboard, but don't deal directly with KPI data.

Analytical controls (OLAP)

Analytical controls are data controls for creating an analytical dashboard, which lets users perform in-depth analysis on their OLAP data.

Dashboard Canvas

The Dashboard Canvas is the container for all of your dashboard elements. Use it to adjust the dashboard's background color and set up your dashboard during loading.

The Dashboard Canvas is always part of your dashboard. You cannot delete it or rename it. You can however select it by clicking on the dashboard outside of any controls or other elements. Once selected, you can view and modify the properties of the Dashboard from the Properties grid.

Selecting elements

When an element is selected on the canvas:

  • The element appears with a selection rectangle, menu button, anchor points, and anchor lines to guidelines (if any).
  • The properties of the element appear in the Properties grid.
  • You can delete the element by pressing the DEL key (be careful!).
  • The Dundas Dashboard toolbar shows only the options that apply to the selected element.

Tip: You can also select the canvas/dashboard itself by clicking on the white portion of the dashboard which is outside of any controls or other elements.

Selecting a single element

There are different ways to select a single element such as a chart on the canvas:

  1. Select an element by clicking on it.
  2. Use the dropdown list at the top of the Properties grid to choose the element you want to be selected.
  3. Select an element from the Element Explorer.

Selecting multiple elements

You can also select multiple elements at once and apply operations to them as a whole.

When multiple elements are selected:

  • Only one element has the primary selection, which appears with the standard selection rectangle. The other selected elements are shown with a thin, dotted selection border. The element with the primary selection is the one that is tracked in the Element Explorer and the dropdown list at the top of the Properties grid.
  • The Properties grid shows only the properties that are common to each of the selected elements. This lets you change a property on all selected elements with just a single operation.

Selecting multiple elements.

Selecting multiple elements.


There are two ways to select multiple elements on the canvas. The first way is to press the CTRL key and click on the elements you want to select. In this case, the element that you click last will have the primary selection.

The second way to select multiple elements is to drag out a rectangle that encompasses the elements you want to select, then release the mouse. Note that the drag rectangle must enclose the elements completely in order for them to be selected.

Drag rectangle.

Drag rectangle.


Moving elements

To move one or more elements around the dashboard canvas, simply select the element(s) as shown in the previous section and drag them to a new position using your mouse.

In order to line up multiple elements horizontally or vertically, it is recommended to line them up as best as you can with the mouse first, then use the arrow keys to fine tune the position of each selected element. When you press one of the arrow keys, the selected element(s) move 10 pixels exactly. But if you hold down the CTRL key and then press an arrow key, the selected element(s) move just 1 pixel at a time. This lets you have precise control over the positioning. For more information about keyboard shortcuts in the Dashboard Designer, click here.

As you move an element on the canvas, you can see its position values in the properties grid. Simply locate the Layout section and look at the Left and Top property values. You can even move an element just by editing these property values directly in the properties grid.

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.