During the operation of a cloud or data centre infrastructure, the current system status - for example of the cooling infrastructure - is regularly analysed and evaluated. If there is an unfavourable operating status or failure, troubleshooting is carried out. Individuals or teams monitoring such an infrastructure need a quick overview of relevant parameters such as temperatures, server utilisation or data rates. However, as the number of parameters increases, so does the complexity: the process of answering the question „Where is it too warm now?“ quickly becomes confusing and time-consuming, which unnecessarily delays analysis and response.
In this article, we show how measurement data from cloud and data centre infrastructures can be clearly displayed using Grafana's Canvas feature. Canvas panels enable operations teams to quickly recognise deviations from target states and isolate errors in a structured manner. However, the creation of these panels has a number of challenges, which we address here based on our practical experience.
About Grafana and the Canvas feature
For the visualisation, Grafana, an open source application for the graphical visualisation of data from various data sources, is used. Grafana accesses measurement data that is available in a database. The measurement data comes, for example, from sensors in the technical building equipment or measured values from the power distribution in the data centre. Many other values, such as server utilisation, data rates, available memory or tank levels, are conceivable at this point.
Grafana uses this measurement data, for example, to create a diagram in a Dashboard . Figure 1 shows an example panel from Grafana with a diagram.
Figure 1: Example of a diagram in Grafana
A special and relatively new type of diagram is the so-called Canvas. This is used to present measured values in a visually appealing and clear way. It makes it possible to display measured values not only as classic time series, but also to arrange them freely on a customisable surface and present them in a visually appealing way. Elements such as shapes, status displays or even interactive buttons can be integrated. In this way, simple interactive user interfaces (GUIs) can be created in addition to pure visualisations. Although we are addressing application examples from the cloud infrastructure sector in this article, Canvas can be used for a wide range of applications. Figure 2 shows an example of a Canvas panel for controlling a sun blind.
Figure 2: Example canvas panel
However, creating a canvas panel is more complex and less intuitive than classic diagrams, especially for beginners. As we will see below, several steps need to be consciously planned and implemented. It is therefore worth showing some practical experience.
Only a current Grafana installation is required to create and edit the panels presented in this article. To use Canvas, version 11 (Grafana Release 2024-04) or newer and a data source are required. No additional tools are required. All adjustments are made in the integrated „what you see is what you get“ editor. This provides basic elements with different shapes and types that can be used to create visualisations and interactive panels. Table 1 summarises the basic elements.
Table 1: Overview of elements in the Grafana Canvas Editor
Element
Example image
Description of the
Cloud
Text in cloud outline
Ellipse
Text in ellipsis outline
Parallelogram
Text in parallelogram outline
Rectangle
Text in rectangular outline
Triangle
Text in triangular outline
Connecting line
Line with and without arrows at the ends
Text
Text without frame (similar to parallelogram but with transparent background)
Icon
Selection of common icons and symbols
Server
Server icon with customisable status light
Wind turbine with adjustable speed
Interactive button that can communicate with an API using the GET, POST or PUT methods
Drone in different views with adjustable propeller speed
Own pictures
URL path to an image included as the background of an element
1 available if the „Experimental element types“ option is activated.
In most of these elements, text, frame colour and background colour can be inserted statically or controlled by a metric. The official documentation provides detailed examples of working with the editor, the first steps and an overview of the individual aspects of the plugin.
Application examples for the Grafana Canvas
In the following, we present two use cases from the cloud and data centre infrastructure context for using the canvas plugin in Grafana. We show how the panels can be created and what in particular should be taken into account during implementation. Grafana v12.2.0 was used.
In our examples, we transfer existing diagrams with measured values of a system that were previously created based on an SVG image by the marcuscalidus-svg-panel. As this plugin is a third-party solution, a Grafana update can lead to problems that may require debugging and customised solutions. This risk is minimised with the 11 Grafana Release integrated canvas plugin, as the developer community ensures that the function is guaranteed with every release.
Application example 1: Server room
In a server room, we have several air temperature sensors and Power Distribution Unit (PDU) readings for the electrical input power at the server racks. The progression over time can be easily analysed in a diagram (see Figures 3 and 4 for examples). However, it is difficult to assign the measured values directly to a specific location in the room, as this requires a separate room plan.
Figure 3: Room temperatures in a diagram
Figure 4: Electrical input power in a diagram
Figure 5 shows the current SVG panel, which was integrated with the marcuscalidus-svg-panel plugin.
Figure 5: Previous SVG image of the room
A second glance reveals that the current panel is incomplete, as the electrical output is not yet shown here. We are taking this opportunity to revise the panel accordingly and add all the relevant information.
To switch to a canvas panel in the existing setup, in which all metrics are already available, a new panel is first created (see Figure 6). If you are starting from scratch, a new dashboard must also be created.
Figure 6: Creating a new panel in the existing dashboard
In the drop-down menu, the diagram type must be changed to „Canvas“ (Figure 7).
Figure 7: Select „Canvas“ panel type
In the next step, a data source is selected and all necessary metrics (Queries) are inserted one after the other. As we do not want to display a chronological sequence, but only the most recent value, the type must be set to Instant are set. To simplify the subsequent assignment of the measured values to the individual canvas elements, it is advisable to use consistent and appropriate names (Legend) (see Figure 8). Subsequent renaming means that the renamed metric must be reassigned for all elements in which it is used.
Figure 8: Inserted queries with naming
Now we come across the first special case: as we want to display different physical values in the panel, we need several units. A global unit does not make sense in this case, as it would apply equally to all values. Therefore, we leave the global unit of the panel blank and instead set the unit depending on the name using the overwrite or override function. Override-function (see Figure 9).
Figure 9: Customised units for the metrics using overrides
Only now is the existing diagram modelled using the tools available in Canvas. To save time, it is a good idea to treat recurring elements as a group, design them in small groups and only duplicate them later (see Figures 10 and 11). This shows that the variety of available shapes is limited.
Figure 10: Element view of the symbols that are to be duplicated in the group for a rack
Figure 11: Layer view of the symbols that are to be duplicated in the group for a rack
However, after some trial and error, these restrictions quickly turn out to be a blessing, as the resulting chart is very simple and clear. Once we have placed all the necessary elements, we can start to fill the text boxes with life. The next step is to assign an element to a metric (see Figure 12). The assignment can be made in the selected element at Text take place. In addition Source at Field and select the metric by name in the drop-down menu. It pays to name the metric beforehand.
Figure 12: Selecting data sources for the texts
Now that the texts in the elements have been replaced by metrics, our room in Figure 13 is really impressive.
Figure 13: Room floor plan with measurement data drawn with Grafana Canvas
If the option Inline editing is switched on, the elements can be selected and moved outside the editor, which can be perceived by users as unexpected and disruptive. Deactivating Inline editing on a finished panel solves the problem (see Figure 14).
Figure 14: The Inline editing button is only helpful during editing.
Application example 2: Server rack
The assignment of temperature values in a time series diagram is also confusing for a server rack. In this case, an SVG image was also previously used to assign the location of the measuring points (see Figure 15). The SVG image integrated with the marcuscalidus-svg-panel plugin was a scheme taken directly from the project documentation. It was not simplified or customised for the purpose.
Figure 15: Old SVG schema of the server rack
As in the first example, a new panel is created in this case in order to recreate the SVG schema in the canvas plugin. The next step is to consider which queries are necessary to obtain the metrics (see Figure 16).
Figure 16: Section of the queries for the server rack
Once these have been entered, it is advantageous for later to assign unique and meaningful names from which the physical quantity can be derived. Now we adjust the unit with „field override“ by entering the unit via Fields with name matching regex to search the names for specific texts - for example /.*temp.*/. You can then use Standard options -> Unit the unit (see Figure 17).
Figure 17: Setting the units of the metrics depending on the metric name
Once the metrics have been prepared, you can start drawing the schema. It often takes several drafts and attempts before a final layout is found. In our experience, it therefore makes sense to create and select the first drafts on paper. Only then should you start with the editor and realise a few selected drafts (see Figure 18).
Figure 18: Interim draft
Once the elements have been placed, the metrics are assigned to the texts in the selected elements. To do this, the option Source at Field and select the metric by name in the drop-down menu. The schema can be seen in Figure 19. The result is again reduced to the essentials, which can be seen as a positive effect of the limited variety of element types.
Figure 19: View of the scheme implemented in Canvas
Helpful tips
While working on the two application examples, some practical tips emerged, which are summarised below as tips for using Canvas:
-
- Converting diagrams into Canvas often involves additional effort, as existing images cannot be adopted directly but have to be modelled. However, visualisation can help to quickly identify deviations from the target state. The additional effort will therefore be worthwhile in most cases.
-
- Drawing in Canvas Editor can be slow, as you often have to scroll through the options window on the right to select the option you are looking for. We recommend drawing the first drafts on paper and realising a few selected drafts in the editor.
-
- There is no way to undo a change with a „step back“ in the canvas editor. Connection arrows should therefore only be created at the very end, as these are the most difficult to handle. They often have to be deleted (Deletion button) because they are not connected correctly at one point or the path simply needs to be corrected.
- In order to be effective when setting up, it is better to focus on the metrics first. To do this, the required queries are entered and then named meaningfully, accurately and briefly.
- The visual elements should only be placed once all metrics have been set up. The metrics can then be assigned to the elements via Text -> Field to avoid unnecessary loops.
- If the „Inline editing“ option is active, this helps a lot when editing, as the elements can be selected quickly. Unfortunately, this also applies when the editor has been exited. The elements can also be selected and edited during the view. This is unexpected from the user's point of view and can be perceived as annoying. To avoid this, the option should be deactivated once a panel has been completed.
- One advantage and disadvantage at the same time is that the variety of elements is limited. This reduces the display options, but at the same time ensures that the charts are reduced to the essentials and appear clearer.
- The source code of the panels in JSON format can be viewed and edited. Finished panels can therefore also be copied and used as a template:
-
-
-
- ... => inspect => Panel JSON (see Figure 20)
- Copy content
- Create a new panel in the target dashboard
- ... => inspect => Panel JSON
- Paste copied content and adjust ID
-
-
Figure 20: Editing in JSON format
Summary
In this article, we first briefly explained the Grafana Canvas and outlined its basic functions to provide an initial overview. We then ran through two specific application examples to demonstrate practical use and illustrate typical application scenarios. We noticed a few aspects that we have summarised as practical tips.
Our aim was not only to show how the tool works, but also to provide helpful tips based on practical experience, especially for new users of the tool. We hope that the examples and tips shown will make it easier to get started and help you to use Grafana Canvas effectively.
