---
title: "How to: Add a Chart to a Dashboard"
slug: "use-case-adding-a-chart-to-a-dashboard"
description: "Learn to create a dashboard with a pie chart, KPI widget, and action button using data visualization tools for insightful fund transfer analysis."
updated: 2026-01-20T17:54:44Z
published: 2026-01-20T20:38:53Z
canonical: "docs.unqork.io/use-case-adding-a-chart-to-a-dashboard"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# How to: Add a Chart to a Dashboard

Data visualization tools, like charts, are a great way to gather insights from a data set. The **Chart** **component** makes it easy to add different types of charts to your dashboard. In this example, you'll learn how to add a pie chart to your dashboard. The pie chart will display the number of accounts that are transferring funds from a given bank.

This how-to guide also includes steps for building a dashboard with an action button and a KPI widget. The dashboard retrieves submissions from the following source module: [https://training.unqork.io/#/form/5eb482f3c8368d0210c74cbf/edit](https://training.unqork.io/#/form/5eb482f3c8368d0210c74cbf/edit).

> These instructions assume you have a new module open, saved, and with a title.

Select the tab that corresponds to your Unqork Designer experience:

UDesignerClassic Designer

## Preconfiguration

### Configure the Panel Component

This [Panel](/v1/docs/panel-component) component acts as a container for the components that follow.

1. In the Module Builder, drag and drop a **Panel** component onto your canvas.
2. In the **Property ID** field, enter `panelDashboard`.
3. Click **Save Component**.

### Configure the Initializer Component

This [Initializer](/v1/docs/initializer-component) component triggers the [Plug-In](/v1/docs/plug-in-component) components that you'll set up later.

1. Drag and drop an **Initializer** component inside your Panel component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `initStart`.
3. From the **Trigger Type** drop-down, select **New Submission**.
4. In the **Outputs** table, enter the following:

| Property ID | Type | Value |
| --- | --- | --- |
| pluginGetSubmissions | trigger | GO |

![Initializer settings Trigger Type and Outputs table highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddChartToDashboard_initStart(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
5. Click **Save Component**.

### Configure the Hidden Component

This is the first of four [Hidden](/v1/docs/hidden-component) components in this configuration. It stores the module ID of your source module. You can retrieve the module ID from the source module’s hyperlink as follows: https://training.unqork.io/#/form/**5eb482f3c8368d0210c74cbf**/edit.

1. Drag and drop a **Hidden** component onto your canvas, placing it below your Initializer component.
2. In the **Property ID** and **Label Text** fields, enter `moduleId`.
3. Set **Store Data in Database** to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(771).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D) **(ON)**.
4. In the **Default Value** field, enter `5eb482f3c8368d0210c74cbf`. This is the source module's module ID.
5. Click **Save Component**.

### Configure the Plug-In Component

This [Plug-In](/v1/docs/plug-in-component) component uses an API to retrieve submissions and display them in your dashboard.

1. Drag and drop a **Plug-In** component onto your canvas, placing it below the `moduleId` **Hidden** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `pluginGetSubmissions`.
3. From the **Internal Services** drop-down, select **List Submissions for Dashboard**.
4. In the **Inputs** table, enter the following:

| # | Property ID | Mapping |
| --- | --- | --- |
| 1 | moduleId | moduleId |
| 2 | 'firstName,middleName,lastName,email,dateOfBirth' | fields |
| 3 | 'investmentAmount,transferringBank' | fields |

> [!NOTE]
> The first row references the module ID stored in the `moduleId` **Hidden** component. The second and third rows determine which fields you're displaying in the dashboard. Here, you’ll retrieve the `firstName`, `middleName`, `lastName`, `email`, `dateOfBirth`, `investmentAmount`, and `transferringBank` fields. The values entered in the Mapping column (`moduleId` and `fields`) are native values to Unqork.

![Plug-in settings with Internal Services and the Inputs table highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddChartToDashboard_pluginGetSubmissions.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
5. In the **Post Trigger** field, enter `dwfProcessSubmissions`. Doing so tells the `dwfProcessSubmissions` **Data Workflow** component you’ll add later to fire as soon as the Plug-In component retrieves submissions.
6. Click **Save Component**.

### Configure the Hidden Component

The second [Hidden](/v1/docs/hidden-component) component stores the submission ID.

1. Drag and drop a **Hidden** component onto your canvas, placing it below your Plug-In component.
2. In the **Property ID** and **Label Text** fields, enter `submissionId`.
3. Set **Store Data in Database** to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(771).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D) **(ON)**.
4. Click **Save Component**.

### Configure the ViewGrid Component

Next, let's add a [ViewGrid](/v1/docs/viewgrid-component) component to display your dashboard.

1. Drag and drop a **ViewGrid** component onto the canvas, placing it below the `submissionId` **Hidden** component.
2. In the **Property ID** field, enter `gridView`.
3. In the **Canvas Label Text** field, enter `View Grid`.
4. In the **Inputs** table, enter the following:

| # | Source | Required |
| --- | --- | --- |
| 1 | pluginGetSubmissions | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box(7).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D) (checked) |
5. In the **Outputs** table, enter the following:

| # | Source | Mapping |
| --- | --- | --- |
| 1 | submissionId | id |
6. In the **Display** table, enter the following:

| # | ID | Formula | Heading |
| --- | --- | --- | --- |
| 1 | firstName |  | First Name |
| 2 | lastName |  | Last Name |
| 3 | email |  | Email |
| 4 | investmentAmount |  | Investment Amount |
| 5 | transferringBank |  | Transferring Bank |

![ViewGrid settings with the Inputs, Outputs, and Display tables highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddChartToDashboard_gridView.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
7. In the **Action** field, enter `View`.
8. In the **Event** field, enter `View`.
9. Click **Save Component**.

### Configure the Decisions Component

This [Decisions](/v1/docs/how-to-guide-decisions-component) component provides the trigger for your dashboard's **View** button.

1. Drag and drop a **Decisions** component onto the canvas, placing it below your ViewGrid component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `ruleButtons`.
3. In the **Inputs** table, enter the following:

| # | Property ID | Type | Required | Silent |
| --- | --- | --- | --- | --- |
| 1 | buttonClick | exact | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D) (unchecked) | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D) (unchecked) |
| 2 | moduleId | exact | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D) (unchecked) | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box(7).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D) (checked) |
| 3 | submissionId | exact | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D) (unchecked) | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box(7).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D) (checked) |

