Creating pie charts

Edit online

A pie chart card displays data in data groups that can be plotted as a circle that is divided into sectors that each represent a proportion of the whole. You can use pie visualizations to show the proportions of categorical data.

About this task

The anatomy of a pie chart is as follows:

Pie chart example that shows 24% of shipments are late and 76% are on time.

Card title: A unique label or heading that is assigned to the card.
Card tooltip: A tooltip provides extra details about the data that is displayed on the card.
Labels: The percentage value of the whole for an individual category, for example, 24% or 76%.
Footer link: A clickable field or link with a label, for example, View all.

You can use the Card builder to create a pie chart.

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 Pieas 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 pie chart.
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 pie chart.
In the example, two data groups are available, late, and onTime. Select the data groups to show on the pie chart.
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.
Turn on the legend, and set its position on the UI.
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.