I found this link
that shows how to make a clickable SVG map using HTML-CSS. Since Grafana only provides a specific type of map (the world map) for data analysis, I thought I could add this HTML-CSS code in the ‘text’ panel to display the SVG map.
Can anyone help me with the execution of the same? Is it even possible?
I have tried adding some code:
For another reference: Chris Lee | Copywriting and Content Strategy
Apache ECharts panel supports SVG maps out of the box.
Here is the example:
https://echarts.volkovlabs.io/d/X1mkMIFVz/geo-map?orgId=1&editPanel=8
Thank you for the link! I found the Apache Echarts plugin really informative. It is perfectly suitable for the world (and USA) maps. However, I’m unable to use the map of a specific Indian state instead of the already available maps.
So instead, I just added the SVG map code of the Indian state in the ‘Text’ panel(as HTML code) and added CSS.
I am hoping to apply relevant JS in the script tag. Hope that will work similarly to how it’s working in the Apache echarts Geo/Map type.
@saymeowmeow SVG Map can be loaded from Static, like in the example, or any other data source. GeoJSON can be loaded from external resources or just simple add file to the ./maps folder inside the plugin.
If Text won’t work for you, you can take a look at the Dynamic Text panel, which supports HTML template, JavaScript Code and CSS styles.
