Canvas panel use

Grafana Dashboards
1
  • What Grafana version and what operating system are you using?
    Hi everyone! I’m using Grafana through Docker container for an IOT application, monitoring smart soil’s behave.
    I want to achieve a result similar to baropodometric exam: using canvas panel i uploaded a soil icon and on that i want to show some similar to a heatmap.

This is my dashboard now:

Immagine 2023-08-24 105201
Immagine 2023-08-24 105201937×770 88.3 KB

and i want to achieve something like this:

esame-baropodometrico-1
esame-baropodometrico-11000×703 61.3 KB

Thank you

2

Check this out

3

So i should create the image manually through algorithm? As in the example have i to put the javascript code in a dynamic text panel? I’m a beginner in Grafana

4

What you are trying to accomplish is also possible with a Canvas panel and a custom advanced element, as we explained in the video.

The advanced element should be created and compiled in Grafana.

5

how? Using the sole as an animated svg?

6

As we explained in the video, advanced element based or real-time data can be created to show the heatmap you want to achieve.

1 Like
7

i have two question:

  1. Code parts from element definitions to react component where must be define?
  2. For what i want to achieve, how can i know the code to define?
8

@lucaconcilio55 We have a blog post explaining how to create advanced elements:

9

i know. I read many times the blog post but i don’t understand where the code has to be put. Maybe these particulars aren’t explained for a beginner

10

@lucaconcilio55 The process is not beginner-friendly as it requires adding the code and compiling Grafana. The canvas panel does not support plugins at the current stage of the development.

Alternatively, it can be done using Apache ECharts as @yosiasz suggested using an SVG map and coloring it according to the data from the data source.