Panel with SVG and overlayed values for IIOT

Let’s assume I have an SVG graphic which contains a process display (P&ID diagram).
I would like to display it in a panel along with a set of overlayed values (such as single stat panel) representing the current status of corresponding measurements.
Something like this:

Please bear in mind this is a game changer feature for using grafana in an IIOT context. How to achieve such?

Thanks for the attention

1 Like

would be a really cool panel that did that!

any thoughts on how to get there?
where would you start?
We can copy/paste the SVG portion with the graphics in a html panel, but the challenging part would be the data binding with data sources of every single value

Sounds similar to the Diagram plugin:

You would just do label matching and match the label/target to a label on the diagram. The WorldMap panel does something similar too. It maps timeseries to locations on a map and matches by country code (or other string) or coordinates.

Oh, and of course this is also close to what you want:

Thanks for the advices, I tried both but it does not fit well to achieve
such process diagram experience.
The background image does not resize, we would really need a SVG viewer
panel with SingleStats overlay changing position accordingly when resizing.

Sorry, don’t have any other suggestions. Maybe you could adapt one of those plugins to get what you want?

You might want to try this one:

Disclaimer: I am the author.

2 Likes

Seems great Marcus.
I would like to contribute with a library of svg elements. Can I contact you on github?

Hi Alberto,

sure. I’d be delighted.

Do you want to publish this on Grafana.com? Send a PR to https://github.com/grafana/grafana-plugin-repository with the commit hash and I will review the plugin.

Hi daniellee,

I think this is an interesting idea. I’m not sure if it is already at the
level of being in the repository. One known issue for example is, that
sometimes InternetExplorer doesn’t play well with the way I convert text to
SVG. But besides that it works fine, although the options look still a bit
nerdy.

Cheers
Marco

Hi daniellee,

I sent a PR https://github.com/grafana/grafana-plugin-repository/pull/229
The panel now supports IE11 and Grafana 5. Would be glad if you could review it and see it published.

Cheers
Marco

Hi Marcus, This plugin is just perfect
Thank you very much for this job.

so what is the status of this were you able to implemement it using grafana ? Just curious

Hi
I use it to start a Network Weather Map for my POP
It will react with packet loss

2 Likes

the weather map idea is nice I’m also more interested in the PID controller diagram and the extent of this use