Articles in this section

Add and Customize an Indicator Report Item

Published:
Updated:

Indicators are compact visual elements that provide an at-a-glance view of performance, status, or thresholds. This guide helps report designers and business analysts use Bold Reports Web Designer to highlight key performance indicators (KPIs), such as sales targets or support ticket resolutions, using color-coded icons and customizable state ranges.

Step-by-Step Instructions

1. Add an Indicator to the Report

  1. Open your report and locate the Item Panel on the left side of the designer.
  2. Scroll to the KPI category and select the Indicator report item.
  3. Drag and drop the Indicator onto the report canvas.
  4. After placing the indicator, the Properties Panel on the right automatically displays the configuration options for the selected indicator.
    Placeholder: Dragging an indicator from the KPI category to the report canvas.

2. Configure Basic Settings

You can customize the appearance of the indicator container to match your report design.

  1. In the Properties Panel, navigate to the Basic Settings category.
  2. Adjust the Border Style, Color, and Width properties to visually separate the indicator from other report items.
  3. Use the Background Color property to apply a fill color to the indicator container.
    Placeholder: Basic settings category showing border and background color properties.

3. Assign Data and Measurement Values

To make the indicator functional, link it to your dataset.

  1. Navigate to the Indicator Value section in the properties panel.
  2. Click the Data icon or dropdown to assign a field from your dataset, such as SalesAmount or ResolutionTime.
  3. To apply dynamic logic, click the Expression icon to create a custom formula.
  4. Select the Value Measurement type:
    • Numeric: Uses absolute values from the dataset.
    • Percentage: Calculates the state based on a percentage of the range between the Minimum and Maximum values.
  5. If you select Percentage, define the Minimum and Maximum values. You can also configure these values using expressions to create dynamic thresholds.
    Placeholder: Indicator value property with dataset field selection and measurement type dropdown.

4. Select Indicator Types and States

Bold Reports provides several predefined indicator sets, including shapes, directional arrows, and traffic lights.

  1. Locate the Indicator Types property.
  2. Select a predefined indicator set from the dropdown, or choose Custom to create your own states.
  3. To customize how the icons change based on data values, configure the Indicator States property.
    Placeholder: Dropdown menu showing various predefined indicator types like arrows and traffic lights.

5. Customize Individual States

Each state represents a specific range of data values.

  1. Click the Edit (Pencil) icon next to the Indicator States property.
  2. In the configuration dialog, configure the following settings for each state:
    • Icon: Select a shape or symbol for the state.
    • Color: Choose a color, such as green for success or red for critical status.
    • Start Value: Define the lower bound of the state range.
    • End Value: Define the upper bound of the state range.
    • Scale Factor: Adjust the icon size relative to the container.
  3. To create additional thresholds, click the Add (+) icon. A new state is added with a default circle icon.
    Placeholder: The Indicator States edit dialog showing fields for icon, color, start, and end values.

6. Preview and Test

After configuring the indicator, click the Preview button in the top toolbar to view the indicator with live data.

Example Scenario:

If you are tracking Average Resolution Time:

  • 0.00 to 4.00 hours: Green smiling face (Optimal)
  • 4.00 to 8.00 hours: Yellow neutral face (Warning)
  • 8.00 to 12.00 hours: Red frowning face (Critical)
    Placeholder: Final report preview showing a table with indicators representing different performance levels.

Related Articles

Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
Comments (0)
Access denied
Access denied