Chart design with xDM Dashboard

Charts in xDM Dashboard use the data returned by the queries as dimensions or aggregated metrics to render visualizations, such as bar, column, line or pie charts.

Chart components

A Chart is composed of:

  • Measures and Dimensions, defining a Pivot Query, that is the shape of the dataset rendered by the chart. Measures and dimensions are based on query attributes.

  • A Chart Type, defining the visualization used to display the dataset. For example, a line chart.

  • Configuration elements applies to the measures, the dimensions and to the chart itself. These elements depend on the chart type.

Understand the pivot query

The measures and dimensions of a chart define the pivot query. A good representation of a pivot query is in the form of a table:

  • The Rows (aka. Categories) and Columns (aka. Series) of the table are the Dimensions,

  • the Measures are the values in the cells at the intersection of the rows and columns.

In the context of charts:

  • Columns are also known as Series.

  • Rows are also known as Categories.

These terms are equivalent in the rest of the documentation.

The following example illustrates the various configurations of a pivot table.

A simple pivot table

A table shows Product as rows and Years as columns. The cell at the intersection of a given product and a given year show the Domestic Revenue (that is the sum of the Domestic Sales) for that product and that year.

The pivot table definition is:

  • Rows: Product

  • Columns: Year

  • Measures: Domestic Revenue: SUM(Domestic Sales)

It renders as:

2017 2018 2019

Product #1

10'000

15'000

16'000

Product #2

0

1000

8'000

Product #3

16'000

10'000

11'000

A pivot query may have multiple rows and columns as explained below.

Pivot table with multiple columns

From the same product revenue per year table, we add an additional a Quarter column to divide the revenue by quarters.

Pivot table definition:

  • Rows: Product

  • Columns: Year, Quarter

  • Measures: Domestic Revenue: SUM(Domestic Sales)

2017 2018

Q1

Q2

Q3

Q4

Q1

Q2

…​

Product #1

2'000

2'000

3'000

3'000

4'000

4'000

…​

Product #2

0

0

0

0

500

0

…​

Product #3

3'000

4'000

4'000

5'000

5'000

100

…​
Pivot table with multiple columns and rows

Similarly, if we add to the rows the Product Family before the Product, then the table becomes a tree table where the products appear under their parent family.

Pivot table definition:

  • Rows: Product Family, Product

  • Columns: Year, Quarter

  • Measures: Domestic Revenue: SUM(Domestic Sales)

2017 2018

Q1

Q2

Q3

Q4

Q1

Q2

…​

Family #1

- Product #1

2'000

2'000

3'000

3'000

4'000

4'000

…​

- Product #2

0

0

0

0

500

0

…​

Family #2

- Product #3

3'000

4'000

4'000

5'000

5'000

100

…​

Similarly, the pivot table may have multiple measures.

Pivot table with multiple measures

If we want to define a second measure, for example, the International Revenue, on the original pivot query, we would have 2 measures on each cell.

Pivot table definition:

  • Rows: Product

  • Columns: Year

  • Measures: Domestic: SUM(Domestic Sales), International: SUM(International Sales)

2017 2018 2019

Product #1

Domestic: 10'000
International: 50'000

Domestic: 15'000
International: 0

Domestic: 16'000
International: 78'000

…​

…​

…​

…​

For this situation, you must decide whether the labels of the multiple measures will be inserted as rows or columns. For example, if you use them after the Year column:

Pivot table definition:

  • Rows: Product

  • Columns: Year, (Measures)

  • Measures: Domestic: SUM(Domestic Sales), International: SUM(International Sales)

2017 2018 2019

Domestic

International

Domestic

International

Domestic

International

Product #1

10'000

50'000

15'000

0

16'000

78'000

…​

…​

…​

…​

…​

…​

…​

We could also put the (Measures) on the rows instead, and the result would be different.

Chart types

