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

Grafana Time Series Panel
1

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

How to upload the SVG diagram image in Grafana in Windows?

Beauce all our development computers are no internet (Security reason some company no internet on development computers) and cannot copy the contents and paste them into the “SVG document” box.

Can I upload the SVG file in Grafana in Windows, please???

Where to put my SVG file? I found a folder in the following:

C:\Program Files\GrafanaLabs\grafana\data\png\

PS: if I develop the dashboard on a computer with the internet copy the contents and paste them into the “SVG document” box., how to import it to my development computer, please?

I have installed SVG, ACE.SVG, HTML graphics, and Status Panel plugins in Windows.

I created an SVG diagram image file with Inkscape, saved it as “plain SVG”. How to upload the SVG file in Grafana in Windows?

Where to put my SVG file? I found a folder in the following:

C:\Program Files\GrafanaLabs\grafana\data\png\

2

You need to load the SVG file into a dashboard panel created using one of the plugins you mentioned (e.g. ACE SVG). Check out the plug-in docs for details.

3

I have checked out the plug-in docs for details at ACE.SVG plugin for Grafana | Grafana Labs and SVG plugin for Grafana | Grafana Labs . They use SVG builder to create an image. But I created an SVG diagram image file with Inkscape, saved it as “plain SVG”. How to upload the SVG file in Grafana in Windows?

Please help in loading the SVG file into a dashboard panel. I need more information please

4

ACE.SVG (which I’d recommend) doesn’t use SVG builder AFAIK. Either way, both plugins allow you to paste in your own SVG.

For ACR, you can open your SVG file in a text editor (Notepad? It’s been a while since I’ve used Windows…), then copy the contents and paste them into the “SVG document” box in the panel settings in Grafana.

5

@svetb Thank you. Beauce all our development computers are no internet (Security reason some company no internet on development computers) and cannot copy the contents and paste them into the “SVG document” box.

Can I upload the SVG file in Grafana in Windows please???

Where to put my SVG file? I found a folder in the following:

C:\Program Files\GrafanaLabs\grafana\data\png\

PS: if I develop the dashboard on a computer with the internet copy the contents and paste them into the “SVG document” box., how to import it to my development computer, please?

6

I’m sorry @emmaluk I don’t think I can help further.

I don’t really understand your set-up, but it’s clearly unusual. I also think it’s fair to say that working with SVGs in Grafana (after the original loading of the graphic into a dashboard) can be quite a complex undertaking - so if you’re already encountering this level of difficulty with initial setup, it might not be the right tool for the job you’re trying to accomplish.

I’m sorry again. Maybe there’s someone else here who has better advice.

7

Hi @emmaluk

I am not sure if I understand you correctly. Do you have an SVG file and want to display it?

SVG is a pure text file in which the graphics are described. So you can paste the content of your file.

I’ve attached a screenshot from ACE.SVG.

grafik
grafik483×789 62.9 KB

Does that help you further?

greetings

1 Like
8

@svetb @ulrichc Thank you all

9

@svetb @ulrichc I have uploaded the SVD diagram in Grafana in Windows. Can I ask the second question How to Display values on top of the SVG diagram image in Grafana 7.0 in Windows?

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

<?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>

Just to start, that’s what I am asking

10

This isn’t an answer to your question (I don’t have one), but for the use case that you describe, why don’t you just use the Grafana stat panel? Seems like a far simper solution than trying to replicate the functionality in a custom SVG…