Add and Customize an Indicator Report Item
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
- Open your report and locate the Item Panel on the left side of the designer.
- Scroll to the KPI category and select the Indicator report item.
- Drag and drop the Indicator onto the report canvas.
- After placing the indicator, the Properties Panel on the right automatically displays the configuration options for the selected indicator.
2. Configure Basic Settings
You can customize the appearance of the indicator container to match your report design.
- In the Properties Panel, navigate to the Basic Settings category.
- Adjust the Border Style, Color, and Width properties to visually separate the indicator from other report items.
- Use the Background Color property to apply a fill color to the indicator container.
3. Assign Data and Measurement Values
To make the indicator functional, link it to your dataset.
- Navigate to the Indicator Value section in the properties panel.
- Click the Data icon or dropdown to assign a field from your dataset, such as
SalesAmountorResolutionTime. - To apply dynamic logic, click the Expression icon to create a custom formula.
- 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.
- If you select Percentage, define the Minimum and Maximum values. You can also configure these values using expressions to create dynamic thresholds.
4. Select Indicator Types and States
Bold Reports provides several predefined indicator sets, including shapes, directional arrows, and traffic lights.
- Locate the Indicator Types property.
- Select a predefined indicator set from the dropdown, or choose Custom to create your own states.
- To customize how the icons change based on data values, configure the Indicator States property.
5. Customize Individual States
Each state represents a specific range of data values.
- Click the Edit (Pencil) icon next to the Indicator States property.
- 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.
- To create additional thresholds, click the Add (+) icon. A new state is added with a default circle icon.
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)