# Canvas panel use **URL:** \ **Category:** Dashboards\ **Created:** [August 24, 2023, 8:53am UTC](https://community.grafana.com/t/canvas-panel-use/101942 "2023-08-24T08:53:30Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![lucaconcilio55](https://avatars.discourse-cdn.com/v4/letter/l/e480ec/32.png) [@lucaconcilio55](https://community.grafana.com/u/lucaconcilio55)\ **Post date:** [August 24, 2023, 8:53am UTC](https://community.grafana.com/t/canvas-panel-use/101942/1 "2023-08-24T08:53:30Z")
- 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](https://us1.discourse-cdn.com/grafana/original/3X/2/7/270095cd458817e8c566f421f76d4810853db7ea.png) and i want to achieve something like this: ![esame-baropodometrico-1](https://us1.discourse-cdn.com/grafana/original/3X/a/e/aef6635dfd78b2ca5067599a35855a522998e312.jpeg) Thank you ---
**Author:** ![yosiasz](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/yosiasz/32/45847_2.png) [@yosiasz](https://community.grafana.com/u/yosiasz)\ **Post date:** [August 24, 2023, 10:35am UTC](https://community.grafana.com/t/canvas-panel-use/101942/2 "2023-08-24T10:35:08Z")
Check this out > **[Examples - Apache ECharts](https://echarts.apache.org/examples/en/editor.html?c=heatmap-large)** > > Apache ECharts, a powerful, interactive charting and visualization library for browser ---
**Author:** ![lucaconcilio55](https://avatars.discourse-cdn.com/v4/letter/l/e480ec/32.png) [@lucaconcilio55](https://community.grafana.com/u/lucaconcilio55)\ **Post date:** [August 24, 2023, 1:54pm UTC](https://community.grafana.com/t/canvas-panel-use/101942/3 "2023-08-24T13:54:51Z")
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 ---
**Author:** ![mikhailvolkov](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/mikhailvolkov/32/41625_2.png) [@mikhailvolkov](https://community.grafana.com/u/mikhailvolkov)\ **Post date:** [August 25, 2023, 1:01pm UTC](https://community.grafana.com/t/canvas-panel-use/101942/4 "2023-08-25T13:01:52Z")
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. [![](https://img.youtube.com/vi/ZIjUOr_HYFQ/maxresdefault.jpg "Canvas panel for Grafana | Advanced animated SVG element") ](https://www.youtube.com/watch?v=ZIjUOr_HYFQ) ---
**Author:** ![lucaconcilio55](https://avatars.discourse-cdn.com/v4/letter/l/e480ec/32.png) [@lucaconcilio55](https://community.grafana.com/u/lucaconcilio55)\ **Post date:** [August 25, 2023, 3:14pm UTC](https://community.grafana.com/t/canvas-panel-use/101942/5 "2023-08-25T15:14:51Z")
how? Using the sole as an animated svg? ---
**Author:** ![mikhailvolkov](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/mikhailvolkov/32/41625_2.png) [@mikhailvolkov](https://community.grafana.com/u/mikhailvolkov)\ **Post date:** [August 25, 2023, 6:11pm UTC](https://community.grafana.com/t/canvas-panel-use/101942/6 "2023-08-25T18:11:48Z")
As we explained in the video, advanced element based or real-time data can be created to show the heatmap you want to achieve. ---
**Author:** ![lucaconcilio55](https://avatars.discourse-cdn.com/v4/letter/l/e480ec/32.png) [@lucaconcilio55](https://community.grafana.com/u/lucaconcilio55)\ **Post date:** [August 28, 2023, 9:05am UTC](https://community.grafana.com/t/canvas-panel-use/101942/7 "2023-08-28T09:05:53Z")
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? ---
**Author:** ![mikhailvolkov](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/mikhailvolkov/32/41625_2.png) [@mikhailvolkov](https://community.grafana.com/u/mikhailvolkov)\ **Post date:** [August 28, 2023, 10:28am UTC](https://community.grafana.com/t/canvas-panel-use/101942/8 "2023-08-28T10:28:23Z")
@lucaconcilio55 We have a blog post explaining how to create advanced elements: > **[Pizzeria observability on Grafana Canvas panel | Volkov Labs](https://volkovlabs.io/blog/pizzeria-canvas-20230723/)** > > Can you smell it? The aroma of the baked pizza? Do you feel it? The increasing heartbeat rate when you look at the countdown timer where only 30 seconds left? How about joy mixed with pride when watching the number of completed orders increase and... ---
**Author:** ![lucaconcilio55](https://avatars.discourse-cdn.com/v4/letter/l/e480ec/32.png) [@lucaconcilio55](https://community.grafana.com/u/lucaconcilio55)\ **Post date:** [August 28, 2023, 10:42am UTC](https://community.grafana.com/t/canvas-panel-use/101942/9 "2023-08-28T10:42:14Z")
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 ---
**Author:** ![mikhailvolkov](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/mikhailvolkov/32/41625_2.png) [@mikhailvolkov](https://community.grafana.com/u/mikhailvolkov)\ **Post date:** [August 28, 2023, 1:58pm UTC](https://community.grafana.com/t/canvas-panel-use/101942/10 "2023-08-28T13:58:30Z")
@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.