Pie Chart

In this section, you will:

  • Create a pie chart

  • Add a formatter attribute

  • Bind data through a data provider

Pie Chart Setup

You will integrate a pie chart component to display the distribution of users across different onboarding statuses for a snapshot of the onboarding progress within the organization.

Click on the formLayout element in user-list-view.xml.

Next, choose Add Component in the actions panel, locate and select the Chart item. Configure the id, height and width attributes as follows.

<charts:chart id="pie" width="40em" height="80%" minHeight="30em" alignSelf="STRETCH">

To include the pie series to your chart, choose the chart element and pick Add → Series → Pie. Add a name attribute for the pie chart: Onboarding Status and add a radius attribute to configure the size of your pie as follows.

<charts:pie name="Onboarding Status" radius="50% 80%">

Formatting Value

The formatter attribute in the pie series supports string template and callback functions to format data.

To display the onboarding status and the percentage of users in that status in each slice of the pie chart, select the label element, then choose Add → Label.

Set the formatter attribute in the label element to "{b} : %{d}", where:

  • {b}: Represents the name of the data item (category) - in this context, it’s the onboarding status like "Not Started," "In Progress," or "Completed."

  • {d}: Represents the percentage of the total that this data item (category) constitutes.

<charts:series>
    <charts:pie name="Onboarding Status" radius="50% 80%">
        <charts:label formatter="{b} : {d}%"/>
    </charts:pie>
</charts:series>

Data Binding Using Data Provider

The pie chart should display onboarding statuses in percentages. The data isn’t directly sourced from a single entity attribute but requires aggregation based on user statuses.

That’s why you’ll need a data provider to pass aggregated data to the DataSet in the controller.

Navigate to the controller class by selecting Controller and inject the pie chart component into your controller class to interact with the chart component programmatically.

@ViewComponent
protected Chart pie;

To handle data when the view initializes, create an InitEvent handler.

Within the onInit method, you’ll retrieve count of users according to their onboarding status, and pass this information to the DataSet class.

Use DataManager to load the total number of users within each onboarding status category as follows:

final Integer notStarted = dataManager.loadValue(
                "select count(u) from User u where u.onboardingStatus = :onboardingStatus",
                Integer.class
        )
        .parameter("onboardingStatus", OnboardingStatus.NOT_STARTED)
        .one();

final Integer inProgress = dataManager.loadValue(
                "select count(u) from User u where u.onboardingStatus = :onboardingStatus",
                Integer.class
        )
        .parameter("onboardingStatus", OnboardingStatus.IN_PROGRESS)
        .one();


final Integer completed = dataManager.loadValue(
                "select count(u) from User u where u.onboardingStatus = :onboardingStatus",
                Integer.class
        )
        .parameter("onboardingStatus", OnboardingStatus.COMPLETED)
        .one();

Next, create ListChartItems to store the chart data. Create MapDataItem instances for each onboarding status, mapping the status name to its count.

Bind the prepared data items to the pie chart. As with the dataSet XML element, define categoryField as the status name and valueField as the list size.

You should get the following method by the end of this tutorial.

@Subscribe
public void onInit(final InitEvent event) {
    final Integer notStarted = dataManager.loadValue(
                    "select count(u) from User u where u.onboardingStatus = :onboardingStatus",
                    Integer.class
            )
            .parameter("onboardingStatus", OnboardingStatus.NOT_STARTED)
            .one();

    final Integer inProgress = dataManager.loadValue(
                    "select count(u) from User u where u.onboardingStatus = :onboardingStatus",
                    Integer.class
            )
            .parameter("onboardingStatus", OnboardingStatus.IN_PROGRESS)
            .one();


    final Integer completed = dataManager.loadValue(
                    "select count(u) from User u where u.onboardingStatus = :onboardingStatus",
                    Integer.class
            )
            .parameter("onboardingStatus", OnboardingStatus.COMPLETED)
            .one();
    ListChartItems<MapDataItem> items = new ListChartItems<>(
            new MapDataItem(Map.of("category", "Completed", "value", notStarted)),
            new MapDataItem(Map.of("category", "Not Started", "value", inProgress)),
            new MapDataItem(Map.of("category", "In Progress", "value", completed))
        );


    pie.setDataSet(
            new DataSet()
                    .withSource(
                            new DataSet.Source<MapDataItem>()
                                    .withDataProvider(items)
                                    .withCategoryField("category")
                                    .withValueField("value")
                    )
    );
}

This pie chart visualizes the percent of employees by onboarding status.

pie res