> [!NOTE]
> Every row in the Inputs table gets an associated column in the Conditionals table. If an input does not have a value in its Conditionals column, Unqork sets it to silent. In the next steps, you won't add values to the **moduleId** and **submissionId** columns. You'll only be using these inputs in the **panelDashboard_pageOpen** conditional. So, you can mark these values as silent, or let Unqork do it for you.
4. In the **Outputs** table, enter the following:

| # | Property ID | Type |
| --- | --- | --- |
| 1 | panelDashboard | pageOpen |
5. In the **Conditionals** table, enter the following:

| # | buttonClick | moduleId | submissionId | panelDashboard_pageOpen |
| --- | --- | --- | --- | --- |
| 1 | View |  |  | =concatenate('/#/display/',moduleId,'/', submissionId , '/',moduleId) |

![Decisions settings showing the Inputs, Outputs and Conditionals tables highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddChartToDashboard_ruleButtons.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
6. Click **Save Component**.

### Configure the Hidden Component

This [Hidden](/v1/docs/hidden-component) component stores the value submissions, acting as a replica of the `pluginGetSubmissions` **Plug-In** component. You'll reference the `submissions` **Hidden** component in the [Data Workflow](/v1/docs/data-workflow-component) components that you'll create next.

1. Drag and drop a **Hidden** component onto your canvas, placing it below the `panelDashboard` **Panel** component.
2. In the **Property ID** and **Label Text** fields, enter `submissions`.
3. Set **Store Data in Database** to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(771).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D) **(ON)**.
4. Click **Save Component**.

### Configure the Data Workflow Component

