Display data from data source in SVG panel (on mouse hover over SVG path)

[saymeowmeow]

Latest Grafana version on Windows 10

I have added an SVG using the SVG plugin. It is a SVG of a map containing around 30 districts and I have specified the name of the districts in the path ID of each district.
I have added CSS for path hover so that when mouse hovers over a district, the district changes color. I also want to display some data on mouse hover.
However, I’m unable to figure out the code to display the specific data of each district on mouse hover.

My data is something like this:

My SVG panel:

On hover:

I read this thread and tried following the code that they have given in the Javascript Events panel(however it doesn’t mention mouse hover or specific SVG path dependent data):

SVG Panel + SQL Server query

var s = Snap(svgnode); var tot = ctrl.data[0].rows[0].Tot; buildRectangle(); function buildRectangle() { var rect = s.rect(10,10,150,150); rect.attr({fill: "#bada12"}) var text = s.text(50, 135, "T1:" + tot.toString()) text.attr({ 'font-size':25, 'fill': "#bada2" }); } function buildCircle() { var bigCircle = s.circle(150, 109, 110); bigCircle.attr({ fill: "#bada55", stroke: "#000", strokeWidth: 5 }); …

[yosiasz]

What happened to this approach?

Is it possible to make an svg map in a Grafana panel using html+css code?

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: [image] For another reference: Chris Lee | Copywriting and Content Strategy