Creating area charts

An area chart displays data in data groups. Data groups can be plotted in the form of areas to show changes in quantities over time.

About this task

The following image shows the anatomy of an area chart:
Area chart example
Y-axis title
A label that is assigned to the vertical axis of the chart.
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.
X- axis title
A label assigned to the horizontal axis of the chart.
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 an area chart.

Procedure

  1. From the navigation menu, click Card builder.
    Selecting Card library > My cards displays your organization's cards, if any exist. The Samples tab displays the samples that you can copy and modify.
  2. To create a card, on the My cards tab, click New card.
    The Card builder page is displayed.
  3. On the General tab, enter the following data.
    1. In the Metadata section, add the following fields:
      • Card name
      • Card ID
      • Description
    2. In the Properties section, select the Type and Variant.
      For example, Chart and Area
  4. On the Data tab, add data to the card:
    1. In the Queries section, click Add to add a query or query groups to populate the card's data.
    2. Click Code editor and in the Query field, write a query that is similar to the query in the Example section. For more information, see Adding queries to cards.
      You can also define query on the Define query page.
    3. In the QUERY VARIABLES field, define the variables in JSON format by using a format that is similar to the code in the Example.
    4. Run the query.
    5. Verify that the data that is returned for the query is similar to the data in the Example.
    6. On the Transform tab, write code that is similar to the Example or use the default transform for visualization on the card.
    7. Click Done.
      The data that is returned by the query is displayed on the chart.
    8. In the Data groups section, click Configure and select the data groups to display on the card.
    9. Click the Overflow menu icon and then click Edit and add a label for the selected data group.
    10. To change the default color, select Override and select a color from the available list.
    11. Click Done.
  5. On the Style tab, add styling to the card:
    1. In the Dimensions field, change the width and height of the card.
    2. In the Header field, add a title to the card and optionally, add a tooltip.
    3. In the Axes field, configure the x and y axes of the card.
    4. On the X axis tab, select the axis key and scale type from the available list.
    5. Set the bottom or top visibility to on and add axis titles.
    6. Click Add X axis threshold to define a dashed line on the X-axis of the chart.
    7. Optional: Add a threshold label, value, and override the default color.
      The threshold label appears on the dashed line with the defined value when you hover over it.
    8. On the Y axis tab, select the axis key and scale type from the available list.
    9. Set the left or right visibility to on and add axis titles.
    10. Click Add Y axis threshold to define a dashed line on the Y-axis of the chart.
    11. Optional: Add a threshold label, value, and override the default color.
      The threshold label appears on the dashed line with the defined value when you hover over it.
    12. In Legend, set the legend to on and set its position in the UI.
    13. In Behavior, configure the behavior of the interaction with the legend and tooltip.
    14. 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.

  6. Click Save.

Example

The following GraphQL query retrieves data from the business object service. The query takes a tenant ID as an input parameter and returns a list of orders with their associated buyer information, quantity, and planned ship date. The query also includes pagination parameters for retrieving a limited number of results and sorting the results by planned ship date in ascending order. Additionally, the query includes an aggregation parameter that groups orders by their planned ship date and counts the number of buyers who placed each order.

