Creating meter charts

Edit online

A meter chart displays data in data groups. Data groups can be plotted in the form of meters to measure the rate of change of a quantity against pre-defined targets.

About this task

The following image shows the anatomy of a meter chart:

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.
Label: A data qualifier label. For example, last 30 days
Categories: The data groups retrieved by a query.
Footer link: A clickable field or link with a label. For example, View all.
Legend: The label of the data group.

You can use the Card builder to create a meter 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 Chart as the type of card and Meter 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 that is similar to the query in the Example section. 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 a format that is similar to the code in the Example section.
Run the query.
Verify that the data that is returned for the query is similar to the data in the Example section.
Click the Transform tab and add code to transform the data for visualization on a meter chart card.
Use code that is similar to the Example section or use the default transform.
Click Done.
The data that is returned by the query is displayed on the chart.
Add data groups from the data that was returned by the query to the card.
1. Click Configure and select the data groups to display on the card.
2. Click the Overflow menu icon and then click Edit and add a label for the selected data group.
3. Select a color from the available list.
4. Click Done.

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

In Dimensions, change the width and height of the card.
In Header, add a title to the card and, optionally, add a tooltip.
In Label, add a label.
For example, Last 30 days.
In Legend, set the legend to on 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

For a meter chart, any attribute that is returned by a query can be displayed. The query includes a tenantId variable.

query supplyShipments($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}, $locationGroupsFilter: BooleanExp = {CONSTANT_VALUE: true}) {
  totalShipmentMetrics: businessObjects(
    simpleFilter: {tenantId: $tenantId, type: Shipment}
    advancedFilter: {AND: [{EQUALS: [{SELECT: "shipmentType", type: STRING}, {VALUE: "INBOUND", type: STRING}]}, $customerFilter, $supplierFilter, $carrierFilter, $originFilter, $destinationFilter, $locationGroupsFilter]}
    hint: {viewId: "graph"}
    cursorParams: {first: 0}
  ) {
    totalCount
  }
  shipmentsInTransitMetrics: businessObjects(
    simpleFilter: {tenantId: $tenantId, type: Shipment}
    advancedFilter: {AND: [{EQUALS: [{SELECT: "shipmentType", type: STRING}, {VALUE: "INBOUND", type: STRING}]}, {EQUALS: [{SELECT: "statusByDate", type: STRING}, {VALUE: "IN_TRANSIT", type: STRING}]}, $customerFilter, $supplierFilter, $carrierFilter, $originFilter, $destinationFilter]}
    hint: {viewId: "graph"}
  ) {
    totalCount
  }
  shipmentsDeliveredMetrics: businessObjects(
    simpleFilter: {tenantId: $tenantId, type: Shipment}
    advancedFilter: {AND: [{EQUALS: [{SELECT: "shipmentType", type: STRING}, {VALUE: "INBOUND", type: STRING}]}, {EQUALS: [{SELECT: "statusByDate", type: STRING}, {VALUE: "DELIVERED", type: STRING}]}, $customerFilter, $supplierFilter, $carrierFilter, $originFilter, $destinationFilter]}
    hint: {viewId: "graph"}
  ) {
    totalCount
  }
  shipmentsUnshippedMetrics: businessObjects(
    simpleFilter: {tenantId: $tenantId, type: Shipment}
    advancedFilter: {AND: [{EQUALS: [{SELECT: "shipmentType", type: STRING}, {VALUE: "INBOUND", type: STRING}]}, $customerFilter, $supplierFilter, $carrierFilter, $originFilter, $destinationFilter, {NOT: [{EQUALS: [{SELECT: "statusByDate", type: STRING}, {VALUE: "DELIVERED", type: STRING}]}]}, {NOT: [{EQUALS: [{SELECT: "statusByDate", type: STRING}, {VALUE: "IN_TRANSIT", type: STRING}]}]}]}
    hint: {viewId: "graph"}
  ) {
    totalCount
    edges {
      object {
        ... on Shipment {
          shipToLocation {
            locationGroups {
              edges {
                object {
                  locationGroupName
                  locationGroupIdentifier
                }
              }
            }
          }
        }
      }
    }
  }
}

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.

  "data": {
    "totalShipmentMetrics": {
      "totalCount": 164,
      "__typename": "BusinessObjectsCursor"
    },
    "shipmentsInTransitMetrics": {
      "totalCount": 21,
      "__typename": "BusinessObjectsCursor"
    },
    "shipmentsDeliveredMetrics": {
      "totalCount": 140,
      "__typename": "BusinessObjectsCursor"
    },
    "shipmentsUnshippedMetrics": {
      "totalCount": 3,
      "edges": [
        {
          "object": {
            "shipToLocation": {
              "locationGroups": {
                "edges": [],
                "__typename": "LocationGroupsCursor"
              },
              "__typename": "Location"
            },
            "__typename": "Shipment"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "object": {
            "shipToLocation": {
              "locationGroups": {
                "edges": [],
                "__typename": "LocationGroupsCursor"
              },
              "__typename": "Location"
            },
            "__typename": "Shipment"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "object": {
            "shipToLocation": {
              "locationGroups": {
                "edges": [],
                "__typename": "LocationGroupsCursor"
              },
              "__typename": "Location"
            },
            "__typename": "Shipment"
          },
          "__typename": "BusinessObjectEdge"
        }
      ],
      "__typename": "BusinessObjectsCursor"
    }
  },
  "loading": false,
  "networkStatus": 7
}

The following code is an example of the transformation that is applied to the data. The attributes that are chosen must match what is returned from the data. Any calculation can be performed on the data that is returned. In the following example, color is modified for the unshipped, inTransit, and delivered data groups.


{
	"colorTemplate": {
		"unshipped": "#6929c4",
		"inTransit": "#009d9a",
		"delivered": "#e0e0e0"
	},
	"totalCount": [
		"{{ this.data.totalShipmentMetrics.totalCount }}"
	],
	"errors": "{{#? this.errors}}",
	"pageInfo": "{}",
	"results": [
		{
			"group": "unshipped",
			"value": "{{this.data.shipmentsUnshippedMetrics.totalCount}}"
		},
		{
			"group": "inTransit",
			"value": "{{this.data.shipmentsInTransitMetrics.totalCount}}"
		},
		{
			"group": "delivered",
			"value": "{{this.data.shipmentsDeliveredMetrics.totalCount}}"
		}
	]
}

What to do next

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