Charts

In the header and footer, you can add all the inline charts such as sparklines, bullets, range plots, dot plots, and other unique charts such as donut charts and progress bars. Let's take a detailed look.

1. Adding the chart

STEP 1: Click on Header & Footer option in the Design tab. Choose Chart from the Type dropdown.

Inserting a chart

STEP 2: You can choose whether to replace the current container or insert the chart into a new container that is to the right/left/top/bottom of the current container. Let's insert a chart to the right of the existing cell.

Inserting a new container

STEP 3: A bullet chart gets inserted by default as we have 3 measures. If you have a single measure, a bar chart is inserted.

Chart inserted

STEP 4: The Customize ribbon is enabled when a chart is inserted. We've changed the chart to a donut chart. Learn more about header chart customizations.

Customization options

2. Data selection

Note that by default, the table is greyed out as shown in the image.

Table is greyed out

On hovering over the chart, the data selection button appears.

Data selection option

Click on the change data symbol to open the 'Data Selection' dialog box. The data source used to render the chart can be set using the methods listed below:

- Using data from rows

- Using data from columns

- Manually selecting the cells required for the chart

2.1. Data from rows

STEP 1: To render the chart using row data, click the Row button. You can manually select the row categories that will contribute to rendering the chart.

Click on the 'Clear' link to reset and remove all the selected rows.

Row category selection

STEP 2: After clicking OK, notice that the rows used as the data source for the chart have been highlighted.

Chart rendered using row selection

2.2. Data from columns

STEP 1: To render the chart using column data, click the Column button.

Column data selection option

STEP 2: Use the checkboxes to select the column dimensions and select measures from the dropdown. These dimensions and measures will be used to render the chart.

Click on 'Clear' to reset and remove the columns that have been selected.

Selecting column dimensions and measures

We've also opted to change the chart type to a bullet. Notice that the columns used as data source for the chart have been highlighted.

2.3. Manual data selection

You can refer to visual measures, formulae, forecasts, simulations, and data inputs in header charts and KPIs.

STEP 1: To render the chart using manual data selection, click the Manual button.

You have 3 options for manually selecting the data for header charts:

• Dynamic: You can select rows from the table to populate the chart on the fly. The chart is rendered dynamically as the selection changes.

Dynamic data selection option

• Partial select: The selected rows are shown as a portion of the grand total row in the chart, essentially the grand total and the contribution of the selected rows.

Partial select option

Chart rendered based on partial selection

Partial select is only available in the Reporting Matrix.

• Random selection: You can manually select individual cells that will be used to drive the chart. Each selection will be rendered as a separate bar.

Random selection

Random cell selection

3. Chart types

There are a number of chart types like Donut, Sparkline, Bullet, etc. that can be inserted in the header. Let's see how to add or change them.

• Changing the chart type

If your report has a single measure, a bar chart is inserted in the header by default. For two measures or more, a bullet chart is the default chart. This can be changed from the Data Selection dialog box.

Some chart variants are not shown here but can be accessed from the toolbar.

Chart type options

We've changed the bullet chart to a donut.

Chart type changed to donut

• Browsing chart types

Use the arrow buttons on either end of the header to browse the supported chart types and select the one best suited to visualize your data.

Browsing chart types

• View and select charts from the toolbar

You can also view and select all the supported chart types and their variants from the toolbar as shown in the image below.

Selecting the chart from the toolbar

• Progress bar charts

If two data points are selected, you can also use variants of the progress bar such as conditional bar, angular bar, and donut bar.

Progress bar

4. Customization options

Most customization options are already covered in the working with charts section. The customization options unique to header charts are covered here.

4.1. All chart types

Legend config

By default, the legend is shown on the right of the chart, you can change the position to the left or turn it off. Click the Legend config button in the Customize ribbon to change the legend.

Legend config for header charts

When the legend is turned off, the chart will be rendered as shown in the image below.

Legend disabled

Dimension Label

By default, the chart’s dimension label is hidden. To display it, click the Show 'Dimension Label' button in the Customize ribbon.

Dimension Label for header charts

When the dimension label is turned on, the chart will be rendered as shown in the image below.

Dimension label enabled

4.2. Styling donut chart

The appearance of the donut chart can be customized by clicking on the Appearance option. You can select the color for each arc, set the arc size, and apply a gradient.

Appearance customizations

• When a gradient is applied, you can select the gradient color, and the chart gets updated as shown.

Gradient applied

• When more than 5 categories are selected, the 'Enable others' option is activated. Even though six regions were selected, only five are displayed in the chart. When the 'Enable others' property is set, you can see a segment in the donut called 'Others' which visualizes the sum of the values apart from the top 5 categories. That is, if there are 10 categories added, the last 5 categories will be consolidated and shown as 'Others'.

Enable others

• The name 'Others' can be modified by clicking the 'Pencil' icon and entering a relevant name in the text field.

Customizing the 'Others' category

• The arc size can be customized using the 'Arc size' dropdown. The available options are Small, Medium, Large, and Extra large.

Changing the arc size

4.3. Styling progress bars

Progress bar appearance can be customized as shown below. You can define positive and negative colors using a color picker.

Setting the color scheme for progress bars

4.4. Styling sparklines

In the sparkline customization toolbar, explanations for Appearance, Null display, Marker, and Show label are covered in the Working with charts section.

Let's look at the Data config option.

i) Select the row grand total and choose the sparkline chart type with the area spline variant. You can see the sparkline chart in the header as shown below.

Sparkline on selecting a row

ii) Click Data config. In the dialog box, you can see that all the measures are selected. Let's display only the Unit Price measure in the header. Uncheck the other checkboxes. Select a different color using the color picker if needed. Notice how the chart gets updated.

Selecting measures and setting the chart color

In the next section, we'll be covering adding KPI cards.