query orders($tenantId: String) {
  orderLineChart: businessObjects(
    simpleFilter: {tenantId: $tenantId, type: Order}
    hint: {viewId: "orderflow"}
    cursorParams: {first: 10, sort: {fieldPath: "plannedShipDate", order: ASC}}
    aggregationParams: {dimension: {fieldPath: "plannedShipDate", type: STRING}, reduce: {expression: {fieldPath: "quantity", operator: SUM, type: INT}, output: {resultAlias: "buyers", type: INT}}}
  ) {
    totalCount
    pageInfo {
      endCursor
      hasNextPage
    }
    edges {
      object {
        id
        ... on Order {
          buyer {
            id
            name
          }
          quantity
          plannedShipDate
        }
      }
    }
    aggregationResultsTotalCount
    aggregationResults {
      dimensionValues {
        name
        value
      }
      values {
        name
        value
      }
    }
  }
}
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": {
    "orderLineChart": {
      "totalCount": 214,
      "pageInfo": {
        "endCursor": "ZTc4MDBmNjUtODMzOS00NTAyLTkyY2MtODc5NTNmNmNjZTVj",
        "hasNextPage": true,
        "__typename": "PageInfo"
      },
      "edges": [
        {
          "object": {
            "id": "fd6e55d2-cd93-41af-b399-ef05409ef525",
            "buyer": {
              "id": "a6e2cf83-a684-42f7-b6ec-fe3593a86fd9",
              "name": "LightTree",
              "__typename": "Organization"
            },
            "quantity": 124,
            "plannedShipDate": "2021-06-23T00:00:00.000Z",
            "__typename": "Order"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "object": {
            "id": "fcf6988a-4e88-42b9-a31f-109f6b71ede7",
            "buyer": {
              "id": "a6e2cf83-a684-42f7-b6ec-fe3593a86fd9",
              "name": "LightTree",
              "__typename": "Organization"
            },
            "quantity": 124,
            "plannedShipDate": "2021-06-23T00:00:00.000Z",
            "__typename": "Order"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "object": {
            "id": "fa73fc29-ca86-4f78-b57d-064112907bed",
            "buyer": {
              "id": "a6e2cf83-a684-42f7-b6ec-fe3593a86fd9",
              "name": "LightTree",
              "__typename": "Organization"
            },
            "quantity": 124,
            "plannedShipDate": "2021-06-23T00:00:00.000Z",
            "__typename": "Order"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "object": {
            "id": "f522826f-2f16-4d2a-b21d-b8d32350e85d",
            "buyer": {
              "id": "a6e2cf83-a684-42f7-b6ec-fe3593a86fd9",
              "name": "LightTree",
              "__typename": "Organization"
            },
            "quantity": 124,
            "plannedShipDate": "2021-06-23T00:00:00.000Z",
            "__typename": "Order"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "object": {
            "id": "f206ed37-8bf0-497e-933a-15c872ce7296",
            "buyer": {
              "id": "a6e2cf83-a684-42f7-b6ec-fe3593a86fd9",
              "name": "LightTree",
              "__typename": "Organization"
            },
            "quantity": 512,
            "plannedShipDate": "2021-06-23T00:00:00.000Z",
            "__typename": "Order"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "object": {
            "id": "f1e9a510-1976-4ec9-82ff-d8cbe764f49c",
            "buyer": {
              "id": "a6e2cf83-a684-42f7-b6ec-fe3593a86fd9",
              "name": "LightTree",
              "__typename": "Organization"
            },
            "quantity": 124,
            "plannedShipDate": "2021-06-23T00:00:00.000Z",
            "__typename": "Order"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "object": {
            "id": "ed5194ed-cc73-42ee-a326-817f8173309c",
            "buyer": {
              "id": "a6e2cf83-a684-42f7-b6ec-fe3593a86fd9",
              "name": "LightTree",
              "__typename": "Organization"
            },
            "quantity": 124,
            "plannedShipDate": "2021-06-23T00:00:00.000Z",
            "__typename": "Order"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "object": {
            "id": "eba89dd3-eb49-4bb7-a322-e43a011a3bc6",
            "buyer": {
              "id": "a6e2cf83-a684-42f7-b6ec-fe3593a86fd9",
              "name": "LightTree",
              "__typename": "Organization"
            },
            "quantity": 512,
            "plannedShipDate": "2021-06-23T00:00:00.000Z",
            "__typename": "Order"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "object": {
            "id": "e7e2bb2a-7cd9-461f-b89a-708c9128a310",
            "buyer": {
              "id": "a6e2cf83-a684-42f7-b6ec-fe3593a86fd9",
              "name": "LightTree",
              "__typename": "Organization"
            },
            "quantity": 320,
            "plannedShipDate": "2021-06-23T00:00:00.000Z",
            "__typename": "Order"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "object": {
            "id": "e7800f65-8339-4502-92cc-87953f6cce5c",
            "buyer": {
              "id": "a6e2cf83-a684-42f7-b6ec-fe3593a86fd9",
              "name": "LightTree",
              "__typename": "Organization"
            },
            "quantity": 320,
            "plannedShipDate": "2021-06-23T00:00:00.000Z",
            "__typename": "Order"
          },
          "__typename": "BusinessObjectEdge"
        }
      ],
      "aggregationResultsTotalCount": 10,
      "aggregationResults": [
        {
          "dimensionValues": [
            {
              "name": "plannedShipDate",
              "value": "2021-06-23T00:00:00.000Z",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "buyers.sum",
              "value": "24940.0",
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "plannedShipDate",
              "value": "2021-07-15T00:00:00.000Z",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "buyers.sum",
              "value": "1113.0",
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "plannedShipDate",
              "value": "2021-07-06T00:00:00.000Z",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "buyers.sum",
              "value": "1350.0",
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "plannedShipDate",
              "value": "2021-07-22T00:00:00.000Z",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "buyers.sum",
              "value": "484.0",
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "plannedShipDate",
              "value": "2021-08-06T00:00:00.000Z",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "buyers.sum",
              "value": "2478.0",
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "plannedShipDate",
              "value": "2021-07-24T00:00:00.000Z",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "buyers.sum",
              "value": "176.0",
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "plannedShipDate",
              "value": "2021-08-10T00:00:00.000Z",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "buyers.sum",
              "value": "1907.0",
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "plannedShipDate",
              "value": "2021-08-11T00:00:00.000Z",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "buyers.sum",
              "value": "1495.0",
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "plannedShipDate",
              "value": "2021-06-25T00:00:00.000Z",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "buyers.sum",
              "value": "956.0",
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "plannedShipDate",
              "value": "2021-06-30T00:00:00.000Z",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "buyers.sum",
              "value": "732.0",
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        }
      ],
      "__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.


{
	"errors": "{{ #? this.errors }}",
	"totalCount": "{{ this.data.orderLineChart.aggregationResultsTotalCount }}",
	"pageInfo": {},
	"results": {
		"{{ #each this.data.orderLineChart.aggregationResults }}": {
			"group": "orderLineChart",
			"x-axis-key": "{{this.dimensionValues[0].value}}",
			"y-axis-key": "{{this.values[0].value}}",
			"tooltipsConfig": {
				"name": "{{this.dimensionValues[0].name}}"
			}
		}
	}
}

What to do next

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