Creating donut charts

Edit online

A donut chart displays data in data groups that can be plotted as circle with its center cut out to resemble a donut, and it is divided into sectors that each represent a proportion of the whole. You can use donut visualizations to show the proportions of categorical data.

About this task

The anatomy of a donut chart is as follows:

Card title: A unique label or heading assigned to the card.
Legend: The label of the data group.
Label: The percentage value of the whole for an individual category, for example, 24% or 76%.
Big number label: The text that appears after the total count in the center of the donut chart, for example, 25 Shipments.
Card tooltip: A tooltip that provides extra details about the data that is displayed on the card.
Footer link: A clickable field or link with a label, for example, View all.

You can use the Card builder to create a donut card.

Procedure

From the navigation menu, click Card builder.
Click New card.

On the General tab, define the card:

Assign a name to the card.
The card is referred to by its name in the card library.
Select the card type.
Select Chart as the type of card and Donutas the variant.

On the Data tab, add data to the card:

Add a GraphQL query to retrieve the data.
Click Add and write a query similar to the query in the example. For more information, see Adding queries to cards.
Define any variables that you are using in the query.
In the QUERY VARIABLES field, define the variables in JSON format by using format that is similar to the code in the example.
Run the query.
Verify that data is returned for the query, similar to the data that is returned in the example.
On the Transform tab, add code to transform the data for visualization on a donut card.
Use code similar to the example or use the default transform.
Click Done.
The data that is returned by the query is displayed on the chart.
Configure the data groups for the donut chart.
In the example, two data groups are available, late, and totalShipments. Select the data groups to show on the donut.
Optional: Override the label and the color.

On the Style tab, define the style of the card:

In Dimensions, increase the width and height of the card.
In Header, modify the chart title.
In Center, add a text label to describe the big number.
Turn on the legend, and set its position on the UI.
In Behavior, configure the behavior of the interaction with the legend and tooltip.
Expand Footer and set Footer link to on and assign a label and enter a page ID.

You can add a page ID in the field or you can select a page from the library. To select a page, click Select from libaray. Alternatively, you can add an external link to the footer. When clicked, this link opens in a new tab.

Note: Some pages are flagged with This page requires context. warning. That means these pages require context variables to render content correctly on the page and these variables are missing in the page context. To add page context variables, see Configuring page context variables.

After you select the page, you can add template variables to make the page content dynamic. That means you can use the same page multiple times with customized content according to the variables.
Click Save.

Example

The following query retrieves the total number of inbound shipments that were delivered and the total number of shipments that were delivered late. The query includes a tenantId variable.

query estimatedLateDelivery($tenantId: String!, $customerFilter: BooleanExp = {CONSTANT_VALUE: true}, $supplierFilter: BooleanExp = {CONSTANT_VALUE: true}, $carrierFilter: BooleanExp = {CONSTANT_VALUE: true}, $originFilter: BooleanExp = {CONSTANT_VALUE: true}, $destinationFilter: BooleanExp = {CONSTANT_VALUE: true}) {
  late: businessObjects(
    simpleFilter: {tenantId: $tenantId, type: Shipment}
    advancedFilter: {AND: [{EQUALS: [{SELECT: "shipmentType", type: STRING}, {VALUE: "INBOUND", type: STRING}]}, {GREATER_THAN: [{SELECT: "estimatedDeliveryDelay", type: FLOAT}, {VALUE: "0.0", type: FLOAT}]}, {NOT: {EQUALS: [{SELECT: "statusByDate", type: STRING}, {VALUE: "DELIVERED", type: STRING}]}}, $customerFilter, $supplierFilter, $carrierFilter, $originFilter, $destinationFilter]}
    hint: {viewId: "graph"}
    cursorParams: {first: 0}
  ) {
    totalCount
  }
  totalShipments: businessObjects(
    simpleFilter: {tenantId: $tenantId, type: Shipment}
    advancedFilter: {AND: [{EQUALS: [{SELECT: "shipmentType", type: STRING}, {VALUE: "INBOUND", type: STRING}]}, {NOT: {EQUALS: [{SELECT: "statusByDate", type: STRING}, {VALUE: "DELIVERED", type: STRING}]}}, $customerFilter, $supplierFilter, $carrierFilter, $originFilter, $destinationFilter]}
    hint: {viewId: "graph"}
    cursorParams: {first: 0}
  ) {
    totalCount
  }
}

The following code is an example of how to define the variables to use in the query.

{
  "tenantId": "{{ tenantId }}"
}

The following code is an example of the data that is returned by the query. In the example, two shipments are late out of a total of eight shipments.

{
  "data": {
    "late": {
      "totalCount": 2,
      "__typename": "BusinessObjectsCursor"
    },
    "totalShipments": {
      "totalCount": 8,
      "__typename": "BusinessObjectsCursor"
    }
  },
  "loading": false,
  "networkStatus": 7
}

In the following code, COMMON.SHIPMENT_STATUS.ON_TIME is added as a group. The on-time shipments are calculated in the transform by subtracting the late shipments from the total shipments.


{
	"legendOrder": [
		"COMMON.SHIPMENT_STATUS.ON_TIME",
		"COMMON.SHIPMENT_STATUS.LATE"
	],
	"colorScale": {
		"COMMON.SHIPMENT_STATUS.ON_TIME": "#009d9a",
		"COMMON.SHIPMENT_STATUS.LATE": "#6929c4"
	},
	"totalCount": [
		"{{this.data.totalShipments.totalCount}}"
	],
	"errors": "{{#? this.errors}}",
	"pageInfo": "{}",
	"results": [
		{
			"group": "COMMON.SHIPMENT_STATUS.LATE",
			"value": "{{this.data.late.totalCount}}"
		},
		{
			"group": "COMMON.SHIPMENT_STATUS.ON_TIME",
			"value": "{{this.data.totalShipments.totalCount - this.data.late.totalCount}}"
		}
	]
}

In a transformation, the data that is displayed on the chart must match the data that is returned by the query. You can add any calculation on the data that the query returns.

What to do next

Add the card to a page by using the Page builder.