The following chart types are supported:

  • Simple Charts:

    • The Number chart (NUMBER) displays a single number value, possibly indicating a target goal and a variance.

    • The Pivot Table (PIVOT_TABLE) displays the pivot query as a table with a hierarchy of rows and columns.

    • The Donut or Pie (DONUT) charts show percentages of values between categories, by dividing a circle or a disk into proportional segments.

    • The Gauge chart shows values as performance gauges for each category, with lower and upper ranges.

  • Axis Charts are used to compare values across many categories:

    • The Column (COLUMN) and Bar (BAR) charts show values side by side as vertical or horizontal bars, across categories. These charts support clustering, supporting two or more data series plotted side-by-side and grouped together under categories.

    • The Line (LINE) graph shows values over a continuous interval. This chart is most frequently used to show trends and data changes over time. It supports multiple data series to compare values and trends.

    • The Area (AREA) graph is similar to the line graph with the area below the line filled. Area graphs support stacking.

    • The Combined (COMBINED) chart use a secondary value axis to combine bar/columns and line charts on the same visualization.

  • Hierarchical charts

    • The Sunburst (SUNBURST) diagram shows a hierarchical distribution of the values in a series of rings.

    • The Treemap shows a hierarchy of categories while also displaying quantities for each category via area size.

Each chart type is able to display certain shapes of pivot queries.

The table below details configuration examples (measures, rows, and columns) and the result for each chart type.

Table 1. Charts type and pivot query examples
Chart Type Measures Rows/ Categories Columns/ Series Description

Column
Bar

SUM(Sales)

Year, Quarter

Product_Family

Shows the revenue for each quarter of each year, with groups of columns/bars representing the product families. Each group may be organized as:

  • A cluster, showing families side-by-side as distinct columns/bars.

  • A stack, where all columns/bars are stacked

  • A 100% stack showing each family contribution to the revenue for the quarter as a portion of the bar/column.

If no Column/Series value is provided, this chart shows the summed revenue for all products as a single bar.

Line
Area

SUM(Sales)

Year, Quarter

Product_Family

Shows the trend of revenue over quarters and years as lines, each line representing a product family. Lines may be organized as:

  • A cluster, showing each family revenue trend as a separate line or area. For areas, the surfaces appear on top of one another and may overlap.

  • A stack, showing each family revenue trend as a line positioned relatively to the previous family trend. For areas, each visible surface represents the actual the revenue value.

  • A 100% stack, showing how each product contributes to the overall revenue for the quarter. For areas, each visible surface represents the revenue contribution to the overall revenue for the quarter.

If no Column is provided, this chart shows the summed revenue for all products as a single line.

Combined

SUM(Sales), COUNT(Products)

Year, Quarter

(Measures), Product_Family

This chart combines a Column chart displaying the first measure (Sales by Quarter) and a Line chart displaying the second one (Number of Products by Family by Quarter). Each measure is configured a separate axis that supports stacking.

Donut (Pie)

SUM(Sales)

Year

Product_Family

Show the distribution of the revenue by product family as a multi-ring donut, each ring representing one year.

If no row is provided, a single pie or donut shows the product revenue distribution by family.

Sunburst
Treemap

SUM(Sales)

Product_Family, Sub_Family, Brand

N/A

Show as a series of concentric rings (sunburst) or nested rectangles (treemap) the distribution of the revenue for the product families, sub-family and then brand.

Gauge

SUM(Sales)

Brand

Year

Show a series of gauges representing the revenue for each brand and for each year. Each gauge has colored ranges and goals indicators.

Number

SUM(Sales), Target

N/A

N/A

Shows a single revenue numeric value, with an indicator giving the variance against a target value, which may be provided as a literal or as a second measure.

Manage charts

Charts in the list support the following operations:

  • Open a chart by clicking it in the list.

  • preview Preview a selected chart. This opens the chart in a new browser tab.

  • copy Copy a selected chart. When copying a chart, you are prompted for the name of the new chart.

  • rename Rename a selected chart. Note that when renaming a chart, the incoming references to this chart are not automatically updated.

  • delete Delete selected chart. This operation cannot be undone.

Renaming or deleting a chart prevents a dashboard using that chart to display it. These two operations must be performed with care.