Vega Chart Component

Overview

The Vega Chart (Vega 2.0) The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience. component creates a graphical display of data sets in an application. In the Module Builder, Creators Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. configure the Vega Chart component using one or more chart types and data sets. In Express View, the Vega Chart lets end-users End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. visualize the data sets in a meaningful and intuitive way.

The Vega Chart component is a Vega (2.0) The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience. runtime component and is not supported in the Centauri (1.0) The Centauri (v 1.0.0) runtime is the first-generation foundation of the Unqork Designer Platform. Centauri provides Creators a codeless experience for developing applications. runtime.

Below are some common examples of when to use the Vega Chart component:

To display a scatter plot to track the number of sales for each agent in your department.
To display a pie chart to show the percentages of end-user submissions 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..
To display a bar graph that shows product consumption by demographic.

About the Configuration Window

To learn more about general component settings, view our General Component Settings article.

Display

Setting	Description
Input Behavior	Controls how end-users End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. interact with the component. Choose from the following options:Enable User Input: Allow end-users to view and enter data in this field.Disable User Input: Prevents end-users from entering data in the field, but lets them view it. In the Module Builder, the field’s background displays as gray. In Express View, when end-users hover over the field, their cursor displays with a prohibited symbol.Read Only - Legacy: Prevents end-users from entering data and replaces the field with the component’s data value. If no value is provided, the component displays None.
Title	Displays as a header above the chart in Express View.
Subtitle	Enter a value to display as a sub-header below the Title value in Express View.
Accessible Label	Screen readers Screen Readers are a browser accessbility tool used to produce an audio description of a webpage. Screen readers speak the text and alternate text of a webpage. read this value to end-users in Express View. This value corresponds to the aria-label in the DOM The Document Object Model (DOM) is the data representation of objects that form the structure and content of a document on the web. The DOM represents the page..
X Axis Title	Displays next to the chart's horizontal axis. In Express View, this value displays below the chart's graphics.
Y Axis Title	Displays next to the chart's vertical axis. In Express View, this value displays to the left the chart's graphics.
Hidden	Set to (ON) to hide the chart in Express View. By default, this setting is (OFF).
Hide Legend	Set to (ON) to hide the chart's key values in Express View.
Vertical Alignment	Select the vertical alignment location for the legend element. Values include: Top: Displays the key values above the chart graphics. Middle: Displays keys values in the vertical-middle of the chart graphics. Bottom: Displays the key values below the chart graphics.
Alignment	Select the horizontal alignment for the legend element. Values include: Left: Displays the key values to the left of the chart graphics. Middle: Displays keys values in the horizontal-middle of the chart graphics. Right: Displays the key values to the right of the chart graphics.

Series

The Series table lets you overlay multiple data sets onto a single graph. Each row in the table represents a single data set.

Setting	Description
ID	Enter a reference ID to target the row's chart data.
Type	This field lets you set the chart type to display your data. Below are the available chart types: Area: Best used to visualize trends over time, specifically to highlight the magnitude of change and compare multiple data series. Bar: Effective for comparison of at least one data point. Bar charts show data as a bar with the height of the bar proportional to the values being plotted. Typically, a bar chart plots the variable value horizontally, and the fixed dimension vertically. Column: Effective for comparison of at least one data point. Column charts show data as a rectangle with the height of the rectangle proportional to the values being plotted. Typically, a column chart plots the variable value vertically, and the fixed dimension horizontally. Line: A line chart displays information as a series of data points connected by straight line segments. These charts are typically used to show information that changes over time. Pie: A pie chart is a circular-type chart, divided into slices to show numeric proportion. In a pie chart, the arc length of each slice relates to the quantity the slice represents. When used in conjunction with the Inner Size setting, you can make your pie chart into a doughnut chart. Scatter: A scatter chart uses dots to represent values for two different variables. The position of each dot in the horizontal and vertical axis shows values for the data point. You'll typically use these charts to show relationships between variables.
Label	This value represents the data set's title in the legend. For example, if your graph displays a count of numbers, enter Number. If you're displaying a percentage of businesses involved in an industry, enter Businesses.
Reference Key	Enter the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. of the data source. An example data source could be a Data Table component containing the x and y values.
Reference Property	Enter the component state property value to reference.
X Property	Enter the x-property column value contained in the Reference Key. For example, if your Data Table component has a column labeled x that represents x-axis data, then enter x.
Y Property	Enter the y-property column value contained in the Reference Key. For example, if your Data Table component has a column labeled y that represents y-axis data, then enter y.
Color	Manipulates the color of an input category if the input data array contains colors. Your color data can be in word or HEX form. For example, this text is colored using the following hex: #fb7e14.
Stack Group	Stack or separate data sets based on chart type. For example, if two data sets use the Bar chart type, labeling data set one as A and data set two as B displays each data set as a bar in the graph. Labeling data set one and two as A stacks the bars in the graph.

