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

Click on the below option to create a new dashboard in ‘Syncfusion Dashboard Cloud’.

Create Dashboard Option

Two ways of creating dashboards are displayed.

Ways of Creating Dashboards

Open the Dashboard Designer by clicking the Blank Dashboard option as highlighted below.

create dashboard using option in server

You can also open the Dashboard Designer by clicking the add button for creating dashboard drop down button and selecting Create -> Dashboard.

add dashboard using option in server

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

new dashboard

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.

datasource button in 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.

button for creating new connection

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

list of available connections

Configuring tables and views

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

filling required details

Click Connect in NEW DATA SOURCE configuration panel.

button for connecting datasource

Now, the following view displays.

tables and views for the connected database

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.

dropped table in canvas

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

remark of dropped table

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

representing the datatype of each column

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.

icon for column settings

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

removing unwanted column using icon

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.

changing data type of column

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.

option for opening expression dialog

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.

option for opening the filter dialog

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

button for saving the datasource

Creating dashboard

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

new dashboard

Adding a widget to design view

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

list of widgets available for designing

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

types of comparison 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.

indication of error when dropping the widget in wrong region

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

resizing the widget using corners in 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.

resizing the widget using corners in widget

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.

configuring widgets with data

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

tab for viewing the properties of widget

tab for assigning data

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

bar chart

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.

available sections in data configuration pane

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.

dropping dimennsion column in values section

Now, the widget will look like this.

rendering chart for Values

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

icon for displaying available settings

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

types of aggregation in settings popup

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.

dropping dimension column in column section

Now, the widget will look like this.

configured widget

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

dropping dimension column in row section

rendering chart with row data

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.

formatting option in settings popup

The Measure Formatting dialog will open as follows.

dialog for formatting the measure

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

measure filtering option in settings popup

The Measure Filter dialog will open as follows.

dialog for applying measure filter

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

Dimension Filter

filtering option in settings popup

The Dimension Filter dialog will open as follows.

dialog for applying filter

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

measure sorting option in settings popup

The Measure Sorting dialog will open as follows.

window for measure sortig

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

Dimension Sorting

sorting option in settings popup

The Dimension Sorting dialog will open as follows.

window for advance sorting

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.

properties pane in design 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.

button for view the properties of the selected widget

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.

button for saving the created dashboard

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

button for launching preview in web browser

Now, the dashboard preview can be visualized like below.

previewing dashboard in viewer

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