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.
Thank you for this insight! Can I also add a geojson file to the maps folder?
Also, to make things complicated I am required to not add static data over the SVG. I have to display data returned from a PostgreSQL query in the tooltip that appears on mouse hover
For your firsr question 
@saymeowmeow We explained in the documentation and YouTube tutorials how to work with dynamic data from Data Sources: Data Sources | Volkov Labs
Hello @mikhailvolkov , similar to OP, i am attempting something using the Business Charts plugin. i want to display a red dot on a svg map, while updating the x y coords variables. end result is the dot moves around on the map representing position.
essentially this Apache Echart Example: Examples - Apache ECharts
but i seem unable to get it to work using the Business Charts plugin on Grafana OSS 10.
any thoughts?
@jpwienenergie I need more details than that.
We have different examples in our documentation:
Also, there is a Cow SVG example, which may help:
https://echarts.volkovlabs.io/d/X1mkMIFVz/geo-map?orgId=1&editPanel=8
Hi, thanks for the response!
Details: my intention is to have a floor map and to display the location of an object on this map. However the location of this map is updated every second and i would like to create a “live location map” so visualise the current location of the object.
When reviewing the examples on the Volkovlabs site, i could not find any involving updating the data set and visualisation of a map/ presentation of that data! Mainly using $.get and echart.setoption(). The examples on apache echart also include the cow example but the ones involving updating a map dynamically are the ones I’m currently targeting. I tried adapting the cow example from Volkovlabs but I was unable to get a data point to get plotted and updated to a new location periodically.
Am I correct in understanding: the business chart plugin does not include the echart library? I get “echart not defined” console errors when trying to visualise the examples
@jpwienenergie It does includes charts using context. Please check the latest blog post for details: Business Charts Panel 6.0.0 | Volkov Labs
We did some major changes when renamed panel and updated to Grafana 11, but it’s the same panel as before.
You can use streaming data source to display object on location every second or refresh dashboard. I would not recommend to use $.get fetching data from data sources instead.
@mikhailvolkov I will look into “context” and play around with the streaming data source!
Would you suggest using the cow example and rebuilding from there using context and data source.
I’m just a bit confused about referencing a url or path in order to register it as a geo map.
Thanks!
