diff --git a/main.go b/main.go
index 8450820..0a6347b 100644
--- a/main.go
+++ b/main.go
@@ -84,6 +84,7 @@ func main() {
         http.HandleFunc("/set_password", setPasswordHandler)
         http.HandleFunc("/logout", logoutHandler)
         http.HandleFunc("/confirm", confirmHandler)
+        http.HandleFunc("/metrics", metricsHandler)
 
 	logit("Starting Web Application...")
 	http.ListenAndServe("127.0.0.1:4000", nil)
diff --git a/metrics.go b/metrics.go
new file mode 100644
index 0000000..fcc6e49
--- /dev/null
+++ b/metrics.go
@@ -0,0 +1,75 @@
+package main
+
+import (
+    "bytes"
+    "fmt"
+    "log"
+    "net/http"
+    "time"
+    "io/ioutil"
+    "bufio"
+    "strings"
+)
+
+// metrics handler
+
+func metricsHandler(response http.ResponseWriter, request *http.Request) {
+        name := getUserName(request)
+        if name  != "" {
+           url := "http://localhost:9999/api/v2/query?org=beieliorg"
+           data := []byte(`from(bucket:"beielibucket") |> range(start:-24h) |> filter(fn: (r) => r._field == "v") |> filter(fn: (r) => r.devaddr == "084B3824")`)
+
+           req, err := http.NewRequest("POST", url, bytes.NewBuffer(data))
+	   if err != nil {
+		log.Fatal("Error reading request. ", err)
+           } 
+ 
+	   // Set headers
+	   req.Header.Set("Authorization", "Token xXnq8ADcDygAyM_L0B_10c9yuoOv-cYcUfIXkJunRrIDMhB5ZNmza-Whr1ELcbKNzW8GzUMMYD85QohUHQdAmg==")
+	   req.Header.Set("accept", "application/csv")
+	   req.Header.Set("content-type", "application/vnd.flux")
+ 
+	   // Set client timeout
+	   client := &http.Client{Timeout: time.Second * 10}
+ 
+	   // Send request
+	   resp, err := client.Do(req)
+	   if err != nil {
+		log.Fatal("Error reading response. ", err)
+	   }
+	   defer resp.Body.Close()
+ 
+	   fmt.Println("response Status:", resp.Status)
+	   fmt.Println("response Headers:", resp.Header)
+
+           body, err := ioutil.ReadAll(resp.Body)
+	   if err != nil {
+		log.Fatal("Error reading body. ", err)
+	   }
+           
+           fmt.Fprintf(response,"[\n") 
+           scanner := bufio.NewScanner(strings.NewReader(string(body)))
+           first := true
+           for scanner.Scan() {
+               s := strings.Split(scanner.Text(),",")
+               if ((len(s) >= 7) && !(strings.HasPrefix(s[5],"_"))) {
+                   t,err := time.Parse(time.RFC3339,s[5])
+                   if err != nil {
+                         continue
+                   }
+                   a := t.Unix()
+                   b := s[6]
+                   if !(first) {
+                       fmt.Fprintf(response,",") 
+                   } else {
+                     first = false
+                   }
+                   fmt.Fprintf(response,"[%d000,%s]\n",a,b) 
+               }
+           }
+           fmt.Fprintf(response,"]\n") 
+
+        } else {
+	   fmt.Fprintf(response, "{ \"msg\": \"Only available for logged in users\" }")
+        }
+}
diff --git a/snippets/scales.html b/snippets/scales.html
index cbf766d..ef3b1a8 100644
--- a/snippets/scales.html
+++ b/snippets/scales.html
@@ -1,6 +1,95 @@
 {{define "body_content"}}
 {{ if ne .UserName "" }}
-<p>Datenauswertung</p>
+
+<button id="mybutton" class="button is-primary is-large">Launch example modal</button>
+
+<div class="modal">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Modal title</p>
+      <button class="delete" aria-label="close"></button>
+    </header>
+    <section id="chart" class="modal-card-body">
+      <!-- Content ... -->
+    </section>
+  </div>
+</div>
+
+<div class="column is-full notification is-warning">
+<p class="is-size-2 has-text-centered has-text-weight-bold">Waage 1</p>
+<p class="has-text-centered">letzte Messung: 1.1.2000 19:20</p>
+<div>
+<div class="colums is-full notification is-warning">
+  <nav class="level">
+  <div class="level-item has-text-centered">
+    <div>
+      <p class="icon"><i class="fa fa-thermometer-half"></i></p>
+      <p class="title">22.0 &deg;C</p>
+    </div>
+  </div>
+  <div class="level-item has-text-centered">
+    <div>
+      <p class="icon"><i class="fa fa-tint"></i></p>
+      <p class="title">50 %</p>
+    </div>
+  </div>
+  <div class="level-item has-text-centered">
+    <div>
+      <p class="icon"><i class="fa fa-balance-scale"></i></p>
+      <p class="title is-size-1 has-text-weight-bold">456K</p>
+    </div>
+  </div>
+  <div class="level-item has-text-centered">
+    <div>
+      <p class="icon"><i class="fa fa-cloud"></i></p>
+      <p class="title">789</p>
+    </div>
+  </div>
+  <div class="level-item has-text-centered">
+    <div>
+      <p class="icon"><i class="fa fa-battery-three-quarters"></i></p>
+      <p class="title">90%</p>
+    </div>
+  </div>
+</nav>
+</div>
+    <script>
+$("#mybutton,.delete").click(function(){
+  console.log("Hallo Velo");
+  $(".modal").toggleClass("is-active");
+});
+    </script>
+
+    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+<script>
+$.getJSON('https://mini-beieli.ch/metrics', function(mydata) {
+  var options = {
+    chart: {
+      type: 'line',
+      animations: {
+        enabled: false
+      }
+    },
+    xaxis: {
+      type: "datetime"
+    },
+    tooltip: {
+      x: {
+        format: 'dd.MM.yyyy HH:mm'
+      }
+    },
+    series: [{
+      name: 'vbat millivolt',
+      data: mydata
+    }]
+  }
+
+  var chart = new ApexCharts(document.querySelector("#chart"), options);
+
+  chart.render();
+});
+</script>
 {{ else }}
 <h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
 {{end}}