Getting Started with Dashboard Designer

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

Running Dashboard Designer

Launch the Dashboard Designer application by double-clicking the shortcut icon in the desktop.

Dashboard icon

Alternatively, you can launch the Dashboard Designer application from the Apps list.

Syncfusion Dashboard Designer

After launching, the Dashboard Designer application opens with the following view.

New dashboard

Connecting to data

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

Setting up connection

Click Add in the data source configuration smart screen window to launch a New Connection configuration dialog.

Add new data source

Configuring tables and views

In the New Connection configuration dialog, fill the connection type and required details.

New connection

Test the connection for its validity by clicking the Test Connection button. The following confirmation message will be displayed.

Test connection

Click OK to close the confirmation message, and then click Connect in the New Connection dialog. The following view will be displayed.

Data design view

The left pane holds the tables and views associated with the connected database. Drag your preferred table or view from the left pane and drop into the center pane labeled Drag & drop tables to create a virtual table as follows.

Virtual table

The dropped tables will be remarked by a tick mark before the name of both table and its columns in the left pane as follows.

Tickmark of table

The primary key defined in the table in the connected database will also be remarked.

Primary key

Similarly, the foreign key will be checked as follows.

Foreign key

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

Data type icon

Add more than one table, if you prefer, through the following same drag n 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.

Column settings

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

Remove column

The removed column will be represented with the red colored icon as above. Clicking the same, will re-include the removed column.

Handle column type conversion, if required, by clicking the Settings icon of the respective column and navigate to Change Column Type option. Select the preferred type to convert as shown in the following.

Change column type

For supported column types and their equivalent convertible types, refer to Formatting Columns.

Add the desired expression columns by creating it using the built-in functions and existing columns.

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 below.

Add filters

Creating Dashboard

To create a Dashboard, click Back to dashboard and navigate to the dashboard design view.

Back to dashboard

You can also click the respective dashboard tab directly to navigate to its design view.

Untitled dashboard

Now, the dashboard designer tab will open as follows.

Design view

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 toolbox and drop it in the available space of the design area.

Dragging of widgets

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.

Relationship of widgets

You can resize the dropped widget by placing the focus over the widget and dragging the widget corner as follows.

Resizing widget

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

Resized widget

Assigning data to widget


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

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

Data bind to widget

Click the Assign Data button in the design tools pane.

Assign data

Now, the widget view opens in a new tab.

Widget preview

Here, the left pane holds the widget preview that reflects the configuration changes made to the widget.

Column chart

Right pane holds data configuration view. The numeric columns get listed under the Measures section; other type columns are listed under the Dimensions section; the expression columns are created dynamically and listed under Expression Columns section.


Select and drag the numeric column (measure element) from the measures section or the expression column (from Expression Columns section) to be measured and drop it to the Value(s) section.

Measure to values

Now, the widget preview will be as follows.

Data rendering

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

Settings icon

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

Aggregation type

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

Drag and drop to columns

Now, the widget preview will be as follows.

Preview widget

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

Dimension to row

After the above, the widget preview will be as follows.

Chart with row data

To format the measure column values, click the Settings icon to open the drop-down list and select the Filter option to open the Measure Formatting dialog.

Drop-down list showing Format option

Measure Formatting dialog:

Measure formatting dialog

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

If required, apply filter to the dropped measure type or dimension type column(s) through Measure Filter and Filters dialogs respectively. This filters widget data (from getting bound to widget) that does not meet filter criteria.

Configuring properties to widget


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

Navigate to the Properties pane in the data design view tab.


From the dashboard design tab, you can navigate to the Properties pane by placing the focus in the widget as follows.

Data with widgets

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

Settings icon with widget

This pane holds some general settings and some specific to the widget. You can configure the desired settings. Refer to the Properties Configuration widget-wise for more details.

You can add more widgets by following the same procedure.

Once you are done with the dashboard, save the dashboard in local as SYDX formatted file.

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

Preview button

Now, the dashboard preview can be visualized through the built-in dashboard viewer in web browser page.

Dashboard preview in viewer

Sharing Dashboard

Publish the created dashboard to the Dashboard Server through authorized publish access from the Dashboard Designer.