Linear graph in SVG model

[rcaldas88]

Hi, Marcus!

I was trying to understand how it would be possible to add linear graphics inside an SVG. It is possible?

I would like to put something like a capacity gauge inside an SVG hard disk. This data would be delivered by Zabbix through the metric of an item.

Thanks!

[MarcusCalidus]

Hi,
what exactly do you mean by linear graphics? Do you mean graph lines like this?

or do you want to create something like this?

In either way you'd have to create the appropriate SVG elements yourself. The second example is easier though. You can already create the pointer element in the base SVG and manipulate this via snapsvg.js

good tutorials what can be done with snapsvg are given here: http://svg.dabbles.info/ and here: http://svgdiscovery.com/Snap.svg/Snap.svg-API/Snap.svg-API-Examples.htm

[rcaldas88]

Hi, Marcus.

I'm here with my development team and we never work with SVG items. How would you use the existing Zabbix data in your plugin?

The question is how to make this connection between Zabbix and your plugin.

Regards,

[MarcusCalidus]

Hi,
never worked with SVG huh? ;-) There's a road of wonders ahead hehehe. j/k
As for the Zabbix datasource I am not used to using that. As such I would start logging the ctrl object to the console in order to investigate it. Especially console.log(ctrl.series) would be interesting since this object holds all the time series values that are returned by the datasource. I guess this is Grafana specific and doesn't change much between the actual used datasources.
Maybe you wanna send me the output object as JSON to this thread so I can help you investigating it. You can log the object in the onHandleMetric(ctrl: MetricsPanelCtrl, svgnode: HTMLElement) function.
As for the SVG it would be good if some skilled painter would prepare everything for you and make groups of all parts that should be modified. If you name those groups correctly you can easily manipulate them using Snap.svg. Of course you can also build the whole graphic programmatically during the onInit()function.
I hope that was of some help.

Cheers
Marco