Dashboard Designer Walk Through

This is a simple walkthrough to get you started with the Dashboard Designer. Throughout this walkthrough, the Northwind database is used to demonstrate each feature of the Dashboard Designer.

Opening dashboard designer

Open the Dashboard Designer by clicking the drop down button and selecting Create -> Dashboard.

Now, the dashboard designer page opens as shown in the following image.

Connecting to data

Add a new data source after establishing a data connection with one of the supported data connection types as follows.

Setting up connection

Click Data Source button in the configuration panel.

Click CREATE NEW to launch a new connection from the connection type panel or use the existing data source by clicking the USE EXISTING in the data source window.

In the connection type panel, click one (here, Microsoft SQL connection type is selected for demonstration) of the listed connection types.

NOTE

To connect files and other web data sources, configure the intermediate DB for extract mode support. You can set it by clicking the settings link (marked in previous image). It will redirect you to the data store settings page in server. Refer to the steps to configure the intermediate DB.

Configuring tables and views

In the NEW DATA SOURCE configuration panel, fill the connection type and related details.

Click Connect in NEW DATA SOURCE configuration panel.

Now, the following view displays.

The left pane holds the tables and views associated with the connected database. Drag the preferred table or view from the left pane and drop into the center pane labeled Drag and Drop table here.... as follows.

The dropped tables will be remarked by a tick mark before names of both tables and their columns in the left pane.

The data type of each column will be represented nearby as follows.

Add more than one table, if you prefer, by following the same drag and drop operation. This is subjected to joining of tables.

Transforming data

Rename the column as required either by selecting the options in the Settings drop-down menu or double-clicking the column to enable the edit mode.

Remove the unwanted column by clicking the icon at left side of the respective column.

The removed column will be represented like above. Clicking the same, will re-include that column for consideration.

To change the column type, click the Settings icon of the respective column and navigate to Change Column Type, and then select the preferred type to convert as shown in the following image.

For supported column types and their equivalent convertible types, refer to formatting columns.

Add the required expression columns, by creating it using built-in functions and existing columns by clicking the option in the tools pane in data design view highlighted below.

Filter the data that is not required in the dashboard using the data filters option in the tools pane in data design view as highlighted in the following screenshot.

Click Save in the tools pane in the data design view to navigate to the dashboard design view.

Creating dashboard

Now, the dashboard design view opens after configuring the table successfully.

Adding a widget to design view

The left toolbox pane consists of data visualization, filter, and miscellaneous widgets to design an interactive dashboard.

Click and drag the preferred widget from the toolbox and drop it in the available space of the design area.

The widget drop will happen only when you drop it in the appropriate region. In the above image, the blue border of the cell indicates that the targeted region is valid to drop.

The invalid region will be represented by a red border. This happens when you drop over a region where a widget or its part already exists.

If required, the dropped widget can be resized by placing the focus over the widget and dragging the widget corner as follows.

Doing so, will render the widget to the size you dragged. Here, the blue border indicates the occupied cell range of widget after resizing.

Assigning data to widget

NOTE

This step is applicable only for the widget that do not belong to miscellaneous category.

To bind data to a widget placed in the design area, focus that widget.

Click Properties button in the configuration panel, the property pane opens. Now, switch to ASSIGN DATA tab.

Here, the widget in the designer canvas will reflect the configuration changes made to the widget.

The ASSIGN DATA tab holds data configuration view. The numeric columns and numeric expressions are listed under the Measures section; other type columns and dimension expressions are listed under the Dimensions section.

Select and drag the numeric column (measure element) or the numeric expression column from the Measure section and drop it in the Y Values section.

Now, the widget will look like this.

Click the Settings icon (highlighted) to open the aggregation type drop-down list.

Set the preferred aggregation type to compute the dropped measure column.

Select and drag the non-numeric column (dimension element) from the Dimensions section against which you need to measure the numeric columns dropped, and drop it to the Columns section.

Now, the widget will look like this.

To group the added column element by a column, add the respective non-numeric column (dimension element) into rows section.

To format the measure column values, if required, click the Settings icon (highlighted) to open the drop-down list and click the Format option to open the Measure Formatting dialog.

The Measure Formatting dialog will open as follows.

Make necessary changes and click OK to save the pending changes. Click Cancel to cancel the unsaved changes, and close the dialog.

You can filter the data for particular widget using Measure Filter or Dimension Filteroption shown in the Settings drop down menu.

Measure Filter

The Measure Filter dialog will open as follows.

Refer to filter to make required changes and click Apply to save the changes.

Dimension Filter

The Dimension Filter dialog will open as follows.

Refer to filter to make required changes and click OK to save the changes.

You can customize the sorting behavior of dimension and measure fields in each widget using Sort option shown in the Settings drop down menu.

Measure Sorting

The Measure Sorting dialog will open as follows.

Refer to sort to make required changes and click Apply to save the changes.

Dimension Sorting

The Dimension Sorting dialog will open as follows.

Refer to sort to make required changes and click Apply to save the changes.

Configuring properties to widget

Navigate to the PROPERTIES pane in the properties tab.

From the dashboard design tab, you can navigate to the properties pane by placing the focus in the widget like below.

Click the Settings icon at top right corner of the widget. Focus moves to the data design view tab and opens the PROPERTIES pane.

This pane holds some general settings and some specific to the widget. Configure the desired settings and refer to the Properties Configuration widget-wise for more details.

You can add more widgets by following the same procedure to create a dashboard like below.

Once you are done with the dashboard, Save the dashboard by clicking the Save button in the tools pane.

Click preview at the top-right of the tools pane to see the dashboard preview launched in the web browser page.

Now, the dashboard preview can be visualized like below.

You can design any number of dashboards by following the steps given above.