How to use ctrl in the SVG Plugin in Grafana

I wanted to work with the SVG Plugin in Grafana (SVG plugin for Grafana | Grafana Labs), so I can change the colour of the svg when a metric reaches a special value. The SVG Plugin tells me that I can work with metric that Grafana has through the ctrl variable. But when I try to get the data via:

ctrl.data[0].datapoints[0][0]

I only get those datapoints back:

image

I dont even know what metric this is.
So my question is: Does anyone know how I can get the metric i want (for example node_cpu_seconds_total) through β€œCtrl”?

Welcome

version of grafana?
on what OS?
Enterprise or OSS?

What is your data source and could you give us a sample ?

image

image

Sample dashboard

SVG CPU Dashboard

Hey,

My version of Grafana is 9.0.6
my OS is Ubuntu 20.04.4 LTS
And I use the OSS of Grafana

I want to use Prometheus as data source.
For example I want to use the data β€œnode_cpu_seconds_total”

where is node_cpu_seconds_total in the context of ctrl.data[0]? We have no clue as to the content of that object so we cant say. Show us what is in ctrl.data if not sensitive, if so copy it out to notepad++ and change things up and post back.

This is more of a javascript array issue than grafana

I thought I can get access of the data of the Prometheus data bank thorugh the ctrl. And because node_cpu_seconds_total is a metrik in the Prometheus data bank, I wanted to point it out as a sample metric i could access through ctrl.

I dont really know how to figure out what is inm ctrl.data. I just have the small Java Code Box and no Debugger:

Your dev console is your debugger since it is javascript.
Add console.log(ctrl) and open your dev console to see the output

Ah okay.
So this is what it looks like on the console:

Object { panel: {…}, pluginName: "SVG", pluginId: "marcuscalidus-svg-panel", editorTabs: (3) […], "$scope": {…}, "$injector": {…}, "$timeout": a(a, s, u), editModeInitiated: true, containerHeight: undefined, events: {…}, … }
​
"$injector": Object { invoke: invoke(t, n, i, o), instantiate: instantiate(t, e, n), strictDi: false, … }
​
"$location": Object { absUrl: wrapInDeprecationWarning(), hash: wrapInDeprecationWarning(), host: wrapInDeprecationWarning(), … }
​
"$rootScope": Object { "$id": 1, "$$childTail": {…}, "$$destroyed": false, … }
​
"$scope": Object { "$id": 11, "$$childTail": {…}, "$$destroyed": false, … }
​
"$timeout": function a(a, s, u)
​
aceLangTools: Object { setCompleters: setCompleters(val), addCompleter: addCompleter(completer), textCompleter: {…}, … }
​
containerHeight: undefined
​
contextSrv: Object { isSignedIn: true, isGrafanaAdmin: true, isEditor: true, … }
​
dashboard: Object { id: 1, uid: "fGsniGmVz", title: "New dashboard", … }
​
data: Array [ {…} ]
​
dataList: Array []
​
datasource: Object { name: "-- Grafana --", id: -1, type: "datasource", … }
​
datasourceSrv: Object { datasources: {…}, settingsMapByName: {…}, defaultName: "Prometheus", … }
​
demos: Object { ctrl: {…} }
​
editModeInitiated: true
​
editorTabs: Array(3) [ {…}, {…}, {…} ]
​
editors: Object { js_code: {…}, js_init_code: {…} }
​
events: Object { emitter: {…} }
​
height: 264
​
initialized: 1
​
interval: undefined
​
intervalMs: undefined
​
loading: false
​
onPluginTypeChange: function onPluginTypeChange(t)
​
panel: Object { id: 4, type: "marcuscalidus-svg-panel", title: "Panel Title", … }
​
panelData: Object { state: "Done", series: (1) […], structureRev: 2, … }
​
panelDataObserver: Object { next: next(e) }
​
pluginId: "marcuscalidus-svg-panel"
​
pluginName: "SVG"
​
querySubscription: Object { initialTeardown: undefined, closed: false, isStopped: false, … }
​
range: Object { from: {…}, to: {…}, raw: {…} }
​
resolution: undefined
​
row: undefined
​
series: Array [ {…} ]
​
skipDataOnInit: false
​
templateSrv: Object { _variables: [], regex: /\$(\w+)|\[\[(\w+?)(?::(\w+))?\]\]|\${(\w+)(?:\.([^:^\}]+))?(?::([^\}]+))?}/g, index: {…}, … }
​
timeInfo: ""
​
timeSrv: Object { time: {…}, refresh: false, autoRefreshPaused: true, … }
​
timing: Object {  }
​
unitFormats: Array(25) [ {…}, {…}, {…}, … ]
​
useDataFrames: false
​
width: 244
​
<prototype>: Object { … }
9809.905cf5a8eb304cf7fb1d.js line 2 > eval line 309 > Function:10:9

now do

console.log('hi mom', ctrl.data) 

making sure to sanitize what you post so that nothing confidential is posted

@sventhimsen1997 It’s unclear from the topic what you are working on and what kind of SVG you are looking to build. The SVG plugin you are using is very old, and it’s hard to use because it was built on an outdated framework.

I would recommend looking at other plugins which provide similar functionality like Apache ECharts: Apache ECharts plugin for Grafana | Grafana Labs. We have plenty of videos on how to build custom SVG images using data from data sources.

1 Like

Can one reference an svg file on disk? instead of the copy paste approach I see on youtube tutorial for apache echarts @mikhailvolkov

@yosiasz, you can use the URL as explained in this video: Apache ECharts supports base64 PNG and SVG (vector) images | Prefixes for various types of pictures - YouTube

1 Like

@mikhailvolkov okay thanks, than i will have a look at this plugin!