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
a) Click on 'Header & footer' in the 'Design' tab.
b) Choose 'Chart' from the 'Type' option.
c) By default, a donut chart gets inserted based on the data fields added to the report. Here we have a donut chart for the 4 quarters.
d) You can see the customization options present in the 'Customize' tab. Appearance and Legend config are covered in customization options.
2. Data selection
Note that by default, the table is greyed out as shown in the image.
On hovering over the chart, the data selection button appears.
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:
a) Using data from rows
b) Using data from columns
c) Manually selecting the cells required for the chart
a) Data from rows
To render the chart using row data, click on the 'Select Rows' dropdown.
The 'Select Rows' dialog box opens. You can select the rows that will contribute to rendering the chart.
Click on the 'Clear' link to reset and remove all the selected rows
After clicking on 'OK', the selected categories are displayed in the Data Selection dialog box. Click on 'Create' to render the chart.
Notice that the rows that are used as data source for the chart have been highlighted.
b) Data from columns
To render the chart using column data, click on the 'Select Columns/Measures' dropdown.
Select the columns and/or measures that will be used to render the chart.
Click on 'Clear' to reset and remove the columns that have been selected.
After clicking on 'OK', the columns that are selected are displayed in the Data Selection dialog box. Click on 'Create' to render the chart.
Notice that the columns that are used as data source for the chart have been highlighted.
c) Manual data selection
To render the chart using manual data selection, click on the 'Manual Selection' link.
2. From the grid, select the cells to be used as data source for the chart, the selection is immediately reflected in the header chart.
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.
a) By default, a donut chart is added to the header if the Chart option is selected. This can be changed from the Data Selection dialog box.
Some of the variants are not shown here but they can be accessed from the toolbar.
The donut chart has now been changed to a Sparkline chart.
b) To easily browse the chart types and variants available, click on the 'Right arrow' in the cell as shown in the image. Notice that in the toolbar it says 'SparkLine'.
The chart has now been changed to a bar chart.
c) You can also view and select all the supported chart types and their variants from the toolbar as shown in the image below.
d) In case two data points are selected, you can also use variants of the progress bar such as conditional bar, angular bar and donut bar.
4. Customization options
Most of the customization options are already covered in working with charts. The customization options unique to header charts are covered here.
a) 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. To change the legend, click on the 'Legend config' button in the Customize ribbon.
When the legend is turned off, the chart will be rendered as shown in the image below.
b) Styling donut chart
The appearance of the donut chart can be customized by clicking on the 'Appearance' option. You can see the dialog box shown in the image where you can select the color for each arc, arc size and apply a gradient.
When a gradient is applied, you can select the gradient color and the chart gets updated as shown.
When there are more than 5 categories selected, the 'Enable others' option is activated. Note that 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'.
The name 'Others' can be modified by clicking on the 'Pencil' icon and entering a relevant name in the text field.
The arc size can be customized by using the 'Arc size' dropdown. The available options are Small, Medium, Large and Extra large.
c) Styling progress bars
Progress bar appearance can be customized as shown below. You can define positive and negative colors using a color picker.
d) 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.
ii) Click on '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.
In the next section, we'll be covering adding KPI cards.
Last updated