This [Data Workflow](/v1/docs/data-workflow-component) creates a replica of the `pluginGetSubmissions` **Plug-In** component, stored in the `submissions` **Hidden** component.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below your `submissions` **Hidden** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `dwfProcessSubmissions`.

#### Configure the Input Operator

1. Drag and drop an **Input** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | pluginGetSubmissions |
| Required | Yes |
| Source | Default |

#### Configure the Output Operator

1. Drag and drop an **Output** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Output |
| Component | submissions |
| Action | value |
3. Connect the output port (right) of the **Input** operator to the input port (left) of the **Output** operator.

![Data workflow canvas with Input and Output operators.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image-1767975123892.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
4. Click **Save Component**.

### Configure the Hidden Component

This [Hidden](/v1/docs/hidden-component) component stores the KPI count that you'll create in your `dwfKPI` **Data Workflow**. You'll use this value in your KPI widget.

1. Drag and drop a **Hidden** component onto your canvas, placing it below the `dwfProcessSubmissions` **Data Workflow** component.
2. In the **Property ID** and **Label Text** fields, enter `hiddenKpi`.
3. Set **Store Data in Database** to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(771).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D) **(ON)**.
4. Click **Save Component**.

### Configure the Data Workflow Component

Next, you’ll add your second [Data Workflow](/v1/docs/data-workflow-component) component. This component counts your submissions using a Size operator. The result of your calculation displays in your KPI dashboard widget.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below the `hiddenKpi` **Hidden** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `dwfKpi`.
3. Set the **Trigger Type** as **Watch**.

#### Configure the Input Operator

1. Drag and drop an **Input** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | submissions |
| Required | Yes |
| Source | Default |

#### Configure the Size Operator

The Size operator counts the structure where it’s attached. In this example, it'll count the number of arrays (values) in the Input submissions.

1. Drag and drop a **Size** operator onto your Data Workflow canvas. You don't need any configuration for this operator.
2. Connect the output port (right) of the **Input** operator to the input port (left) of the **Size** operator.

#### Configure the Output Operator

1. Drag and drop an **Output** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Output |
| Component | hiddenKpi |
| Action | value |
3. Connect the output port (right) of the **Size** operator to the input port (left) of the **Output** operator.

![Data workflow canvas with Input, Size, and Output operators.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddChartToDashboard_dwfKpi.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
4. Click **Save Component**.

### Configure the KPI Component

Next, you’ll add a [KPI](/v1/docs/kpi-component) component to display the number of accounts on your dashboard.

1. Drag and drop a **KPI** component onto your canvas, placing it above the `panelDashboard` **Panel** component.
2. In the **Property ID** and **Label Text** fields, enter `kpiAccounts`.
3. In the **KPI Title** field, enter `Number of Accounts`. This title displays above the KPI value on the dashboard.
4. In the **Inputs** table, enter `hiddenKpi`.

![KPI component settings with configured settings highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image-1767975931834.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
5. Click **Save Component**.

## Configuration

### Configure the Hidden Component

This [Hidden](/v1/docs/hidden-component) component stores the pie chart data that your `dwfCreatePieChart` **Data Workflow** outputs. You'll use this data in your [Chart](/v1/docs/chart-component) component.

1. Drag and drop a **Hidden** component onto your canvas, placing it below the `dwfKPI` **Data Workflow** component.
2. In the **Property ID** and **Label Text** fields, enter `pieChartData`.
3. Set **Store Data in Database** to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(771).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D) **(ON)**.
4. Click **Save Component**.

### Configure the Data Workflow Component

This [Data Workflow](/v1/docs/data-workflow-component) component will clean, filter, and combine your `transferringBank` data, then output it to `pieChartData` **Hidden** component.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below your `pieChartData` **Hidden** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `dwfCreatePieChart`.

#### Configure the Input Operator

1. Drag and drop an **Input** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | submissions |
| Required | Yes |
| Source | Default |

#### Configure the Clean Keys Operator

The [Clean Keys](/v1/docs/clean-keys-operator) operator lets you fill in data that's missing, empty, or both. The values from the `transferringBank` data are what you'll display in your [Chart](/v1/docs/chart-component) component. So, you’ll use a Clean Keys operator to ensure any missing or empty values do not affect the data visualization. Here, you're filling in missing or empty values with `'__NULL__'`.

1. Drag and drop a **Clean Keys** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Clean Keys |
| Label |  |
| Fill If | Missing or Empty |
| Keys | transferringBank |
| Fill With | '__NULL__' |
3. Connect the output port (right) of the **Input** operator to the input port (left) of the **Clean Keys** operator.

#### Configure the Filter Operator

1. Drag and drop a **Filter** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Filter |
| Label |  |
| Do Not Sanitize Formula | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box(7).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D) (checked) |
| Expression | transferringBank='__NULL__' |

