Skip to content

Commit c3f8ad0

Browse files
advanced scenario for progress bar and maximum value
1 parent 56d52a6 commit c3f8ad0

File tree

4 files changed

+32
-1
lines changed

4 files changed

+32
-1
lines changed
42.3 KB
Loading
123 KB
Loading
41.4 KB
Loading

explore-analyze/visualize/charts/metric-charts.md

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ Save your visualization by selecting **Save and return** if you're adding it fro
6666

6767
:::::
6868

69-
## Advanced configurations
69+
## Advanced metric scenarios
7070

7171
### Show trends in Metric charts [metric-trends]
7272
```{applies_to}
@@ -118,6 +118,37 @@ To add trend indicators to your metric visualization:
118118

119119
The metric visualization now shows the secondary metric as a comparison with a trend indicator.
120120

121+
### Show progress by setting a maximum value [metric-progress]
122+
123+
When creating **Metric** visualizations with numeric data, you can specify a maximum value to show progress toward a goal or capacity limit. When combined with the **Bar** supporting visualization option, this displays a progress bar that visually represents how close your current metric is to reaching the maximum value.
124+
125+
| Without progress | With progress |
126+
|--------|-------|
127+
| ![Metric before showing progress](../../images/metric-no-max.png "title =70%") | ![Metric showing progress](../../images/metric-max.png "title =70%") |
128+
129+
To add a progress bar to your metric visualization:
130+
131+
1. Create a **Metric** visualization with a numeric primary metric.
132+
133+
2. Optionally, [customize the appearance of the metric](#primary-metric-options). For example, add dynamic coloring to the primary metric to change colors based on progress: red when below 50%, yellow between 50-80%, and green above 80%. The progress bar will reflect this configuration once you set up a maximum value.
134+
135+
3. Add a maximum value that represents your goal or upper limit. The [maximum value](#max-value-options) can be a static value, a function, or a formula based on your data.
136+
137+
![Metric maximum value option](../../images/metric-maximum-value.png "title =70%")
138+
139+
4. Configure the **Primary metric** appearance to show the progress bar. Depending on the configuration of the primary metric, Lens might automatically set this option for you. If not, complete these steps:
140+
1. In the primary metric configuration, find the **Supporting visualization** option.
141+
2. Set **Type** to **Bar**.
142+
3. Optionally, change the orientation of the progress bar as needed.
143+
144+
5. Apply your changes.
145+
146+
The metric visualization now shows a progress bar indicating how close the current value is to the maximum.
147+
148+
::::{tip}
149+
You can combine progress bars with secondary metrics to show both progress toward a goal and trends over time. To do this, add both a maximum value and a secondary metric to your visualization.
150+
::::
151+
121152
## Metric chart settings [settings]
122153

123154
Customize your metric chart to display exactly the information you need, formatted the way you want.

0 commit comments

Comments
 (0)