Creating grouped bar charts

Edit online
The grouped bar chart is used to display values across multiple categories at a time. Data groups can be plotted in the form of grouped bars with equal widths and variable heights representing the magnitude of the quantity. Grouped bar charts can be used to visualize the rate of change of a quantity for multiple categories against pre-defined targets based on the statistical figure.

About this task

The anatomy of a grouped bar chart is as follows:
Example of the grouped bar 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.
Threshold
A line on the chart above or below which are significant values.
Y-axis title
A label that is 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 grouped bar 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. Expand Metadata and then add the following fields:
      • Card name
      • Card ID
      • Description
    2. Expand Properties and then select the Type and Variant.
      For example, type as Chart and variant as Grouped bar.
  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 format that is similar to the code in the example.
    4. Run the query.
    5. Verify that the data is returned for the query is similar to the data given in the example.
    6. On the Transform tab, write code 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: On the selected data group, click the Overflow menu icon and then click Edit to add label and override the default bar 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 title to appear 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 list.
    6. Set the bottom or top visibility to on and add the axis titles.
    7. Click Add X axis threshold to define a dashed line on the X-axis of the chart.
    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 list.
    10. Set the left or right visibility to on and add the axis titles.
    11. Click Add Y axis threshold to define a dashed line on the Y-axis of the chart.
    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. Optional: Click Swap axes data to change the visualization of the chart.
    14. Expand Legend and select position and alignment.
      The selection decides the placement of the legend relative to the data visualization.
    15. Expand Behavior and set the Legend filtering to on to filter the visibility of data groups by clicking legend items.
    16. Set the Tooltip interactions to on to expose precise values of the data points.
    17. 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 query retrieves the past due borderline by supplier. The query includes the tenantId variable.

For a grouped bar chart, any attribute that is returned by a query can be displayed.

query pastDueOrderlineBySupplier($tenantId: String!) {
  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}]}]}
    aggregationParams: {paginationParams: {first: 50, 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 }}"
}

The following code is an example of the data that is returned by the query: 

{
  "data": {
    "pastDueOrderLineBySupplierChar": {
      "totalCount": 289,
      "aggregationResults": [
        {
          "dimensionValues": [
            {
              "name": "order.vendor.name",
              "value": "",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "totalOrderLinesBySupplier",
              "numValue": 167457072,
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "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": 153200,
              "__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"
        },
        {
          "dimensionValues": [
            {
              "name": "order.vendor.name",
              "value": "Gemini Design Technology",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "totalOrderLinesBySupplier",
              "numValue": 39040,
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "order.vendor.name",
              "value": "Amos Wire Products Inc",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "totalOrderLinesBySupplier",
              "numValue": 28160,
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "order.vendor.name",
              "value": "SilverOptics",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "totalOrderLinesBySupplier",
              "numValue": 13392,
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "order.vendor.name",
              "value": "SJN Fuels",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "totalOrderLinesBySupplier",
              "numValue": 9518,
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "order.vendor.name",
              "value": "Interalloy Corporation",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "totalOrderLinesBySupplier",
              "numValue": 744,
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        }
      ],
      "edges": [
        {
          "cursor": "NDgzMzA0NA==",
          "object": {
            "valueCurrency": "USD",
            "__typename": "OrderLine"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "cursor": "NDgzMzE3NA==",
          "object": {
            "valueCurrency": "USD",
            "__typename": "OrderLine"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "cursor": "NDgzNDQ2Nw==",
          "object": {
            "valueCurrency": "USD",
            "__typename": "OrderLine"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "cursor": "NDgzNDQyNw==",
          "object": {
            "valueCurrency": "USD",
            "__typename": "OrderLine"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "cursor": "NDgzNDM5OQ==",
          "object": {
            "valueCurrency": "USD",
            "__typename": "OrderLine"
          },
          "__typename": "BusinessObjectEdge"
        }
      ],
      "__typename": "BusinessObjectsCursor"
    }
  },
  "loading": false,
  "networkStatus": 7
}

The following code is an example of the transformation that is applied to the data. The attribute that is shown must match what is returned from data. This attribute is chosen in the data groups section. Any calculation can be done on the data that is returned.

{
	"errors": "{{ #? this.errors }}",
	"totalCount": "{{ this.data.pastDueOrderLineBySupplierChar.totalCount }}",
	"pageInfo": {},
	"results": {
		"{{ #each this.data.pastDueOrderLineBySupplierChar.aggregationResults }}": {
			"group": "{{this.dimensionValues[0].value}}",
			"value": "{{this.values[0].numValue}}",
			"key": "Past due orderline"
		}
	}
}

What to do next

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