> [!NOTE]
> Here, you're filtering out any `'__NULL__'` values that the Clean Keys operator assigned. That way, no missing or empty `transferringBank` values display in your Chart component.
3. Connect the output port (right) of the **Clean Keys** operator to the input port (left) of the **Filter** operator.

#### Configure the Aggregate Operator

The [Aggregate](/v1/docs/aggregate-operator) operator summarizes all the `transferringBank` values after the [Filter](/v1/docs/filter-operator) operator clears the `'__NULL__'` values.

1. Drag and drop an **Aggregate** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Aggregate By |
| Label |  |
| Aggregation Type | Count By |
| Join Group Keys? | No |
| Group Key | transferringBank |
| Value Key | count |

> [!NOTE]
> Here, you're using the **Count By** Aggregation Type and `transferringBank` Group Key. These settings tell the operator to look at your `transferringBank` values and count unique values. In this example, how many `Bank X` and `Bank Y` values.
3. Connect the lower output port (right) of the **Filter** operator to the input port (left) of the **Aggregate** operator.

#### Configure the Output Operator

1. Drag and drop an **Output** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Output |
| Component | pieChartData |
| Action | value |
3. Connect the output port (right) of the **Aggregate** operator to the input port (left) of the **Output** operator.

![Data Workflow canvas with Input, Clean Keys, Filter, Aggregate, and Output operators.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddChartToDashboard_dwfCreatePieChart(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
4. Click **Save Component**.

### Update the Data Workflow Component

Next, update your `dwfProcessSubmissions` **Data Workflow** component, so it can trigger your `dwfCreatePieChart` **Data Workflow** component.

1. Open the `dwfProcessSubmissions` **Data Workflow** component settings drawer.

#### Configure the Create Value Operator

1. Drag and drop a **Create Value** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Selection |
| --- | --- |
| Category | Create Value |
| Label |  |
| Expression/Value | 'GO' |
3. Connect the output port (right) of the **Input** operator to the argument port (top) of the **Create Value** operator.

#### Configure the Output Operator

1. Drag and drop an **Output** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Selection |
| --- | --- |
| Category | Output |
| Component | dwfCreatePieChart |
| Action | trigger |
3. Connect the output port (right) of the **Create Value** operator to the input port (left) of the **Output** operator.

![Data Workflow canvas with added Create Value and Output operators.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddChartToDashboard_dwfProcessSubmissions2.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
4. Click **Save Component**.

### Configure the Chart Component

Lastly, you'll add a [Chart](/v1/docs/chart-component) component to display the `pieChartData` **Hidden** component’s data as a pie chart on your dashboard.

1. Drag and drop a **Chart** component onto your canvas, placing it above `panelDashboard` **Panel** component.
2. In the **Property ID** and **Label Text** fields, enter `chartBank`.
3. In the **Inputs** table, enter the following:

| ID | Label | Chart Type | Categories | Values | Colors | Size | Inner Size |
| --- | --- | --- | --- | --- | --- | --- | --- |
| pieChartData | Amounts | pie | transferringBank | count |  | 100% |  |

> [!NOTE]
> You can also create donut charts using the **pie** chart type. Use the Inner Size column to adjust the size of the donut cutout, for example, 50%.

![Chart component settings with inputs table highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddChartToDashboard_chartBank.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
4. Navigate to the component’s **Advanced** settings.
5. Set **Show Legend** to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(771).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D) **(ON)**. Doing so adds a legend to your Chart.
6. Click **Save Component**.
7. **Save** your module.

Here's how your completed dashboard looks in the Module Builder:

![Completed Module Builder.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddChartToDashboard_ModuleBuilder.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)

Here's how your completed dashboard with a functioning KPI and pie chart looks in Express View:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Sol_Dashboards_Charts_Expressminusdelete.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)

## Preconfiguration

### Configure the Panel Component

This [Panel](/v1/docs/panel-component) component acts as a container for the components that follow.

1. In the Module Builder, drag and drop a **Panel** component onto your canvas.
2. In the **Property ID** field, enter `panelDashboard`.
3. Click **Save**.

### Configure the Initializer Component

This [Initializer](/v1/docs/initializer-component) component triggers the [Plug-In](/v1/docs/plug-in-component) components that you'll set up later.

1. Drag and drop an **Initializer** component inside the Panel component.
2. In the **Property ID** and **Label Text** fields, enter `initStart`.
3. From the **Trigger Type** drop-down, select **New Submission**.
4. In the **Outputs** table, enter the following:

| # | Property ID | Type | Value |
| --- | --- | --- | --- |
| 1 | pluginGetSubmissions | trigger | GO |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/sol_simpledashboard_04-2_init(2).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
5. Click **Save & Close**.

### Configure the Hidden Component

This is the first of four [Hidden](/v1/docs/hidden-component) components in this configuration. It stores the module ID of your source module. You can retrieve the module ID from the source module’s hyperlink as follows: https://training.unqork.io/#/form/**5eb482f3c8368d0210c74cbf**/edit.

1. Drag and drop a **Hidden** component onto your canvas, placing it below the Initializer component.
2. In the **Property ID** and **Label Text** fields, enter `moduleId`.
3. In the **Default Value** field, enter `5eb482f3c8368d0210c74cbf`. This is the source module's module ID.
4. Click **Save**.

### Configure the Plug-In Component

This [Plug-In](/v1/docs/plug-in-component) component uses an API to retrieve submissions and display them in your dashboard.

1. Drag and drop a **Plug-In** component onto your canvas, placing it below the `moduleId` **Hidden** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `pluginGetSubmissions`.
3. Set the **Trigger Type** as **Manual**.
4. In the **Post Trigger** field, enter `dwfProcessSubmissions`. Doing so tells the `dwfProcessSubmissions` **Data Workflow** component you’ll add later to fire as soon as the Plug-In component retrieves submissions.
5. In the **Inputs** table, enter the following:

| Property ID | Mapping |
| --- | --- |
| moduleId | moduleId |
| 'firstName,middleName,lastName,email,dateOfBirth' | fields |
| 'investmentAmount,transferringBank' | fields |

> [!NOTE]
> The first row references the module ID stored in the `moduleId` **Hidden** component. The second and third rows determine which fields you're displaying in the dashboard. Here, you’ll retrieve the `firstName`, `middleName`, `lastName`, `email`, `dateOfBirth`, `investmentAmount`, and `transferringBank` fields. The values entered in the Mapping column (`moduleId` and `fields`) are native values to Unqork.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/sol_dashboardChart_04_pluginGetActions.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
6. From the **Internal Services** drop-down, select **List Submissions for Dashboard**.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/sol_dashboarddelete_03_plugindatapanel(3).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
7. Click **Save**.

### Configure the Hidden Component

The second [Hidden](/v1/docs/hidden-component) component stores the submission ID.

1. Drag and drop a **Hidden** component onto your canvas, placing it below your Plug-In component.
2. In the **Property ID** and **Label Text** fields, enter `submissionId`.
3. Click **Save**.

### Configure the ViewGrid Component

Next, let's add a [ViewGrid](/v1/docs/viewgrid-component) component to display your dashboard.

1. Drag and drop a **ViewGrid** component onto the canvas, placing it below the `submissionId` **Hidden** component.
2. In the **Label** field, enter `View Grid`.
3. In the **Property Name** field, enter `gridView.`
4. In the **Action** field, enter `View`.
5. In the **Event** field, enter `View`.
6. In the **Inputs** table, enter the following:

| ID | Required |
| --- | --- |
| pluginGetSubmissions | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box(7).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D) (checked) |
7. In the **Outputs** table, enter the following:

| ID | Mapping |
| --- | --- |
| submissionId | id |
8. In the **Display** table, enter the following:

| ID | Formula | Heading |
| --- | --- | --- |
| firstName |  | First Name |
| lastName |  | Last Name |
| email |  | Email |
| investmentAmount |  | Investment Amount |
| transferringBank |  | Transferring Bank |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Sol_Dashboards_KPI_VGFix.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
9. Click **Save**.

### Configure the Decisions Component

This [Decisions](/v1/docs/how-to-guide-decisions-component) component provides the trigger for your dashboard's **View** button.

1. Drag and drop a **Decisions** component onto the canvas, placing it below your ViewGrid component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `ruleButtons`.
3. In the **Inputs** table, enter the following:

| Property ID | Type | Required | Silent |
| --- | --- | --- | --- |
| buttonClick | exact | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D) (unchecked) | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D) (unchecked) |
| moduleId | exact | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D) (unchecked) | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box(7).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D) (checked) |
| submissionId | exact | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D) (unchecked) | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box(7).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D) (checked) |

