Tried and tested: the Grafana Canvas panel. How far could I take it?

Read this review to learn from my experiences with the current version of Grafana’s Canvas panel. We’ll not only explore its standard functionality, but also push the boundaries of what’s currently possible with it.

Introduction

Recently, I spent a few hours experimenting with Grafana’s new Canvas panel, to determine its viability as an alternative to the Flowcharting plugin. Although that plugin has been available for a few years already, its development has recently stalled. Therefore, it seems a good moment to assess the capabilities of the Canvas panel, and discover the extent to which it can serve as a solid alternative.

Additionally, we are often asked to migrate old-school historian systems to Factry Historian. In addition to time-series and event data, there are occasions when we also need to migrate existing trends and visualisations. Although the migration of trends and status panels is quite easy, traditional SCADA or DCS-type visualisations (such as reactors, pumps, tanks) can be somewhat of a challenge.

Read this blog post to learn from my experiences with the current version of the Canvas panel, explore the basic features, and see how far we can take it.

The subject of this experiment is Grafana 11-pre.

The Good

Let’s start with the functionality that is already available out of the box, including:

• Metric Value
• Text
• Ellipse
• Rectangle
• Icon
• Server

This allows us to build simple graphical visualisations that go beyond status panels or time-series trends. We can easily add a new element, assign it a measurement, and configure its visualisation by choosing a fixed or dynamic background (allowing for dynamic background, based on the value of the same or another measurement), border, text (sizing, alignment) and layout (alignment, scaling).

Each element can furthermore be connected to other elements using Connections, which by themselves can also be made dynamic by changing the colour and size based on a fixed value or a measurement from your queries.

In this example, we see a fixed background on the Canvas panel, and various Metric Values that display measurement data coming from the PLCs into Factry Historian. Metric Values have conditional colouring.

The Bad

The ‘Icon’ element offers significant flexibility as it allows for SVG format icons to be loaded and placed within the Canvas. Grafana includes a set of default icons that can be dynamically configured to change colour based on measurement values. This is particularly useful for indicating operational statuses, such as whether a pump is running. As of this writing, only 3 “IoT type” icons are included, namely a faucet, pump and drone.

Additional icons can be imported via a URL. Although in theory this opens up lots of capabilities, my experience is that public SVGs often have a hardcoded fill colour, limiting the functionality of dynamically colouring the icon in Grafana.

Furthermore, this would introduce an additional dependency on an HTTP server, somewhere on a place that is accessible for the Grafana dashboard end user.

In short, expanding this functionality and potentially including a broader default set of icons related to Industrial IoT / process equipment, is necessary.

To expand the functionality to custom icons, we will need to:

1. Search for free to use SVG icons on sites such as svgrepo.com
2. Edit them using your favourite editor to remove the hard coded fill colours
3. Upload/symlink them to the “$GRAFANA$/public/img/icons/iot/” folder
4. Reload the Grafana browser window

For example:

• Download https://www.svgrepo.com/svg/109133/valve
• Open the file and remove the fill attribute fill=”#000000"
• Save the file and place/upload it in the folder $GRAFANA$/public/img/icons/iot/
• Reload the browser

Adding our newly added valve icon.

Dynamically changing the colour of our new valve icon.

Bottom line: with a minimal bit of work, we can make a custom icon available for our Canvas dashboard users.

The Ugly

What’s still missing in our exploration is the possibility to animate icons based on your data. Animations would allow you to display a running pump or agitator, or to show the current fill level of a vessel.

A couple of experimental animated elements are already available when toggling the experimental setting. Two additional elements are available:

• Wind Turbine: the rotation speed of the blades can be set dynamically, for example based on an ‘RPM’ tag from a wind turbine.
• Drones: similar to the wind turbine, the behaviour of the element mirrors the drone’s blades

While they are a good demonstration of more advanced animation capabilities, their use case in the industrial settings is limited, unless you happen to operate wind turbines or drones.

Unfortunately, for now, animated objects in the Canvas panel have to be hardcoded in Grafana’s frontend code, as can be read in the Github issue. So, let’s try that.

The Windturbine example that ships with Grafana provides a good starting point.

Let’s begin by downloading a free to use SVG from SVG Repo. For my example, I chose a flask icon. Next, we extract the relevant SVG elements into the .tsx file and build our animation code, following the example code from the Windturbine.tsx file as a guide. You can find this example file on Gist.

Finally, we add a reference to the file in the registry. Unfortunately, this last step reveals that the current implementation is not suitable for production use, as it is impractical to recompile Grafana’s frontend every time a new custom icon needs to be added.

The current implementation is not suitable for production use, as it is impractical to recompile Grafana’s frontend every time a new custom icon needs to be added.

Once added, we can leverage Grafana’s capabilities for conditional formatting, similar to the valve example previously discussed. In this case, if the flask level is below 50%, the colour changes to red, and when it exceeds 80%, it turns green.

In Conclusion

Let’s recap: we started by exploring the basic out of the box functionality. We then created custom SVG icons, which can expand the standard icon set shipped with Grafana. Finally, we added an experimental step by creating a custom animated element and plugging this into the Grafana frontend source code.

It still needs some work, but despite this, we are optimistic about the future of the Grafana Canvas plugin for several reasons:

• The panel is developed by Grafana, known for its excellent track record in maintaining their panels and data sources, including ensuring backwards compatibility.
• The panel ties in really well with functionality that has become available in the major Grafana releases of the last few years: panel overrides, menu structure, etc.
• The panel currently includes only a limited number of icons, making it somehow restricted for industrial use cases at Factry. However, this is countered with it being incredibly easy to upload your own SVGs.