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 :

• Version 5.0.0 requires at least Grafana 12.0.0
• version 4.0.0 requires at least Grafana 11.0.0
• version 3.0.0 requires at least Grafana 10.0.3
• version 2.8.0 requires at least Grafana 9.0.0
• version 2.6.0 requires at least Grafana 8.5.0
• 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)
• Shared tooltip doesn't seem to work with latest grafana version
• If there is a discrepancy in the tooltip between elapsed mode and the real date, if you're using a MySQL database, please read this issue as it might solve the problem.

Configuration

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

URL

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.
• Fallback URL (optional) : image to display if there is an error while loading the "metric" image.

Image options

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

• Auto fit : compute the width and height of image in order that the serie fit in the entire panel. Enabling this option will disable Image width and Image height.
• 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. The Alt field will be used if there is a problem loading the image and the fallback isn't set or have itself a problem.

Shared crosshair options

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

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

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

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

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

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

"Single fill"

One result with "single fill" disabled

Overlay

Underline

Shared crosshair support

Shared tooltip support

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

Credits

Logo for the plugin was found on iconfinder (now freepik ?) (image icon can't be found anymore) and was under MIT license.
Slideshow is under MIT license.

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

Plugin development : resources

• Documentation
• "Storybook"
• Release workflow
• Styling