fix graph problem

metrics.go

@@ -90,7 +90,7 @@ func metricsHandler(response http.ResponseWriter, request *http.Request) {
            }
 
            url := "http://localhost:9999/api/v2/query?org=beieliorg"
-           data := []byte(fmt.Sprintf(`from(bucket:"beielibucket") |> range(start: %s, stop: %s) |> filter(fn: (r) => r._field == "%s") |> filter(fn: (r) => r.deveui == "%s")`,mystart,mystop,property[0],mydeveui))
+           data := []byte(fmt.Sprintf(`from(bucket:"beielibucket") |> range(start: %s, stop: %s) |> filter(fn: (r) => r._measurement == "measurement") |> filter(fn: (r) => r._field == "%s") |> filter(fn: (r) => r.deveui == "%s")`,mystart,mystop,property[0],mydeveui))
 
            req, err := http.NewRequest("POST", url, bytes.NewBuffer(data))
 	   if err != nil {

snippets/graph.html

@@ -1,8 +1,6 @@
 {{define "body_content"}}
 {{ if ne .UserName "" }}
 
-{{ index (index .QueryValues "deveui") 0 }}
-
 <link href="static/bulma-calendar/css/bulma-calendar.min.css" rel="stylesheet">
 <script src="static/bulma-calendar/js/bulma-calendar.min.js"></script>
 

snippets/graph.html.test

@@ -0,0 +1,149 @@
+{{define "body_content"}}
+{{ if ne .UserName "" }}
+
+<link href="static/bulma-calendar/css/bulma-calendar.min.css" rel="stylesheet">
+<script src="static/bulma-calendar/js/bulma-calendar.min.js"></script>
+
+<div class="columns">
+  <div class="column is-one-third">
+    <input type="date" id="daterangepicker" data-type="date" data-display-mode="dialog" data-lang="de" data-is-range="true" data-close-on-select="true" data-date-format="DD.MM.YYYY">
+  </div>
+{{ index (index .QueryValues "deveui") 0 }}
+</div>
+
+<div>
+  <section id="chart">
+    <!-- Content ... -->
+  </section>
+</div>
+
+    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+
+
+
+
+<script>
+console.log('Initialize Bulma Calendar');
+// Initialize all input of type date
+var calendars = bulmaCalendar.attach('[type="date"]', {});
+
+// To access to bulmaCalendar instance of an element
+var element = document.querySelector('#daterangepicker');
+if (element) {
+  // bulmaCalendar instance is available as element.bulmaCalendar
+  element.bulmaCalendar.on('select', function(datepicker) {
+     console.log(datepicker.data.value());
+     s = datepicker.data.value();
+     // 04.08.2019 - 08.08.2019
+     start = s.substring(6,10).concat("-",s.substring(3,5),"-",s.substring(0,2),"T00:00:00Z");
+     end = s.substring(19,23).concat("-",s.substring(16,18),"-",s.substring(13,15),"T00:00:00Z");
+     console.log("Reload Graph start:"+start);
+     console.log("Reload Graph end:"+end);
+     reloadGraph(start,end);
+  });
+}
+</script>	
+
+<script>
+var chart;
+
+function reloadGraph(start, stop) {
+  range = ""
+  range = range + "&start=" + start;
+  range = range + "&stop=" + stop;
+  $.getJSON('https://mini-beieli.ch/metrics?' + sPageURL + range, function(mydata) {
+    chart.updateSeries([{
+      data: mydata
+    }])
+  });
+}
+
+var urlParams = new URLSearchParams(window.location.search);
+var deveui = urlParams.get('deveui');
+var start = urlParams.get('start');
+var stop = urlParams.get('stop');
+
+range="";
+if (start == null) {
+  var d = new Date();
+  d.setHours(0,0,0,0);
+  d.setSeconds(0,0);
+  var start = d.toISOString().substring(0,19)+'Z';
+  range = range + "&start=" + start;
+}
+
+if (stop == null) {
+  var d = new Date();
+  var stop = d.toISOString().substring(0,19)+'Z';
+  range = range + "&stop=" + stop;
+}
+
+console.log("Start: "+start);
+console.log("Stop: "+stop);
+
+var sPageURL = window.location.search.substring(1);
+var label;
+if (sPageURL.search("property=t") > -1) {
+  label = 'Temperatur';
+  minfunc = function(min) { if (min > 0) { return 0 } else { return min } }
+  maxfunc = function(max) { return max + 5 }
+} else if (sPageURL.search("property=vp") > -1) {
+  label = 'Akkuladung';
+  minfunc = function(min) { return 0 }
+  maxfunc = function(max) { return 100 }
+} else if (sPageURL.search("property=w") > -1) {
+  label = 'Gewicht';
+  minfunc = function(min) { if (min < 1000) { return 0 } else { return min - 1000 } } 
+  maxfunc = function(max) { return max + 1000 }
+} else if (sPageURL.search("property=h") > -1) {
+  label = 'Luftfeuchtigkeit';
+  minfunc = function(min) { return 0 } 
+  maxfunc = function(max) { return 100 }
+} else if (sPageURL.search("property=p") > -1) {
+  label = 'Luftdruck';
+  minfunc = function(min) { return 900 } 
+  maxfunc = function(max) { return 1060 }
+} else {
+  label = 'Unknown';
+}
+
+$.getJSON('https://mini-beieli.ch/metrics?' + sPageURL + range, function(mydata) {
+  var options = {
+    chart: {
+      type: 'line',
+      animations: {
+        enabled: false
+      }
+    },
+    stroke: {
+      curve: 'smooth'
+    },
+    xaxis: {
+      type: "datetime"
+    },
+    yaxis: {
+      min: minfunc,
+      max: maxfunc
+    },
+    tooltip: {
+      x: {
+        format: 'dd.MM.yyyy HH:mm'
+      }
+    },
+    series: [{
+      name: label,
+      data: mydata
+    }]
+  }
+
+  chart = new ApexCharts(document.querySelector("#chart"), options);
+  
+  chart.render();
+});
+
+</script>
+
+{{ else }}
+<h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
+{{end}}
+{{end}}