Chart

What is it?

The Chart widget creates a chart that sources its own data from a form. It appears as a bar chart, line graph or pie chart.

The types of Charts include:

• Bar Chart

• Pie Chart

• Line Chart

How and When to use it?

To add a new Chart to your page, simply drag and drop the “Chart” widget from the left-hand side of the page screen to the design area of your page. 

To change the name of the chart, tab on the Chart widget to reveal the blue Quick Settings panel. By default, the name is displayed on the widget’s left side. 

How to configure it?

1. Drag a Chart into the design area.

2. Click the Chart and then click the setting button  to open Widget Property Settings. 

3. The Widget Property Settings is shown, which contains two tabs, General and Visibility. We will demonstrate how each tab and property is used. 

Introduction of General Properties

The tab General has four subheaders, “Basic”, “Configurations”, “Style” and “Position, Size and Layout”.

Basic

The fields in “Basic” are Name and Description. One can change the name and description of the widget here.

Position, Size and Layout

The options for Sizing Mode are Absolute Size and Relative Size. In Position, various parameters of the widget can be adjusted. These parameters change depending on what is selected in Sizing Mode. In Absolute Size, the dimensions of the widget are the same in the Page Builder and Production. 

In Relative Size, the right and bottom sides of the widget expand to completely fill the screen/window in Production. 

The options of “Display in” are “Web & Mobile” (the default setting) and “Mobile Only”. It controls whether this label would be displayed on both platforms. 

Introduction of Data Source Settings

1. Click the Chart and then click the data source settings button to open the Data Source Settings. 

2. The Data Source Settings is shown. 

3. You can choose the desired Form from a dropdown menu in “Data Source”. This selected Form will serve as the Data Source for the Chart.

4. In Record Filters, you can add conditions or groups of conditions.

Introduction of Chart Configurations

1. After selecting the desired data source for the Chart, click the Chart and then click chart layout button to open the chart Layout. 

2. The Chart Configurations is shown. We will demonstrate how each tab and property is used. 

Chart Title and Chart Type

The first three fields are always the same: Chart Title, Chart Type and Show Legend. All the fields for line graph and bar chart are almost the same. Pie Chart has less fields than the other chart types.

Chart Title and Chart Type are always mandatory fields. One can use them to adjust the title and select the chart type.

Show Legend and Clustered Column

When you enable the "Show Legend" option, the Legend will be displayed only when the "Clustered Column" setting (located at the bottom of this settings page) is set to "Automatic" and not "Default.”

When Cluster Mode is default, each data point is a category paired with a Value. 

When Clustered Column is set to Automatic, it is mandatory to select a value in the field Clustered By.

When you choose the Cluster Mode as "Automatic," every item within the selected Cluster Category in the "Clustered by" field will have its own unique colour. You can easily identify each cluster by checking the colour coding in the Legend. Moreover, each data point will be displayed with a distinct colour based on the Cluster Category it belongs to.

Chart Mode

The Chart Mode offers two options: Normal Mode and Summary Mode. In Normal Mode, you can have only one Data Column, such as a single line or bar, for each category at any given time.

When Summary Mode is selected, a new section inside of a rectangle with a grey border appears in Value Axis.

In this section, you can add multiple data columns, which will appear as multiple bars or multiple lines.

Category Axis

Typically, the Data Column in the Category Axis consists of strings rather than numerical data. However, if numerical data is used, there are several methods available for plotting it on the category axis, such as Linear and Take as string. You can choose the desired method by selecting it from the dropdown menu in the Data Display Method field.

In this example, the Amount of fruits is plotted on the Category Axis using the Linear Data Display Method. It is then plotted against the Amount that rotted on the Value Axis.

Value Axis

The checkbox option Stacking only functions when the Chart Style is bar chart.

It makes the bars for a category stack, instead of the original side-by-side arrangement.

Data Display

Data Ordering and Data Filtering can be adjusted under Data Display.

For Data Ordering, one can choose to sort by Category Axis or Value Axis, and by Ascending or Descending order.

For Data Filtering, one can choose to filter the top or bottom of the data with input number of data.