Plugins 〉Dynamic image panel

Panel
community

Dynamic image panel

  • Overview
  • Installation
  • Change log
  • Related content

Marketplace Downloads CI CodeQL

Grafana image panel

Display an image by concatenation of an URL, a metric and a suffix.
The result will be : baseURL + icon field + suffix.

Note : if new options doesn't show up or plugin seems in an older version, please uninstall, reinstall and then restart grafana (or if using docker, run a new container using the latest version of the plugin in GF_INSTALL_PLUGINS env variable)

Configuration

If queries select multiple fields, use the outer join transform.

URL

configuration panel

Options for building image URL :

  • Base URL (optional) : the start of the URL where to fetch image. Can be left empty if icon field already contains the base URL. This option support variable.
  • Icon field : field that contains the name of the image. The special value First non time field will use the first non-time field it finds. This is the default value.
  • Suffix (optional) : string to add at the end. This option support variable.

Image options

configuration panel

Options that allow to choose how the image will be displayed :

  • Image width : the width of the image. This option support variable (beware that it needs to be a number)
  • Image height : the height of the image. This option support variable (beware that it needs to be a number)
  • Single fill : if the query have a unique result, allow to fill the panel instead of using width and height above
  • Alt field : field to use as alt. The special value Use icon field will use the same field as Icon field. This is the default value.

Image tooltip options

configuration panel

Options to add and customize a tooltip :

  • Include tooltip : a tooltip will be display when the mouse hovers over the image
  • Include field : include a field value in the tooltip text
  • Tooltip field : select the field values to display in the tooltip. The special value Use icon field will use the same field as Icon field. This is the default value.
  • Include date : the tooltip will include the date and time
  • As elapsed : the date will be displayed as an elapsed date (i.e. 4h hours ago)

Overlay options

configuration panel

Allow adding colored square as overlay on the corner of each image. Color is bound from values. By default, color is light transparent grey.
Binding behaves this way :

  • If all values declared in binding are numbers AND guess value type from data are also numbers, then it acts like grafana's threshold.
  • Otherwise, it is a simple mapping.

Note : when leave an input field, values are sorted and empty input are removed.

Options for binding :

  • Overlay field : select the data field to use for binding (time fields are removed). If No overlay is selected, overlay will not be shown.
  • Position : select the position of the overlay.
  • Width : allow to select the width of the overlay (in pixel or percent of the image size).
  • Height : allow to select the height of the overlay (in pixel or percent of the image size).
  • Binding : allow to choose the color for each values. Allow also to choose color for unmapped values.

Underline options

configuration panel

Add a field value as underline. If text is wider than image then it will be truncated.

  • Underline field : field to use as underline. If No underline is selected, then underline will not be displayed.
  • Text size : size of the text.

Screenshot

screenshot screenshot screenshot screenshot screenshot

Install

Follow instructions from grafana plugin web page

TODO

  • Use the same tooltip as graph panel
  • Auto select first field instead of having a 'First non time field'

License

  • Color binding component is a modification of grafana's ThresholdsEditor thus under Apache 2.0 license.

Credits

Logo for the plugin was found here and is under MIT license.
Github workflows are from grafana and under Apache 2.0 license

Plugin development : resources

For more information, visit the docs on plugin installation.

Changelog

2.3.0

  • Add a gap between image.
  • Add an underline.
  • Fix tooltip #15.
  • Fix image size when single fill enable
  • Allow using variable for base URL, Suffix, Image width and Image height #14.
  • Now when something is wrong an error is thrown instead of displaying a div. This will cause grafana to display the error in the top left corner of the panel.
  • When an image fail to load, a warning is logged containing the url see #11.
  • Possibility to add a square as overlay over pictures. Color can be chosen with a mapping for field values #19.
  • Fix gap #31

Note : if new options doesn't show up or plugin seems in an older version, please uninstall, reinstall and then restart grafana (or if using docker, run a new container using the latest version of the plugin in GF_INSTALL_PLUGINS env variable)

2.2.0

  • Base URL and suffix are optional.

2.1.1

  • Change default values for tooltip and date inclusion.

2.1.0

  • Allow to select a field to use as alt image attribute.
  • Add a configurable Tooltip.