Design Overview

Contents[Hide]

The Dundas BI Dashboard Designer screen is displayed when you create a new dashboard from the main menu or from the home screen.

Elements of the designer screen include the toolbar at the top, a status bar along the bottom, and the actual design surface with horizontal and vertical rulers. The white, rectangular portion of the design surface represents your dashboard and is generally referred to as the canvas.

You design dashboards and other views simply by dragging items from the Explore window on the right, and placing them on the dashboard canvas. For example, drag a metric set to the canvas and it will automatically appear as a chart or other type of visualization showing actual data values. Or, add a label component to the canvas and use the Properties window to change its font size and color.

Dashboard Designer screen
Dashboard Designer screen

Related video: Creating and Viewing Dashboards

1. Elements

Here's a quick tour of the main elements of the user interface (UI) for designing views.

1.1. Toolbar

The toolbar at the top of the dashboard designer screen lets you perform a wide range of design functions. You can copy and paste items from the clipboard, add different types of controls to the canvas, or apply a style or theme. Essential operations such as switching to View mode are always visible in the toolbar while the remaining buttons may be scrolled left or right depending on the available space.

Toolbar
Toolbar

Certain operations appear or disappear from the toolbar according to the current selection. For example, if you select a data visualization on the canvas, you'll see a set of toolbar buttons on the right with a blue edge on top. These buttons correspond to operations that apply to the selected data visualization, such as Re-Visualize.

Buttons on the right apply to the current selection
Buttons on the right apply to the current selection

1.2. Status bar

The status bar (also known as a taskbar) displays the name of the current dashboard or view, and lets you rename it as well. Next to the dashboard name is a message area that informs you whenever the dashboard has been auto-saved. Further to the right, you'll find a set of controls for adjusting the zoom level and snap-to-grid options for the canvas. 

Status bar
Status bar

See Using the status bar to learn more.

1.3. Rulers

The horizontal and vertical rulers which are attached to the design surface help you to size and position elements on the canvas. The default units are pixels (px), with the top-left corner of the canvas (dashboard) corresponding to the position (x=0, y=0). The rulers also track the location of your mouse pointer as you move it across the design surface.

Rulers
Rulers

To switch the rulers to percent units, click px. In this mode, the bottom-right corner of the canvas corresponds to the position (x=100%, y=100%).

1.4. Canvas

The canvas is the rectangular portion of the design surface that corresponds to the dashboard (or view type) that you are designing. When you click on the canvas (outside of any controls), the toolbar presents options that are applicable to the dashboard and the Properties window displays the properties of the dashboard such as Re-Size Mode and Height.

Properties of the canvas (dashboard)
Properties of the canvas (dashboard)

As you drag a control on the canvas, a snap grid appears along with dotted lines that make it easy to align the control with other elements on the dashboard.

Aligning a label with another control on the canvas
Aligning a label with another control on the canvas

Right-click (or long-tap) over an element on the canvas to open a context menu which gives you convenient access to many of the same functions available from the toolbar.

Context menu for a control on the canvas
Context menu for a control on the canvas

2. Windows

A set of tabbed windows are docked along the bottom and right sides of the designer screen. By default, the windows docked on the bottom are collapsed (e.g., the Parameters window), while the ones docked on the right are expanded (e.g., the Explore window). To learn how to work with and arrange these windows, see Using dockable windows in the dashboard designer.

2.1. Explore

All of the work that you do in Dundas BI occurs within the context of a current project, which allows users to collaborate on the same dashboard or BI effort. The Explore window lets you navigate this current project, which appears as a collection of folders containing files such as data connectors, metric sets, and dashboards. 

Explore window
Explore window

Using the Explore window, you can easily switch between different kinds of tasks, from designing dashboards to creating data cubes and more. For example, right-click (or long-tap) on the Metric Sets folder and select New Metric Set to switch to the Metric Set Designer screen. Or, click New Folder to create a sub-folder to better organize your project items.

Create a new sub-folder
Create a new sub-folder