Adding a Vega Chart Component

While the Vega Chart component provides thousands of possible data set combinations and displays, the example below details a pet availability chart for a pet store. You'll create two data tables, one for available pets, and the other for pets that have been reserved. Then, you'll use a Vega Chart component to visualize the data.

Configure the dtAvailablePets Data Table Component

The first Data Table component contains a list of pet types and the total available pets for each type.

In the Module Builder, drag and drop a Dropdown Component Icon Data Table component onto your canvas.

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

In the Data Table, enter the following:

	A	B
1	type	total
2	Cat	5
3	Dog	8
4	Bird	2
5	Fish	20

In a Data Table component, the first row acts as headers for the data set.

Click Save Component.

Configure the dtReservedPets Data Table Component

The second Data Table component contains the total reserved pets for each pet type.

Drag and drop a Dropdown Component Icon Data Table component onto your canvas, placing it below the dtAvailablePets Data Table component.

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

In the Data Table, enter the following:

	A	B
1	type	total
2	Cat	3
3	Dog	4
4	Bird	0
5	Fish	5

Click Save Component.

Configure the Vega Chart Component

Configure a Vega Chart to display the dtAvailablePets and dtReservedPets data. Add labels to describe each axis, and stack the data sets on top of each other using the Stack Group column.

Drag and drop a Vega Chart component onto the canvas, placing it above the dtAvailablePets Dropdown Component Icon Data Table component.

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

In the Title field, enter Pet Store - Pet Availability.

In the Subtitle field, enter Total, Available, and Reserved.

In the X Axis Title field, enter Pet Type.

In the Y Axis Title field, enter Total Pet Stock.

In the Series table, enter the following:

	ID	Type	Label	Reference Key	Reference Property	X Property	Y Property	Color	Stack Group
1	series1	Bar	Available Pets	dtAvailablePets	value	type	total		A
2	series2	Bar	Reserved Pets	dtReservedPets	value	type	total		A

The Stack Group column places data sets on top of each other if they are the same type. In this example, the dtAvailabePets and dtReservedPets data is stacked on top of each other.

Click Save Component.

Save your module.

Preview your module in Express View 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.. The Vega Chart displays the two data sets as a bar graph. Each bar is split into two colors, representing the dtAvailabePets and dtReservedPets values.

Overview

Below are some common examples of when to use the Vega Chart component:

To display a scatter plot to track the number of sales for each sales agent in your department.
To display a pie chart to show the percentages of end-user submissions 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..
To display a bar graph that shows product consumption by demographic.

About the Configuration Window

To learn more about general component settings, view our General Component Settings article.

Display

General

General settings control titles, labels, and the visibility of the Vega Chart component.

Setting	Description
Title	Displays as a header above the chart in Express View.
Subtitle	Enter a value to display as a sub-header below the Title value in Express View.
Accessible Label	Screen readers read this value to end-users in Express View. This value corresponds to the aria-label in the DOM The Document Object Model (DOM) is the data representation of objects that form the structure and content of a document on the web. The DOM represents the page..
X Axis Title	Displays next to the chart's horizontal axis. In Express View, this value displays below the chart's graphics.
Y Axis Title	Displays next to the chart's vertical axis. In Express View, this value displays to the left the chart's graphics.
Hidden	Set to (ON) to hide the chart in Express View. By default, this setting is (OFF).

Legend

Legend settings control the display and location of the key values.

Setting	Description
Hide Legend	Set to (ON) to hide the chart's key values in Express View.
Vertical Alignment	Select the vertical alignment location for the legend element. Values include: Top: Displays the key values above the chart graphics. Middle: Displays keys values in the vertical-middle of the chart graphics. Bottom: Displays the key values below the chart graphics.
Alignment	Select the horizontal alignment for the legend element. Values include: Left: Displays the key values to the left of the chart graphics. Middle: Displays keys values in the horizontal-middle of the chart graphics. Right: Displays the key values to the right of the chart graphics.

Setting

Description

Hide Legend

Set to (ON) to hide the chart's key values in Express View.

Vertical Alignment

Select the vertical alignment location for the legend element. Values include:

Top: Displays the key values above the chart graphics.
Middle: Displays keys values in the vertical-middle of the chart graphics.
Bottom: Displays the key values below the chart graphics.

Alignment

Select the horizontal alignment for the legend element. Values include:

Left: Displays the key values to the left of the chart graphics.
Middle: Displays keys values in the horizontal-middle of the chart graphics.
Right: Displays the key values to the right of the chart graphics.

Series

The Series table lets you overlay multiple data sets onto a single graph. Each row in the table represents a single data set.