> [!NOTE]
> Every row in the Inputs table gets an associated column in the Conditionals table. If an input does not have a value in its Conditionals column, Unqork sets it to silent. In the next steps, you won't add values to the **moduleId** and **submissionId** columns. You'll only be using these inputs in the **panelDashboard_pageOpen** conditional. So, you can mark these values as silent, or let Unqork do it for you.
4. In the **Outputs** table, enter the following:

| Property ID | Type |
| --- | --- |
| panelDashboard | pageOpen |
5. In the **Micro Decisions** table, enter the following:

| buttonClick | moduleId | submissionId | panelDashboard_pageOpen |
| --- | --- | --- | --- |
| View |  |  | =concatenate('/#/display/',moduleId,'/', submissionId , '/',moduleId) |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/sol_simpledashboard_07_decisions(1).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
6. Click **Save**.

### Configure the Hidden Component

This [Hidden](/v1/docs/hidden-component) component stores the value submissions, acting as a replica of the `pluginGetSubmissions` **Plug-In** component. You'll reference the `submissions` **Hidden** component in the [Data Workflow](/v1/docs/data-workflow-component) components that you'll create next.

1. Drag and drop a **Hidden** component onto your canvas, placing it below the `panelDashboard` **Panel** component.
2. In the **Property ID** and **Label Text** fields, enter `submissions`.
3. Click **Save**.