Enter search terms in the Explore search box to quickly find the files you want.

Search for files
Search for files

The toolbar at the top of the Explore window lets you enable checkboxes on project items and apply operations such as check in and check out on multiple files at once. The Explore toolbar is also responsive to the current selection in the treeview and presents similar options to that of the context menu.

Use the Explore toolbar to enable checkboxes and apply operations to multiple files at once
Use the Explore toolbar to enable checkboxes and apply operations to multiple files at once

2.2. Layers

Layers give you a way to organize elements on your dashboard as a collective unit, which you can then show or hide at design-time, or control through scripting. One reason for separating elements into different layers is when you have a complex dashboard with overlapping elements. As you're designing, you can hide layers that are completed and show just the layers you are actively working on. Layers can also be locked to prevent accidental modification (e.g., moving a chart out of position by mistake).

Layers window
Layers window

The Layers window lets you choose the active layer, add new layers, and show or hide each layer independently. See Layers and groups to learn more.

2.3. Properties

The Properties window lets you view and change the properties of a selected element on the design surface. Elements can include components such as labels and images, filter controls, and data visualizations. If no element is selected (e.g., you clicked on the canvas outside of any controls), the Properties window shows the properties of the dashboard (or other view) that you are editing. Any changes that you make in the Properties window are reflected right away on the canvas.

Properties window
Properties window

With respect to data visualizations, you use the Properties window primarily for data presentation. For example, you can change the appearance of text displayed by a chart, or add color rules to assign colors based on data point values.

The Properties window also gives you access to the actions supported by a control, allowing you to add scripts to customize behavior when the action (event) is raised.

2.4. Script Editor

The Script Editor lets developers write JavaScript code using our API to further customize and enhance dashboards. For example, with a script, you can program a drop down list component to switch the metric sets displayed by a chart on a selection changed event.

Built-in Script Editor with auto-complete support
Built-in Script Editor with auto-complete support

Alternatively, you can write scripts using browser developer tools which offer JavaScript debugging capabilities.

Using the Script Editor together with Chrome Developer tools
Using the Script Editor together with Chrome Developer tools

2.5. Parameters

Parameters are programmable objects that connect filter controls to the metric sets and data visualizations being filtered. Click the Parameters tab to view and manage the parameters that are defined for your dashboard.

Parameters window
Parameters window

The Brush View Parameter that appears by default in the Parameters window is used for data brushing, which is a built-in feature that allows you to highlight data in one control and have it automatically highlighted in another control displaying the same or related data. The brush view parameter facilitates communication between different data visualization controls on the dashboard so they know which point to brush.

2.6. Data Preview

Select a data visualization control on the canvas, and then click the Data Preview tab to see the underlying data values displayed in a table. If your data visualization is a bar chart, hover over a table cell in the Data Preview window to see the corresponding data point in the chart highlighted. This is an example of automatic data brushing that's built into Dundas BI.

Data Preview window
Data Preview window

The Data Preview window also lets you view performance statistics and warning messages related to data retrieval for the selected data visualization on the canvas.

Performance measurements
Performance measurements

3. Concepts

3.1. Data Binding

For every data visualization control that shows data on your dashboard, there is a corresponding metric set which encapsulates the data that is being visualized, and metric set bindings which specify how the various elements of the data visualization (such as chart series tooltips) are bound to data elements.

Modifying the control's underlying metric set or its bindings is done using the Data Analysis Panel. Contrast this with the Properties window, which you use for data presentation purposes such as appearance, animation, and interactivity.

Right-click on a data visualization to open its Data Analysis Panel
Right-click on a data visualization to open its Data Analysis Panel

If the metric set is checked out to yourself, you can directly add or remove measures and hierarchies from the Data Analysis Panel. Use the buttons at the top of the Data Binding Panel to make other changes to the metric set (including overrides) or the metric set bindings.

See Introduction to Data Binding for more details on bindings and using the Data Analysis Panel.

4. 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: 7am-6pm, ET, Mon-Fri