Use Case: Adding a Chart to a Dashboard

Overview

Data visualization tools like charts are a great way to gather insights from a set of data. 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 chart to your dashboard. Specifically, a pie chart. The pie chart will show how many accounts are transferring funds from a given bank.

This use case also includes steps for building a dashboard with an action button and a KPI widget. The dashboard pulls submissions from the following source module: https://training.unqork.io/#/form/5eb482f3c8368d0210c74cbf/edit. If you're following along from the Adding a Key Performance Indicator (KPI) Widget to a Dashboard article, you can skip the pre-configuration.

Here's how your completed dashboard will look in Express View:

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

What You'll Learn

In this article, you’ll learn how to create a dashboard that uses a pie chart to visualize data.

What You'll Need

To pre-configure your dashboard you'll need:

• 1 Panel component

• 1 Initializer component

• 4 Hidden components

• 1 Plug-In component

• 1 Decisions component

• 1 ViewGrid component

• 2 Data Workflow components

• 1 KPI component

To add the chart to your dashboard, you'll need:

• 1 Hidden component

• 1 Data Workflow component

• 1 Chart component

Pre-configuration

Configure the Hidden Component

This Hidden component houses the pie chart data your dwfCreatePieChart Data Workflow will output. You'll use this data in your Chart component.

1.

Drag and drop a Hidden component onto your canvas. Place this Hidden component below the dwfKPI Data Workflow.

2.

Enter pieChartData in the Property ID and Label Text.

3.

Click Save.

Configure the Data Workflow Component

Here, you'll set up your Data Workflow component dwfCreatePieChart. It'll clean, filter, and combine your transferringBank data, then output it to pieChartData.

1.

Drag and drop a Data Workflow component onto your canvas. Place the Data Workflow below your pieChartData Hidden component.

2.

Enter dwfCreatePieChart in the Label and Property Name.

3.

Scroll down and select Manual from the Trigger Type drop-down.

Configure the Input Operator

1.

Drag and drop an Input operator onto your Data Workflow canvas.

2.

Configure the Input operator's Info window as follows:

Configure the Clean Keys Operator

1.

Drag and drop a Clean Keys operator onto your Data Workflow canvas. This operator lets you fill in data that's missing, empty, or both.

2.

Configure the Clean Keys operator's Info window as follows:

3.

Drag a connector from the output (right-hand side) port of the Input operator, to the input (left-hand side) port of the Clean Keys operator.

Configure the Filter Operator

1.

Drag and drop a Filter operator onto your Data Workflow canvas.

2.

Configure the Filter operator's Info window as follows:

3.

Drag a connector from the output (right-hand side) port of the Clean Keys operator, to the input (left-hand side) port of the Filter operator.

Configure the Aggregate Operator

1.

Drag and drop an Aggregate operator onto your Data Workflow canvas. This operator summarizes all the transferringBank values after the Filter clears the '__NULL__' values.

2.

Configure the Aggregate operator's Info window as follows:

3.

Drag a connector from 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 Output operator's Info window as follows:

3.

Drag a connector from the output (right-hand side) port of the Aggregate operator, to the input (left-hand side) port of the Output operator.

4.

Click Save.

Update the Data Workflow Component

Next, you'll update your dwfProcessSubmissions Data Workflow component. These changes will allow it to fire off your dwfCreatePieChart Data Workflow.

1.

Hover over the dwfProcessSubmissions Data Workflow component.

A 5-button toolbar appears above the component on hover-over.

2.

Using the toolbar, click the (Settings) button.

Configure the Create Value Operator

1.

Drag and drop a Create Value operator onto your Data Workflow canvas.

2.

Configure the Create Value operator's Info window as follows:

3.

Drag a connector from the output (right-hand side) port of the Input operator, to the input (top) port of the Create Value operator.

Configure the Output Operator

1.

Drag and drop an Output operator onto your Data Workflow canvas.

2.

Configure the Output operator's Info window as follows:

3.

Drag a connector from the output (right-hand side) port of the Create Value operator, to the input (left-hand side) port of the Output operator.

4.

Click Save.

Configure the Chart Component

Finally, you'll add a Chart component to display pieChartData as a pie chart on your dashboard.

1.

Drag and drop a Chart component onto your canvas. Place it at the top of your canvas, above panelDashboard.

2.

Enter chartBank in the Label and Property Name.

3.

In the Inputs table, enter the following:

4.

Click the Formatting tab of the configuration window.

5.

Select the checkbox Show Legend. This adds a legend to your Chart.

6.

Click Save.

7.

Save your module.