Introduction
In this report, we detail the process of migrating a Grafana dashboard from the deprecated Flowcharting plugin, which utilized Angular, to the new Canvas plugin in Grafana 10.4. The transition ensures the continued functionality of the client’s dashboard with improved efficiency and support.
Steps
Step 1: Open draw.io and Sign up/ Sign In with your google drive account
Step 2: If you have already have a draw.io diagram then you can pick a folder and choose the desired file or folder
Step 3: Click on save to save your draw.io diagram on google drive as png
Step 4: Now click on open folder and open your drive folder
Step 5: Now right click on your file and choose open and then preview
Step 6: Click on share
Step 7: Now change viewer settings to anyone with the link and copy the link
Step 8: Now open a new window in browser and right click anywhere on screen and select inspect now paste the link in the URL tab
Step 9: Click on element selector and select the image
Step 10: Now select the image and copy the inspect window highlighted element
Step 11: Now paste it in notepad and copy only the part in double quotes (“src to your image”)
Step 12: Now create a new dashboard and add visualization
Step 13: Now select the canvas panel option
Step 14: In the background section select field > select value and select the url field and paste the url here
Step 15: Now click on select and then save and apply your diagram is now added by url
Step 16: Dynamic Data Integration
Element Addition: Add elements (e.g., text, shapes) to the Canvas panel corresponding to the components of the original flowchart.
Data Scripting: Create a script to push data into a PostgreSQL database every 10 seconds. The script will:
Insert or update the relevant data in the PostgreSQL database.
Map the data columns to the respective elements in the Canvas panel.
Automatic Refresh: Configure the dashboard to refresh every 10 seconds, ensuring that the latest values from the PostgreSQL table are displayed dynamically.
if you have any queries regarding this you can contact me