Setting	Description
ID	Enter a reference ID to target the row's chart data.
Type	This field lets you set the chart type to display your data. Below are the available chart types: Area: Best used to visualize trends over time, specifically to highlight the magnitude of change and compare multiple data series. Bar: Effective for comparison of at least one data point. Bar charts show data as a bar with the height of the bar proportional to the values being plotted. Typically, a bar chart plots the variable value horizontally, and the fixed dimension vertically. Column: Effective for comparison of at least one data point. Column charts show data as a rectangle with the height of the rectangle proportional to the values being plotted. Typically, a column chart plots the variable value vertically, and the fixed dimension horizontally. Line: A line chart displays information as a series of data points connected by straight line segments. These charts are typically used to show information that changes over time. Pie: A pie chart is a circular-type chart, divided into slices to show numeric proportion. In a pie chart, the arc length of each slice relates to the quantity the slice represents. When used in conjunction with the Inner Size setting, you can make your pie chart into a doughnut chart. Scatter: A scatter chart uses dots to represent values for two different variables. The position of each dot in the horizontal and vertical axis shows values for the data point. You'll typically use these charts to show relationships between variables.
Label	This value represents the data set's title in the legend. For example, if your graph displays a count of numbers, enter Number. If you're displaying a percentage of businesses involved in an industry, enter Businesses.
Reference Key	Enter the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. of the data source. An example data source could be a Data Table component containing the x and y values.
Reference Properties	Enter the component state property value to reference.
X Property	Enter the x-property column value contained in the Reference Key. For example, if your Data Table component has a column labeled x that represents x-axis data, then enter x.
Y Property	Enter the y-property column value contained in the Reference Key. For example, if your Data Table component has a column labeled y that represents y-axis data, then enter y.
Color	Manipulates the color of an input category if the input data array contains colors. Your color data can be in word or HEX form. For example, this text is colored using the following hex: #fb7e14.
Stack Group	Stack or separate data sets based on chart type. For example, if two data sets use the Bar chart type, labeling data set one as A and data set two as B displays each data set as a bar in the graph. Labeling data set one and two as A stacks the bars in the graph.

Adding a Vega Chart Component

Configure the dtAvailablePets Data Table Component

The first Data Table component contains a list of pet types and the total available pets for each type.

In the Module Builder, drag and drop a Dropdown Component Icon Data Table component onto your canvas.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. fields, enter dtAvailablePets.

In the component's configuration menu, click Data.

In the Data Table, enter the following:

	A	B
1	type	total
2	Cat	5
3	Dog	8
4	Bird	2
5	Fish	20

In a Data Table component, the first row acts as headers for the data set.

Click Save & Close.

Configure the dtReservedPets Data Table Component

The second Data Table component contains the total reserved pets for each pet type.

Drag and drop a Dropdown Component Icon Data Table component onto your canvas, placing it below the dtAvailablePets Data Table component.

In the component's configuration menu, click Data.

In the Data Table, enter the following:

	A	B
1	type	total
2	Cat	3
3	Dog	4
4	Bird	0
5	Fish	5

In a Data Table component, the first row acts as headers for the data set.

Click Save & Close.

Configure the Vega Chart Component

Configure a Vega Chart to display the dtAvailablePets and dtReservedPets data. Add labels to describe each axis, and stack the data sets on top of each other using the Stack Group column.

Drag and drop a Vega Chart component onto the canvas, placing it above the dtAvailablePets Dropdown Component Icon Data Table component.

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

In the Title field, enter Pet Store - Pet Availability.

In the Subtitle field, enter Total, Available, and Reserved.

In the X Axis Title field, enter Pet Type.

In the Y Axis Title field, enter Total Pet Stock.

In the component's configuration menu, click Browser Storage Icon

Series.

In the Series table, enter the following:

	ID	Type	Label	Reference Key	Reference Property	X Property	Y Property	Color	Stack Group
1	series1	Bar	Available Pets	dtAvailablePets	value	type	total		A
2	series2	Bar	Reserved Pets	dtReservedPets	value	type	total		A

The Stack Group column places data sets on top of each other if they are the same type. In this example, the dtAvailabePets and dtReservedPets data is stacked on top of each other.

Click Save & Close.

10.

Save your module.

Structure of a Vega Chart Component's Data

Using the example above, the image below displays a Vega Chart's component state:

To view the Vega Chart component's data sets, expand the series array. Each value in the array contains one data set:

Vega Chart Component

Overview

About the Configuration Window

Display

Series

Adding a Vega Chart Component

Configure the dtAvailablePets Data Table Component

Configure the dtReservedPets Data Table Component

Configure the Vega Chart Component

Overview

About the Configuration Window

Display

General

Legend

Series

Adding a Vega Chart Component

Configure the dtAvailablePets Data Table Component

Configure the dtReservedPets Data Table Component

Configure the Vega Chart Component

Structure of a Vega Chart Component's Data

Resources

Feedback