### Configure the Data Workflow Component

This [Data Workflow](/v1/docs/data-workflow-component) creates a replica of the `pluginGetSubmissions` **Plug-In** component, stored in the `submissions` **Hidden** component.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below your `submissions` **Hidden** component.
2. In the **Canvas Label Text** and **Property Name** fields, enter `dwfProcessSubmissions`.
3. From the **Trigger Type** drop-down, select **Manual**.

#### Configure the Input Operator

1. Drag and drop an **Input** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Selection |
| --- | --- |
| Category | Input |
| Component | pluginGetSubmissions |
| Required | Yes |
| Source | Default |

#### Configure the Output Operator

1. Drag and drop an **Output** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Selection |
| --- | --- |
| Category | Output |
| Component | submissions |
| Action | value |
3. Connect the output port (right) of the **Input** operator to the input port (left) of the **Output** operator.

![Data workflow component settings with Canvas Label Text and Property Name highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddChartToDashboard_dwfProcessSubmissionsClassic(2).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
4. Click **Save**.

### Configure the Hidden Component

This [Hidden](/v1/docs/hidden-component) component stores the KPI count that you'll create in your `dwfKPI` **Data Workflow**. You'll use this value in your KPI widget.

1. Drag and drop a **Hidden** component onto your canvas, placing it below the `dwfProcessSubmissions` **Data Workflow** component.
2. In the **Property ID** and **Label Text** fields, enter `hiddenKpi`.
3. Click **Save**.

### Configure the Data Workflow Component

Next, you’ll add your second [Data Workflow](/v1/docs/data-workflow-component) component. This component counts your submissions using a Size operator. The result of your calculation displays in your KPI dashboard widget.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below the `hiddenKpi` **Hidden** component.
2. In the **Canvas Label Text** and **Property Name** fields, enter `dwfKpi`.
3. From the **Trigger Type** drop-down, select **Watch**.

#### Configure the Input Operator

1. Drag and drop an **Input** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | submissions |
| Required | Yes |
| Source | Default |

#### Configure the Size Operator

The Size operator counts the structure where it’s attached. In this example, it'll count the number of arrays (values) in the Input submissions.

1. Drag and drop a **Size** operator onto your Data Workflow canvas. You don't need any configuration for this operator.
2. Connect the output port (right) of the **Input** operator to the input port (left) of the **Size** operator.

#### Configure the Output Operator

1. Drag and drop an **Output** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Output |
| Component | hiddenKpi |
| Action | value |
3. Connect the output port (right) of the **Size** operator to the input port (left) of the **Output** operator.

![Data workflow canvas with Input, Size and Output operators.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddChartToDashboard_dwfKpiClassic.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
4. Click **Save**.

### Configure the KPI Component

Next, you’ll add a [KPI](/v1/docs/kpi-component) component to display the number of accounts on your dashboard.

1. Drag and drop a **KPI** component onto your canvas, placing it above the `panelDashboard` **Panel** component.
2. In the **Property ID** and **Label** fields, enter `kpiAccounts`.
3. In the **KPI Title** field, enter `Number of Accounts`. This title displays above the KPI value on the dashboard.
4. In the **Inputs** table, enter `hiddenKpi`.

![KPI component settings with Property ID, Label, KPI Title, and the Inputs table highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddChartToDashboard_kpiAccountsClassic.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
5. Click **Save & Close**.

## Configuration

### Configure the Hidden Component

This [Hidden](/v1/docs/hidden-component) component stores the pie chart data that your `dwfCreatePieChart` **Data Workflow** outputs. You'll use this data in your [Chart](/v1/docs/chart-component) component.

1. Drag and drop a **Hidden** component onto your canvas, placing it below the `dwfKPI` **Data Workflow** component.
2. In the **Property ID** and **Label Text** fields, enter `pieChartData`.
3. Click **Save**.

### Configure the Data Workflow Component

This [Data Workflow](/v1/docs/data-workflow-component) component will clean, filter, and combine your `transferringBank` data, then output it to `pieChartData` **Hidden** component.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below your `pieChartData` **Hidden** component.
2. In the **Canvas Label Text** and **Property Name** fields, enter `dwfCreatePieChart`.
3. From the **Trigger Type** drop-down, select **Manual**.

#### Configure the Input Operator

1. Drag and drop an **Input** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | submissions |
| Required | Yes |
| Source | Default |

#### Configure the Clean Keys Operator

The [Clean Keys](/v1/docs/clean-keys-operator) operator lets you fill in data that's missing, empty, or both. The values from the `transferringBank` data are what you'll display in your [Chart](/v1/docs/chart-component) component. So, you’ll use a Clean Keys operator to ensure any missing or empty values do not affect the data visualization. Here, you're filling in missing or empty values with `'__NULL__'`.

1. Drag and drop a **Clean Keys** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Clean Keys |
| Label |  |
| Fill If | Missing or Empty |
| Keys | transferringBank |
| Fill With | '__NULL__' |
3. Connect the output port (right) of the **Input** operator to the input port (left) of the **Clean Keys** operator.

#### Configure the Filter Operator

1. Drag and drop a **Filter** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Filter |
| Label |  |
| Do Not Sanitize Formula | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box(7).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D) (checked) |
| Expression | transferringBank='__NULL__' |

> [!NOTE]
> Here, you're filtering out any `'__NULL__'` values that the Clean Keys operator assigned. That way, no missing or empty `transferringBank` values display in your Chart component.
3. Connect the output port (right) of the **Clean Keys** operator to the input port (left) of the **Filter** operator.

#### Configure the Aggregate Operator

The [Aggregate](/v1/docs/aggregate-operator) operator summarizes all the `transferringBank` values after the [Filter](/v1/docs/filter-operator) operator clears the `'__NULL__'` values.

1. Drag and drop an **Aggregate** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Aggregate By |
| Label |  |
| Aggregation Type | Count By |
| Join Group Keys? | No |
| Group Key | transferringBank |
| Value Key | count |

> [!NOTE]
> Here, you're using the **Count By** Aggregation Type and `transferringBank` Group Key. These settings tell the operator to look at your `transferringBank` values and count unique values. In this example, how many `Bank X` and `Bank Y` values.
3. Connect the output (bottom right-hand side) port of the **Filter** operator, to the input (left-hand side) port of the **Aggregate** operator.

#### Configure the Output Operator

1. Drag and drop an **Output** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Output |
| Component | pieChartData |
| Action | value |
3. Connect the lower output port (right) of the **Aggregate** operator to the input port (left) of the **Output** operator.

![Data workflow canvas with Input, Clean Keys, Filter, Aggregate, Console, and Output operators.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddChartToDashboard_dwfCreatePieChartClassic.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
4. Click **Save**.

### Update the Data Workflow Component

Next, update your `dwfProcessSubmissions` **Data Workflow** component, so it can trigger your `dwfCreatePieChart` **Data Workflow** component.

1. Open the `dwfProcessSubmissions` **Data Workflow** component settings.

#### Configure the Create Value Operator

1. Drag and drop a **Create Value** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Selection |
| --- | --- |
| Category | Create Value |
| Label |  |
| Expression/Value | 'GO' |
3. Connect the output port (right) of the **Input** operator to the argument port (top) of the **Create Value** operator.

#### Configure the Output Operator

1. Drag and drop an **Output** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Selection |
| --- | --- |
| Category | Output |
| Component | dwfCreatePieChart |
| Action | trigger |
3. Connect the output port (right) of the **Create Value** operator to the input port (left) of the **Output** operator.

![Data workflow canvas with Input, Create Value, and two Output operators.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddChartToDashboard_dwfProcessSubmissions2Classic.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
4. Click **Save**.

### Configure the Chart Component

Lastly, you'll add a [Chart](/v1/docs/chart-component) component to display the `pieChartData` **Hidden** component’s data as a pie chart on your dashboard.

1. Drag and drop a **Chart** component onto your canvas, placing it above the `panelDashboard` **Panel** component.
2. In the **Label** and **Property Name** fields, enter `chartBank`.
3. In the **Inputs** table, enter the following:

| ID | Label | Chart Type | Categories | Values | Colors | Size | Inner Size |
| --- | --- | --- | --- | --- | --- | --- | --- |
| pieChartData | Amounts | pie | transferringBank | count |  | 100% |  |

> [!NOTE]
> You can also create donut charts using the **pie** chart type. Use the Inner Size column to adjust the size of the donut cutout, for example, 50%.

![Chart component settings with Label, Property Name, and the Inputs table highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image-1768401691982.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
4. Click the **Formatting** tab of the configuration window.
5. Select **Show Legend**. Doing so adds a legend to your Chart component.

![Chart component settings with Show Legend highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddChartToDashbaord_ChartFormattingClassic.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
6. Click **Save**.
7. **Save** your module.

Here's how your completed dashboard looks in the Module Builder:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Sol_Dashboards_Charts_Editorminusdelete.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)

Here's how your completed dashboard with a functioning KPI and pie chart looks in Express View:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Sol_Dashboards_Charts_Expressminusdelete.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)

Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the .

Enter outputs components and actions you want the component to perform.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services.

Enter inputs components and actions you want the component to perform..

Enter inputs components and actions you want the component to perform.

A quanitifiable measure of performance of a specific objective for a specified time.

An array is a type of object that stores one or more data types. Data types supported in arrays include numbers, strings, and objects.

A UI (User Interface) Drawer is a layout panel that slides out from the side of the screen to display content. In UDesigner, components display their configuration panels in a drawer.

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

A Property ID is the unique field ID used by Unqork to track and link components in your module.