docs: add observableGauge to the prometheus experimental example (ope…

…n-telemetry#4267)

* docs: add observableGauge to the prometheus experimental example

Signed-off-by: Francois LP <francois.le.pape@gmail.com>

* docs: add gauge image to README

Signed-off-by: Francois LP <francois.le.pape@gmail.com>

* refactor: change comment wording

from @pichlermarc

Co-authored-by: Marc Pichler <marc.pichler@dynatrace.com>

---------

Signed-off-by: Francois LP <francois.le.pape@gmail.com>
Co-authored-by: Marc Pichler <marc.pichler@dynatrace.com>
Co-authored-by: Daniel Dyla <dyladan@users.noreply.github.com>

experimental/examples/prometheus/README.md

@@ -60,6 +60,7 @@ If you are using the default configurations, the prometheus client will be avail
 
 <p align="center"><img src="images/prom-counter.png?raw=true"/></p>
 <p align="center"><img src="images/prom-updowncounter.png?raw=true"/></p>
+<p align="center"><img src="images/prom-gauge.png?raw=true"/></p>
 
 ## Useful links
 

experimental/examples/prometheus/index.js

@@ -39,6 +39,23 @@ observableCounter.addCallback(observableResult => {
   observableResult.observe(counter, attributes);
 });
 
+const randomMetricPromise = async () =>
+  new Promise(resolve =>
+    setTimeout(resolve(Math.floor(Math.random() * 100)), 50)
+  );
+
+const observableGauge = meter.createObservableGauge(
+  'observable_gauge_requests',
+  {
+    description: 'Example of an ObservableGauge',
+  }
+);
+// Callbacks are run when metrics are scraped
+observableGauge.addCallback(async observableResult => {
+  const value = await randomMetricPromise();
+  observableResult.observe(value, attributes);
+});
+
 // Record metrics
 setInterval(() => {
   counter++;