Bar gauge panel with crusor

Grafana Bar Gauge Panel
1

Hello!

Sorry for my bad english :see_no_evil_monkey:

I’m looking to make a bar gauge like this pH meter :slight_smile:

image
image676×151 75.3 KB

I know how to add last value but I can’t find what option I need to choose to obtain this gauge…:sob:

the best I could get was this:

image
image1667×1929 181 KB

Any help please to choose the right option?

Thank you!

2

other than the arrow and it’s value the rest of the visual is static? I would say go for an svg approach and change the arrow and value data dynamically.

this is just some example

<!DOCTYPE html>
<html>
<body>
  <svg id="svgContainer" width="100" height="100">
    <path id="arrowPath" d="M10,10 L20,20 L30,10 Z" fill="blue" stroke="black" stroke-width="2"/>
  </svg>
  <button onclick="changeArrow()">Change Arrow</button>
  <script>
    function changeArrow() {
      const arrowPath = document.getElementById("arrowPath");
      arrowPath.setAttribute("d", "M50,10 L70,20 L50,30 Z"); // Change the path to a different arrow shape
      arrowPath.setAttribute("fill", "red"); // Change the fill color
      arrowPath.setAttribute("stroke", "black"); // Change the stroke color
    }
  </script>
</body>
</html>

there are plugins that can do that in grafana if you want to go with this above route.

3

thank you ofr your help :partying_face:

the bar gauge is statique (value only 0 to 14 for pH)
Can you give me the name of plugin and exemple? :see_no_evil_monkey:

Thank you very much

4

maybe you can look at canvas? Oui ou Non?

1 Like
5

thank you very much for the exemple! I will try this :heart_eyes:

1 Like