How to Display values on top of SVG diagram image in Grafana 7.0 in Windows?

Grafana
1

For instance, suppose I have two boxes. with the simplest type of data source, I have a binary decision:
ok box = ok (green)/down (red)
down = ok (green)/down (red)

image
SVG data:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   width="500"
   height="300"
   viewBox="0 0 132.29166 79.375002"
   version="1.1"
   id="svg8">
  <defs
     id="defs2">
    <rect
       x="59.342261"
       y="14.174107"
       width="65.200892"
       height="15.875"
       id="rect54" />
    <rect
       x="60.665178"
       y="14.930059"
       width="64.633928"
       height="15.497024"
       id="rect48" />
    <rect
       x="67.657737"
       y="16.252976"
       width="23.623512"
       height="17.575893"
       id="rect40" />
    <rect
       x="16.252976"
       y="14.363095"
       width="30.049107"
       height="18.898809"
       id="rect32" />
    <rect
       x="14.741071"
       y="11.150297"
       width="21.355655"
       height="19.465774"
       id="rect24" />
    <rect
       x="19.087797"
       y="15.308036"
       width="14.174107"
       height="11.150297"
       id="rect18" />
  </defs>
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1">
    <text
       xml:space="preserve"
       id="text16"
       style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect18);fill:#000000;fill-opacity:1;stroke:none;"><tspan
         style="visibility:hidden"
         x="19.087891"
         y="36.114449"><tspan
           dx="0 6.5938916 6.4233603 8.6609421">down</tspan></tspan></text>
    <text
       xml:space="preserve"
       id="text22"
       style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect24);fill:#000000;fill-opacity:1;stroke:none;"><tspan
         style="visibility:hidden"
         x="14.740234"
         y="40.270699"><tspan
           dx="0 6.5938916 6.4233603 8.6609421">down</tspan></tspan></text>
    <rect
       style="fill:#008000;stroke-width:0.264583"
       id="rect28"
       width="38.55357"
       height="26.269344"
       x="11.717261"
       y="10.583333" />
    <text
       xml:space="preserve"
       id="text30"
       style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect32);fill:#000000;fill-opacity:1;stroke:none;"><tspan
         x="16.253906"
         y="24.018746"><tspan
           style="fill:#ffffff">ok</tspan></tspan></text>
    <text
       xml:space="preserve"
       id="text38"
       style="fill:black;fill-opacity:1;line-height:1.25;stroke:none;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:10.5833332px;white-space:pre;shape-inside:url(#rect40);" />
    <rect
       style="fill:#ff0000;stroke-width:0.184157"
       id="rect44"
       width="35.340778"
       height="24.190477"
       x="56.318451"
       y="11.528275" />
    <text
       xml:space="preserve"
       id="text46"
       style="fill:black;fill-opacity:1;line-height:1.25;stroke:none;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:10.5833332px;white-space:pre;shape-inside:url(#rect48);" />
    <text
       xml:space="preserve"
       id="text52"
       style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect54);fill:#000000;fill-opacity:1;stroke:none;"><tspan
         x="59.341797"
         y="23.829293"><tspan
           style="fill:#ffffff">down</tspan></tspan></text>
  </g>
</svg>

Events:
JavaScript Code: onHandleMetric(ctrl, svgnode)`

JavaScript Code: `onInit(ctrl, svgnode)

if ok then colour green, else colour red
Just to start, that’s what I am asking

2

This topic was automatically closed after 365 days. New replies are no longer allowed.