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 a 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)
  • version 2.6.0 will require at least Grafana 8.5.0

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.

Shared crosshair options

configuration panel

These options allow to set a background and border when mouse is over in image. It is also used to highlight image if shared crosshair or shared tooltip is enabled in the dashboard.

  • Background highlight color : the color to use as background image for shared crosshair (default to white with transparency)
  • Border highlight color : the border color to use for shared crosshair.

Notes :

  • You must enable tooltip in the plugin configuration for shared tooltip to actually show a tooltip
  • shared tooltip doesn't work in slideshow mode (though shared crosshair did work), that means tooltip won't show up when hoovering over another panel
  • It correlates on time, and work with timeseries and candlestick panels.

Slideshow options

configuration panel

Options for slideshow :

  • Enable slideshow : enable the slideshow.
  • Duration : configure how long (in milliseconds) an image will be shown. Can't be 0.
  • Transition : which transition animation to use
  • Transition duration : how long the transition will take (in milliseconds). Can't be 0.
  • Pause on hover : when enabled, if the mouse is over an image, the slideshow will pause.
  • Infinite : when enabled, slideshow continues from start when finished

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)

Image link options

configuration panel

It allows to open a link into a new tab. It works like the image URL : it concatenates 3 elements (a base URL, a metric value and a suffix).

  • Click to open : enable link support.
  • Open in new tab : allow to open link in a new tab. Default is enable.
  • 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.
  • Link field : field that contains the value. The special value Don't use a field allow not to use any field, the result will be the same link for all images. This is the default value.
  • Suffix (optional) : string to add at the end. This option support variable.

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 so beware that when choosing the color bindings are not reordered.

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 value. Allow also to choose color for unmapped values.

Note : when leave an input field, values are sorted and empty input are removed so beware that when choosing the color bindings are not reordered.

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.
  • Text align : horizontal underline alignment. Default to left.
  • Binding field : allow to use a field to bind text color.
  • Binding : this configuration will appear if Underline's Binding field is set to a field. It will allow to map values to color.

Note : when leave an input field, values are sorted and empty input are removed so beware that when choosing the color bindings are not reordered.

Screenshot

Multiple results

screenshot

"Single fill"

screenshot

One result with "single fill" disabled

screenshot

Overlay

screenshot

Underline

screenshot

Shared crosshair support

screenshot

Shared tooltip support

screenshot

Install

Follow instructions from grafana plugin web page

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.
Slideshow is under Apache 2.0 license.

GitHub's workflows are from grafana and under Apache 2.0 license

Plugin development : resources

Installing Dynamic image panel on Grafana Cloud:

For more information, visit the docs on plugin installation.

Changelog

2.7.0

  • Add a toogle to enable/disable infinite slideshow (#65 thanks to @dpooley)

2.6.0

  • Support for "shared crosshair". Image background and border will according to the configured colores (default to #FFFFFF10 for background and #FFFFFF20 for border) (#16 #51).
  • Support for shared tooltip (#52).
  • Use grafana tooltip instead of title attribute when slideshow is disabled (to make shared tooltip working).
  • Hoovering over an image will now use "Shared crosshair" options.
  • Require at least Grafana 8.5.0.
  • Errors are shown in the panel instead of throwing an error, this avoids to refresh while configuring panels (#57).
  • When adding a new binding, it will get focus (#60).
  • Can now choose to open link in new tab or not. (#62)

2.5.0

  • Allow to choose underline horizontal alignment (#46).
  • Allow to map underline text color based on metric value (#46).

2.4.0

  • Allow to open an URL by clicking on the image #33.
  • Multiple image can now see with a slideshow #35.

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.