Creating simple bar charts

A simple bar chart displays data in data groups that can be plotted in the form of bars with equal width and variable height that is represented as magnitude of quantity. You can use the simple bar chart to visualize quantity comparison based on statistical figure.

About this task

The anatomy of a simple bar chart is as follows:

A simple bar chart shows past due order line value by supplier

Card title: A unique label or heading assigned to the card.
Card tooltip: A tooltip provides extra details about the data that is displayed on the card.
Threshold: A line on the chart above or below which are significant values.
Y-axis title: A label assigned to the vertical axis of the chart.
X-axis title: A label assigned to the horizontal axis of the chart.
Legend: The label of the data group.
Footer link: A clickable field or link with a label, for example, View all.

You can use the Card builder to create a simple bar 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 Simple bar as 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 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 simple bar 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 simple bar chart.
In the example, the data group, McGrey Electrical, is available. Select the data groups to show as a bar on the 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, add a card title and turn on the description tooltip.
In Axes, set the scale of the X axis and the label that is used. You can set a threshold for the X axis.
In Axes, set the scale of the Y axis and the label that is used. You can set a threshold for the Y axis.
In Legend, 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 data from the business object service and returns a list of past due order lines grouped by supplier. The query takes a tenant ID as an input parameter and allows filtering by location, category, and supplier. The query also includes an aggregation parameter that groups order lines by supplier and sums the total value of the order lines. The query returns the top five suppliers with the highest total value of past due order lines.

query pastDueOrderlineBySupplier($tenantId: String!, $locationFilter: BooleanExp = {CONSTANT_VALUE: true}, $categoryFilter: BooleanExp = {CONSTANT_VALUE: true}, $supplierFilter: BooleanExp = {CONSTANT_VALUE: true}) {
  pastDueOrderLineBySupplierChar: businessObjects(
    simpleFilter: {type: OrderLine, tenantId: $tenantId}
    hint: {viewId: "graph"}
    advancedFilter: {AND: [{GREATER_THAN: [{SELECT: "order.plannedDeliveryDelay", type: FLOAT}, {VALUE: "0.0", type: FLOAT}]}, {EQUALS: [{SELECT: "order.orderType", type: STRING}, {VALUE: "INBOUND", type: STRING}]}, $locationFilter, $categoryFilter, $supplierFilter]}
    aggregationParams: {paginationParams: {first: 5, sort: [{fieldPath: "totalOrderLinesBySupplier.sum", order: DESC}]}, dimension: {fieldPath: "order.vendor.name", type: STRING}, reduce: {expression: {fieldPath: "value", operator: SUM, type: INT}, output: {resultAlias: "totalOrderLinesBySupplier", type: INT}}}
  ) {
    totalCount
    aggregationResults {
      dimensionValues {
        name
        value
      }
      values {
        name
        numValue
      }
    }
    edges {
      cursor
      object {
        ... on OrderLine {
          valueCurrency
        }
      }
    }
  }
}

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

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

In the following example, past due order line value is returned by the supplier.

{
	"data": {
		"pastDueOrderLineBySupplierChar": {
			"totalCount": 19,
			"aggregationResults": [
				{
					"dimensionValues": [
						{
							"name": "order.vendor.name",
							"value": "McGrey Electrical",
							"__typename": "NameValuePair"
						}
					],
					"values": [
						{
							"name": "totalOrderLinesBySupplier",
							"numValue": 604160,
							"__typename": "NameValueNumValuePair"
						}
					],
					"__typename": "AggregationResult"
				},
				{
					"dimensionValues": [
						{
							"name": "order.vendor.name",
							"value": "Total Source Extrusion Corporation",
							"__typename": "NameValuePair"
						}
					],
					"values": [
						{
							"name": "totalOrderLinesBySupplier",
							"numValue": 226800,
							"__typename": "NameValueNumValuePair"
						}
					],
					"__typename": "AggregationResult"
				},
				{
					"dimensionValues": [
						{
							"name": "order.vendor.name",
							"value": "F & M Metals",
							"__typename": "NameValuePair"
						}
					],
					"values": [
						{
							"name": "totalOrderLinesBySupplier",
							"numValue": 125900,
							"__typename": "NameValueNumValuePair"
						}
					],
					"__typename": "AggregationResult"
				},
				{
					"dimensionValues": [
						{
							"name": "order.vendor.name",
							"value": "LightLens Industries",
							"__typename": "NameValuePair"
						}
					],
					"values": [
						{
							"name": "totalOrderLinesBySupplier",
							"numValue": 107920,
							"__typename": "NameValueNumValuePair"
						}
					],
					"__typename": "AggregationResult"
				},
				{
					"dimensionValues": [
						{
							"name": "order.vendor.name",
							"value": "Alumi-lux Metal Products",
							"__typename": "NameValuePair"
						}
					],
					"values": [
						{
							"name": "totalOrderLinesBySupplier",
							"numValue": 59605,
							"__typename": "NameValueNumValuePair"
						}
					],
					"__typename": "AggregationResult"
				}
			],
			"edges": [
				{
					"cursor": "NTQ1NDE2NA==",
					"object": {
						"valueCurrency": "USD",
						"__typename": "OrderLine"
					},
					"__typename": "BusinessObjectEdge"
				},
				{
					"cursor": "NTQ1NjQ5OA==",
					"object": {
						"valueCurrency": "USD",
						"__typename": "OrderLine"
					},
					"__typename": "BusinessObjectEdge"
				},
				{
					"cursor": "NTQ1NjQ3MQ==",
					"object": {
						"valueCurrency": "USD",
						"__typename": "OrderLine"
					},
					"__typename": "BusinessObjectEdge"
				},
				{
					"cursor": "NTQ1NTc3MQ==",
					"object": {
						"valueCurrency": "USD",
						"__typename": "OrderLine"
					},
					"__typename": "BusinessObjectEdge"
				},
				{
					"cursor": "NTQ1NDIzOQ==",
					"object": {
						"valueCurrency": "USD",
						"__typename": "OrderLine"
					},
					"__typename": "BusinessObjectEdge"
				}
			],
			"__typename": "BusinessObjectsCursor"
		}
	},
	"loading": false,
	"networkStatus": 7
}

The following code is an example of how to create a transform for the card.


{
	"totalCount": "{{ this.data.pastDueOrderLineBySupplierChar.totalCount }}",
	"errors": "{{#? this.errors}}",
	"pageInfo": "{}",
	"currency": [
		{
			"{{#if this.data.pastDueOrderLineBySupplierChar.edges.length > 0}}": "{{this.data.pastDueOrderLineBySupplierChar.edges[0].object.valueCurrency}}"
		},
		{
			"{{#else}}": ""
		}
	],
	"results": {
		"{{#each this.data.pastDueOrderLineBySupplierChar.aggregationResults}}": {
			"group": "{{dimensionValues[0].value}}",
			"value": "{{values[0].numValue}}"
		}
	}
}

In a transformation, the data that is displayed on each axis of the chart must match the data that is returned by the query. This attribute is chosen in the Data groups section. A calculation can be made on the data that is returned. In the example,McGrey Electrical is added to the group that the query returns.

What to do next

Add the card to a dashboard by using the Dashboard builder.