Creating scatter charts

Edit online
A scatter chart uses dots to represent values for two different numeric variables. The position of each dot on the horizontal and vertical axis indicates values for an individual data point. You can use scatter charts to visualize relationships between variables.

About this task

The following illustration shows the anatomy of a scatter chart:
Scatter chart example
Card tooltip
A tooltip that provides extra details about the data that is displayed on the card.
Card title
A unique label or heading that is assigned to the card.
Y-axis title
A label that is assigned to the vertical axis of the chart.
Threshold
A line on the chart above or below which are significant values.
X-axis title
A label that is 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 that is assigned to the data group that is returned by a query.
You can use the Card builder to create a scatter chart.

Procedure

  1. From the navigation menu, click Card builder.
    Selecting Card library > My cards displays your organization's cards, if any exists. 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 metadata and select the properties of the chart:
    1. Expand Metadata and add values to the Card name, Card ID, and Description fields.
    2. Expand Properties and then select the type and variant.
      For example, in the Type field, select Chart and in the Variant field, select Scatter.
  4. On the Data tab, add data to the card.
    1. Expand Queries and then click Add to add a query or query groups to populate the card's data.
    2. On the Query tab, write a query similar to the query in the example. For more information, see Adding queries to cards.
    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. Expand Data groups and click Configure.
    9. Select the required fields and click Done.
    10. Optional: In the Data groups section, click the Overflow menu icon and then click Edit for a data group and then add a label and override the default color.
  5. On the Style tab, add styling to the card.
    1. Expand Dimensions and change the width and height of the card.
    2. Expand Header and in the Card title field, add the title that is displayed on the card.
    3. Optional: To show the card description in an icon tooltip with the title, set Description tooltip to on.
    4. Expand Axes and click Configure.
    5. On the X axis tab, select the axis key and scale type from the available lists.
    6. Set the bottom or top visibility to on and add the axis titles.
    7. Optional: Click Add X axis threshold to define a dashed line on the x-axis of the chart.
      This option is available only when your query includes the required scale type.
    8. 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.
    9. On the Y axis tab, select the axis key and scale type from the available lists.
    10. Set the left or right visibility to on and add the axis titles.
    11. Optional: Click Add Y axis threshold to define a dashed line on the y-axis of the chart.
      This option is available only when your query includes the required scale type.
    12. 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.
    13. Expand Legend and select position and alignment.
      The selection defines the placement of the legend relative to the data visualization.
    14. Expand Behavior and set Legend filtering to On to filter the visibility of data groups by clicking legend items.
    15. Set the Tooltip interactions to On to show precise values of the data points.
    16. Set the Total value to On to show total value of data points on tooltip.
    17. Expand Footer and set Footer link to on.
      The Configure link button is displayed. You can use this button to add a footer link to another page.
    18. 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.

    19. Click Done.
  6. Click Save.

Example

The following query retrieves the total quantity of orders per planned ship date. The query includes a tenantId variable.
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. In the example, the total number of orders is returned for each planned ship date. 
{
  "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 a transform. In a transform, the data that is displayed on each axis of the chart must match the data that is returned by the query. This attribute is selected in the Data groups section. A calculation can be made on the data that is returned. In the example, orderLineChart is added to the group that the query returns. 

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

What to do next

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