Adding Charts to a Report
  • 22 Jan 2024
  • 9 Minutes to read
  • Dark
    Light

Adding Charts to a Report

  • Dark
    Light

Article summary

This article demonstrates the process of adding graphical charts to a Report to represent the data visually. A column in the Report must be grouped to add Charts to a Report. Grouping allows users to organize data more effectively and perform aggregate calculations on grouped data.
This article includes the following sections.

  • Steps to add Charts to Report
  • Available Charts
  • Chart Configurations and Settings
  • Calculating Values in Percentage on Charts

Steps to add Charts to Report

The following section gives a step-by-step guide on how to group and add a Chart to a Report.

  1. Create or Open an already created Report.
  2. Hover the Mouse over the Data Field header row and select the Group icon. The Data gets grouped according to the data within the column. Refer to the following GIF for reference.
  3. Navigate to the Views and click on Add. A list of all the charts will populate to add.
  4. Select the Type of Chart. Give a Chart Title in the new dialog box. Click Ok. The Chart will be added.
  5. All the configurations of the Chart are provided in the further section of the article.

Available Charts

The following table includes all the charts available to add to the Reports.

Chart TypeDescriptionChart
AreaA chart that displays data as filled areas between the data points and the axis suitable for showing trends and patterns over time or continuous data.
BarsA chart type with vertical or horizontal bars representing data values suitable for comparing individual items or categories.
BubblesCircular markers representing data with two numerical dimensions help display relationships between variables.
BulletA specialized chart type designed to display progress toward a goal or target.
ColumnsSimilar to bars, but with vertical orientation, it is commonly used for the same purposes as bar charts.
DotsData points are represented as individual dots, which is helpful in visualizing discrete data.
LinesA chart with points connected by lines shows trends or patterns over time or continuous data.
Mixed BarsA combination of bar and line charts allows simultaneous comparison of categorical and continuous data.
PiesA circular chart that divides data into slices, showing proportions of a whole, ideal for displaying percentage-based data.
RingSimilar to pie charts, but with a hole in the middle, it is suitable for displaying data about a total value.
Simple BarsBasic bar charts with no stacking or grouping, useful for straightforward data comparisons.
Stacked BarsBars stacked on each other represent multiple categories' values as a whole.
Win-Loss BarsBars representing positive and negative values are commonly used to compare wins and losses or gains and losses in a competition or financial context.

Adding Default Colors to the Charts

Users have the ability to add default colors to the chart by configuring it in a single place, i.e., System > Settings > Chart Settings > Default Colors. 

Click on the ADD icon to add a color. Similary users can add multiple colors to the Chart Settings and the chart will then adhere to the specified color series.


Chart Configurations Settings

Upon adding charts to the Reports, the right-side properties panel automatically opens up, facilitating the configuration of the reports. The following sections describe all the configuration settings available for all the Reports. 

Chart Data

Setting NameDescription
Series 1 The Series is what the Chart will be grouped by. If a Report has multiple groupings, they will be available to choose from in this drop-down. As well as adding a series to the Chart to make a Multi Series Chart.

Chart Settings

TitleName of the Chart
Show TitleWhen selected, this adds a Title above the Chart
Chart Labels

Name and ValueDisplays both the name and value of the corresponding data as the label

NameDisplays only the name of the corresponding data as the label

ValueDisplays only the value of the corresponding data as the label

NoneRemoves the label
Series NameOnly available on the Mixed Bars chart

Area Serires NameAllows to pick the Series for an additional Area chart, which will be shown on the Bar chart

Line Series NameAllows to pick the Series for an additional Line chart, which will be shown on the Bar chart
Show Data ButtonDisplays a button in the upper right corner of the Chart that will open a Report showing the data sets. This is to be used on Pages.
Put any group over X into 'Other' categoryGroups data into an 'Other' column if the value exceeds a specified amount.
Specify Step ValueStep value is the frequency at which the values on the X-axis are divided.'
When Enabled, it will allow users to specify the interval between the values on the X-axis of the chart. 
Shorten Long Axis LabelsShortens the labels to a maximum length. 
Use Custom Colors

User Defined Colors


NameMust specify the exact name of the corresponding data field


ColorAllows color customization for the data field
Base ColorsBy default, the chart follows the colors configured under the System > Chart Settings > Default Colors.
The 'Base Colors' setting overrides the default colors for the data set.
Show TooltipsAllows information to be displayed while hovering over data sets within the Chart
Tooltip Type

Name and ValueDisplays the name and value of the corresponding data while hovering over a Chart.

NameDisplays the name of the corresponding data while hovering over a Chart.

ValueDisplays the value of the corresponding data while hovering over a Chart.
Stack DisplayUsed on Multi Series Charts to stack data.
Set Minimum ValueSets a minimum value for the Chart.
Set Maximum ValueSets a maximum value for the Chart.
Change Label OrientationChange the angle of a label by a specified degree. This assists in making room for more extended labels. 
Show Element LabelsThe total count/avg/sum of the data set on the corresponding column, pie slice, etc.
Sorting

NoneThe Chart does no additional sorting of original results from the Data Source.

Value AscendingData sets will be displayed by value, smallest to largest.

Value DescendingData sets will be displayed by value, largest to smallest.

Label AscendingData sets will be displayed by label, alphabetically ascending (A-Z)

Label DescendingData sets will be displayed by label, alphabetically descending (Z-A)
Large Data Render ThresholdSpecify the number of data points that will switch the Chart from SVG to Canvas. This will turn off specific animations and limit label axis ticks and gridlines to provide a quicker rendering of large charts. The default value is 200.
Take First CountLimits the data groups displayed to the specified number. The default is All or 0.
Entries Axis LegendProvide a name for the Entries axis (Example: Department).
Values Axis LegendProvide a name for the Values axis (Example: Count of Employees).

