How to Display values on top of SVG diagram image with InfluxDB Data Source in Grafana 7.0 in Windows?

How to Display values on top of SVG diagram image with InfluxDB Data Source in Grafana 7.0 in Windows?




indent preformatted text by 4 spaces
JavaScript Code:

var s = Snap(svgnode);
var t1 =s.select("#Panel-1-1");
var t =t1.selectAll("text");
t[0].node.innerHTML = ctrl.series[0].datapoints[0][0];
var nodeValue = t.items[0].node.innerHTML;

if(nodeValue < 0 || nodeValue === "") {
console.log('Gray');
} else if(nodeValue < 30 && nodeValue > 0) {
console.log('Green');
} else if(nodeValue < 41 && nodeValue > 30) {
console.log('Yellow');
} else {
console.log('Red');
}

The sample data of my data source via InfluxDB 1.8.4-1 on Windows,
if the value is over 45, will be red and under 45 will be green.
also, my question related to how to access the elements of the SVG too.

CREATE DATABASE devopsjourney
show databases
use devopsjourney

INSERT temperature,panelname=1-1 value=60
INSERT temperature,panelname=1-1 value=60
INSERT temperature,panelname=1-1 value=60
INSERT temperature,panelname=1-1 value=70
INSERT temperature,panelname=1-1 value=40
INSERT temperature,panelname=1-1 value=30
INSERT temperature,panelname=1-1 value=60
INSERT temperature,panelname=1-1 value=60
INSERT temperature,panelname=1-1 value=60
INSERT temperature,panelname=1-1 value=60
INSERT temperature,panelname=1-1 value=60
INSERT temperature,panelname=1-1 value=70
INSERT temperature,panelname=1-1 value=40