Skip to content
Alexander Velikiy edited this page Apr 13, 2021 · 28 revisions

Installation

For more information, visit the docs on plugin installation .

Demo

See the Demo

Getting Started

1. Dataset

Suppose you have dataset in table format:

image

To debug responses from datasources, you can use Grafana Table

2. Query

Creating a new Progress List Panel with query like this

image

3. Options

Default options example:

image

4. Customization

You could customize Progress List by using options:

Columns

  • Key column - selecting the key column. Values from the selected column will be used to provide titles for progress-bars.
  • Skip columns - removing columns from progress-bars.

image

Example:

image

Tooltips

  • all series - tooltip will show current values of all series and highlight a serie that is under cursor
  • single - tooltip will show only value of a series under cursor.

image

image

Appearance

  • Sorting - sort progress bars in ascending or descending order
  • Limit - limit the number of displayed progress bars to prevent panel freezing (50 by default)

image

Value Labels:

  • Type - absolute or percentage values formats. Shows how many percent the value is from maximum in percentage type.
  • Prefix - symbols before value label
  • Postfix - symbols after value label
  • Size - Value label font-size in pixels (14px by default)
  • Decimals - to set decimal precision
  • Null Value - override null values in data

image

image

Key Labels:

  • Title Type - Separate title line or inline formats to display bar and labels (Separate by default)
  • Size - Label font-size in pixels (14px by default)
  • Alias - a way to rewrite label. Use $__key variable to access the original title. You can use HTML here.

image

image

Coloring:

  • Opacity - set bars opacity (0.5 by default)
  • Type = pallet to set bars color by build-in Grafana pallet
  • Type = thresholds to define two threshold values. <25 = Red, 25:60 = Orange, >60 = Green

image image image

  • Type = key mapping to determine how each key should look like

image image