Download > Show Data Table

Bubbles SettingsOnly Available on Bubbles Charts.


Minimum Point SizeThe minimum pixel size of bubbles.


Maximum Point SizeThe maximum pixel size of bubbles.

Legend Settings > Legend PositionDisplays a Legend of the Chart in the Chart's North, South, East, or West sections.

Number Formats


Label FormatChanges the format of the number displayed on the chart label.

FixedShows the value as it is without any formatting.

NumberIt adjusts the decimal place in a numeric value to represent it in thousands (K) and millions (M) only when the number contains more than three digits.

PercentConverts the value into percentages by multiplying it by 100. It does not calculate the actual percentage based on Overall data. To calculate the percentage, refer to the next section of the article.

CurrencyAdds the "$" dollar sign and adjusts the decimal place in a numeric value to represent it in thousands (K) and millions (M) only when the number contains more than three digits.


PrecisionPrecision allows to define the accuracy of the numerical value to be shown on a label. The accuracy of the numerical values is affected based on the selected Format and the Precision Value. By default, the Precision value is set to 2. The higher the precision, the more accurate the number will be shown on the chart before rounding it off.

Note: A table with examples of various "Precision" settings is provided below.


Tooltip FormatA Tooltip is a graphical user interface element that shows a small display with information when the mouse is hovered over the chart.
The settings mentioned for the Label Format are also included here.
Bullet SettingsOnly Available on Bullet Charts.

Target ValueDefines the Target value to the Chart.

Ok ValueDefines a fair value to the Chart.

Good ValueDefine the acceptable value on the Chart.

Bullets Type


PositiveMoreThis is a standard Bullet chart.


PositiveLessInverts the axis, and the color of the Chart also throws validation at Ok Value to set more than Good Value and less than the Minimum Value.


NegativeMoreThis inverts the PositiveMore chart. The Chart should be read from right to left.


NegativeLessThis inverts the PositiveLess chart. The Chart should be read from right to left. Reverses the Chart's color and throws validation at the Ok Value to set more than Good Value and less than the Minimum Value.

Bullet Label FormatChanges the format to the number or percentage displayed on the label.

Bullet LayoutChanges the Layout of the Bullets to Horizontal or Vertical.

Bullet Title PositionSets the Title Position to the left or the right side of the Chart.

Range ColorsAllows color customization to Ranger bars.

Measure ColorsAllows color customization to Data bars

Marker ColorsAllows color customization to Target bars.
Win Loss SettingsOnly Available on Win Loss Charts.

Threshold ValueDifferentiates between Win and Loss.

Win LabelDisplays the Name of the Win Label.

Loss LabelDisplays the Name of the Loss Label

The following table showcases the example of the "Precision" Setting under the Number Format.

Fixed NumberPrecision ValueResult


68
Default68
070
170
2-968
736Default740
0740
1740
2740
3-9736
8672Default8.7K
09K
19K
28.7K
38.67K
4-98.672K

The following section can only be implemented in v8.13 and above.

Calculating Values in Percentage on Charts

In the properties panel of the Charts, the Number Formats settings offer the option to display values as percentages. When you select the percentage format, the Chart will automatically multiply the underlying numerical values by 100 to represent them as percentages. For instance, if there are two equal groups, each with a count of 2 rows, the total count will be displayed as 400%, and each group will be represented as 200%. Refer to the image below for a visual reference of this behavior.

Configuration

Users must generate a new Series in the Reports to calculate the percentage by adding a Sub Total. Follow the steps mentioned below to calculate the data in percentage.

  1. Navigate to the Report where the charts are added. Under the Views header, click on Data.
  2. From the Properties Panel > Results > Sub Total. Click on Add.
  3. Add Sub Total dialog box will open. Configure the settings based on the following table.

    Setting NameDescription
    Field Allows to select the column of the Report
    Displayed NameThis will be shown as the Series name on the Chart Properties Panel
    Aggregation TypeThe method used to aggregate data that will be used to generate the Chart.
    Note: Sum, Average, Minimum, Maximum, and Median only work when the selected Field has numerical data.

    CountCounts the number of rows under the group

    SumAdds all the values under the group

    AverageCalculates the average of values in the group

    MinimumRetrieves the maximum value from the group

    MaximumRetrieves the minimum value from the group

    MedianCalculates the median value in the group
    Show Value as PercentageThis is a compulsory field to show the data in percentage. Enabling this option will calculate the percentage equating the total to 1. Thus, if there are 2 equal groups, the total count will be equated to 1%, and each group will be equated to 0.5%. The percentage values will reflect the aggregation type chosen for the Series. For example, if the aggregation type is set to 'Sum,' the percentage will be calculated based on the sum of the values.
    Format Changes the format of the number displayed at the end of the group header row. A group header row is a common row across all the columns displaying the Group name.
    Decimal PlacesSpecify the number of decimal places for numeric values
    AppendAllows to append the calculated data by a constant number
  4. After configuring the Sub Total Settings. Click on Ok to save. Refer to the following image for reference.
  5. Above the Report Header. Click on the Refresh Preview. This will populate the calculated data on the group header row.
  6. Under Views, select the Chart to add Sub Total data as a new Series.
  7. From the Chart Properties Panel > Chart Data. Under Series 1, pick the newly created Series. This will populate the Chart with a percentage label.
  8. Under Chart Settings > Chart Label > Pick Name and Value. Scroll down to Number Format > Label & Tooltip Format > Pick Percentage for both. This will multiply the percentage value by 100. 

Feature Changes

DescriptionVersionDateDeveloper Task
 Added the ability to display a calculated percentage value on Charts8.13September 28, 2023[DT-038119]

For further information on Reports, visit the Decisions Forum.

Was this article helpful?