How to fill background of image depending on level or percentage

Grafana
1

Hello…I am trying that the background of an image change (filling) depending on the metric value (level or percentage for instance). i.e an thermometer that filled when the temperature is inceasing, or a tank that show his filling.
I tried with SVG plugin, but until i cant achieve it.

Anyone has a hint that can help me ??

Thanks

2

Hello. Give a look at this: https://github.com/MarcusCalidus/marcuscalidus-svg-panel I used in the past

3

One more option two analyze (both are really good)

4

Thanks @mzazm and @gretamosa . I had used flowcharting, but not to this purpose, and I tried SVg panel, making an image with Inkscape and copy it in the plugin…but in both panels (Flowcharting and SVG), i dont know how to achieve that image change…i have to use different images whit differents levels overlapping each other ??..If you can give a hint, or show me an example, i will be very grateful

5

Ok, now I understand better your use-case. Have you tried disable_sanitize_html parameter, and code some javascript code for changing SVG images according with certain custom situations?

6

No, I havent…I will try that…but where do i put the javascript code ???, In the Events section of the svg plugin ( onHandleMetric and/or onInit)??.. Thanks

7

Sorry I forgot it! In a simple text panel with HTML.

8

For the SVG panel plugin this is an useful video I found online when I wanted to do some coloring of the svg elements. I believe you can change a property of the svg according to the result of the query thus changing the size of the colored area, but I am not an expert.

I have to say that there have not been many commits lately. So if I were you I would spend my time on FlowCharting as gretamosa is suggesting.

9

thank you very much mzazm.

10

I am a little confused…I could do what i want, using just text panel?? is not necessary to use flowcharting or svg panels??