enhance graph page
This commit is contained in:
parent
e707723250
commit
9e27e8b771
|
|
@ -9,10 +9,39 @@
|
|||
<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="column is-half is-gapless">
|
||||
<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
|
||||
<i class="fa fa-calendar"></i>
|
||||
<span></span> <i class="fa fa-caret-down"></i>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
|
||||
<i class="fa fa-calendar"></i>
|
||||
<span></span> <i class="fa fa-caret-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<a id="btn_w" class="button">
|
||||
<span class="icon">
|
||||
<i class="fa fa-balance-scale"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a id="btn_t" class="button">
|
||||
<span class="icon">
|
||||
<i class="fa fa-thermometer-half"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a id="btn_h" class="button">
|
||||
<span class="icon">
|
||||
<i class="fa fa-tint"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a id="btn_p" class="button">
|
||||
<span class="icon">
|
||||
<i class="fa fa-cloud"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a id="btn_vp" class="button">
|
||||
<span class="icon">
|
||||
<i class="fa fa-battery-three-quarters"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -22,6 +51,8 @@ $(function() {
|
|||
|
||||
var start = moment({hour: 0});
|
||||
var end = moment();
|
||||
var s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
|
||||
var s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
|
||||
|
||||
console.log("XXX: "+start.format());
|
||||
|
||||
|
|
@ -31,9 +62,29 @@ $(function() {
|
|||
s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
|
||||
s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
|
||||
console.log("Start: " + s_start + ' End: ' + s_end);
|
||||
reloadGraph(s_start,s_end);
|
||||
drawGraph(deveui, alias, property, s_start,s_end, false);
|
||||
}
|
||||
|
||||
$('#btn_w').on("click", function() {
|
||||
drawGraph(deveui, alias, 'w', s_start,s_end, false);
|
||||
});
|
||||
|
||||
$('#btn_t').on("click", function() {
|
||||
drawGraph(deveui, alias, 't', s_start,s_end, false);
|
||||
});
|
||||
|
||||
$('#btn_h').on("click", function() {
|
||||
drawGraph(deveui, alias, 'h', s_start,s_end, false);
|
||||
});
|
||||
|
||||
$('#btn_p').on("click", function() {
|
||||
drawGraph(deveui, alias, 'p', s_start,s_end, false);
|
||||
});
|
||||
|
||||
$('#btn_vp').on("click", function() {
|
||||
drawGraph(deveui, alias, 'vp', s_start,s_end, false);
|
||||
});
|
||||
|
||||
$('#reportrange').daterangepicker({
|
||||
startDate: start,
|
||||
endDate: end,
|
||||
|
|
@ -98,19 +149,96 @@ $(function() {
|
|||
<script>
|
||||
var chart;
|
||||
|
||||
function reloadGraph(start, stop) {
|
||||
function drawGraph(deveui, alias, property, start, stop, create_graph) {
|
||||
range = ""
|
||||
range = range + "&start=" + start;
|
||||
range = range + "&stop=" + stop;
|
||||
$.getJSON('https://mini-beieli.ch/metrics?' + sPageURL + range, function(mydata) {
|
||||
chart.updateSeries([{
|
||||
data: mydata
|
||||
}])
|
||||
|
||||
var label;
|
||||
$(".button").removeClass("is-success");
|
||||
if (property=="t") {
|
||||
$("#btn_t").addClass("is-success");
|
||||
label = 'Temperatur';
|
||||
minfunc = function(min) { if (min > 0) { return 0 } else { return min } }
|
||||
maxfunc = function(max) { return max + 5 }
|
||||
} else if (property=="vp") {
|
||||
$("#btn_vp").addClass("is-success");
|
||||
label = 'Akkuladung';
|
||||
minfunc = function(min) { return 0 }
|
||||
maxfunc = function(max) { return 100 }
|
||||
} else if (property=="w") {
|
||||
$("#btn_w").addClass("is-success");
|
||||
label = 'Gewicht';
|
||||
minfunc = function(min) { if (min > 40000) { return min - 2000 } else { return 0 } }
|
||||
maxfunc = function(max) { return max + 2000 }
|
||||
} else if (property==="h") {
|
||||
$("#btn_h").addClass("is-success");
|
||||
label = 'Luftfeuchtigkeit';
|
||||
minfunc = function(min) { return 0 }
|
||||
maxfunc = function(max) { return 100 }
|
||||
} else if (property=="p") {
|
||||
$("#btn_p").addClass("is-success");
|
||||
label = 'Luftdruck';
|
||||
minfunc = function(min) { return 900 }
|
||||
maxfunc = function(max) { return 1060 }
|
||||
} else {
|
||||
label = 'Unknown';
|
||||
}
|
||||
|
||||
$.getJSON('https://mini-beieli.ch/metrics?deveui=' + deveui + '&alias=' + alias + '&property=' + property + range, function(mydata) {
|
||||
var options = {
|
||||
chart: {
|
||||
type: 'line',
|
||||
animations: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth'
|
||||
},
|
||||
title: {
|
||||
text: urlParams.get('alias'),
|
||||
align: 'center',
|
||||
style: {
|
||||
fontSize: '32px'
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
type: "datetime",
|
||||
labels: {
|
||||
rotate: 0
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
min: minfunc,
|
||||
max: maxfunc
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
format: 'dd.MM.yyyy HH:mm'
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: label,
|
||||
data: mydata
|
||||
}]
|
||||
}
|
||||
|
||||
if (create_graph) {
|
||||
chart = new ApexCharts(document.querySelector("#chart"), options);
|
||||
} else {
|
||||
chart.updateOptions(options);
|
||||
chart.updateSeries(mydata);
|
||||
}
|
||||
|
||||
chart.render();
|
||||
});
|
||||
}
|
||||
|
||||
var urlParams = new URLSearchParams(window.location.search);
|
||||
var deveui = urlParams.get('deveui');
|
||||
var alias = urlParams.get('alias');
|
||||
var property = urlParams.get('property');
|
||||
var start = urlParams.get('start');
|
||||
var stop = urlParams.get('stop');
|
||||
|
||||
|
|
@ -127,72 +255,9 @@ if (stop == null) {
|
|||
range = range + "&stop=" + stop;
|
||||
}
|
||||
|
||||
console.log("Start: "+start);
|
||||
console.log("Stop: "+stop);
|
||||
$('#reportrange span').html(moment(start).format('D. MMMM YYYY') + ' - ' + moment(stop).format('D. MMMM YYYY'));
|
||||
|
||||
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 > 40000) { return min - 2000 } else { return 0 } }
|
||||
maxfunc = function(max) { return max + 2000 }
|
||||
} 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",
|
||||
labels: {
|
||||
rotate: 0
|
||||
}
|
||||
},
|
||||
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();
|
||||
});
|
||||
drawGraph(deveui, alias, property, start, stop, true);
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,149 +0,0 @@
|
|||
{{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}}
|
||||
|
|
@ -1,276 +0,0 @@
|
|||
{{define "body_content"}}
|
||||
{{ if ne .UserName "" }}
|
||||
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
|
||||
|
||||
<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-half">
|
||||
<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
|
||||
<i class="fa fa-calendar"></i>
|
||||
<span></span> <i class="fa fa-caret-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<a id="btn_w" class="button">
|
||||
<span class="icon">
|
||||
<i class="fa fa-balance-scale"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a id="btn_t" class="button">
|
||||
<span class="icon">
|
||||
<i class="fa fa-thermometer-half"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a id="btn_h" class="button">
|
||||
<span class="icon">
|
||||
<i class="fa fa-tint"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a id="btn_p" class="button">
|
||||
<span class="icon">
|
||||
<i class="fa fa-cloud"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a id="btn_vp" class="button">
|
||||
<span class="icon">
|
||||
<i class="fa fa-battery-three-quarters"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
|
||||
var start = moment({hour: 0});
|
||||
var end = moment();
|
||||
var s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
|
||||
var s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
|
||||
|
||||
console.log("XXX: "+start.format());
|
||||
|
||||
function cb(start, end) {
|
||||
$('#reportrange span').html(start.format('D. MMMM YYYY') + ' - ' + end.format('D. MMMM YYYY'));
|
||||
console.log("A new date selection was made: " + start.format() + ' to ' + end.format());
|
||||
s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
|
||||
s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
|
||||
console.log("Start: " + s_start + ' End: ' + s_end);
|
||||
reloadGraph(s_start,s_end);
|
||||
}
|
||||
|
||||
$('#btn_w').on("click", function() {
|
||||
if (urlParams.toString().indexOf("property=w") == -1) {
|
||||
location.href = location.href.replace(/property=w|property=t|property=p|property=h|property=vp/, 'property=w');
|
||||
}
|
||||
});
|
||||
|
||||
$('#btn_t').on("click", function() {
|
||||
if (urlParams.toString().indexOf("property=t") == -1) {
|
||||
location.href = location.href.replace(/property=w|property=t|property=p|property=h|property=vp/, 'property=t');
|
||||
}
|
||||
});
|
||||
|
||||
$('#btn_h').on("click", function() {
|
||||
if (urlParams.toString().indexOf("property=h") == -1) {
|
||||
location.href = location.href.replace(/property=w|property=t|property=p|property=h|property=vp/, 'property=h');
|
||||
}
|
||||
});
|
||||
|
||||
$('#btn_p').on("click", function() {
|
||||
if (urlParams.toString().indexOf("property=p") == -1) {
|
||||
location.href = location.href.replace(/property=w|property=t|property=p|property=h|property=vp/, 'property=p');
|
||||
}
|
||||
});
|
||||
|
||||
$('#btn_vp').on("click", function() {
|
||||
if (urlParams.toString().indexOf("property=vp") == -1) {
|
||||
location.href = location.href.replace(/property=w|property=t|property=p|property=h|property=vp/, 'property=vp');
|
||||
}
|
||||
});
|
||||
|
||||
$('#reportrange').daterangepicker({
|
||||
startDate: start,
|
||||
endDate: end,
|
||||
regional: [ "de" ],
|
||||
"locale": {
|
||||
format: 'DD.MM.YYYY',
|
||||
"separator": " - ",
|
||||
"applyLabel": "Anwenden",
|
||||
"cancelLabel": "Abbrechen",
|
||||
"fromLabel": "Von",
|
||||
"toLabel": "Bis",
|
||||
customRangeLabel: 'Benutzerdefiniert',
|
||||
"weekLabel": "W",
|
||||
"daysOfWeek": [
|
||||
"So",
|
||||
"Mo",
|
||||
"Di",
|
||||
"Mi",
|
||||
"Do",
|
||||
"Fr",
|
||||
"Sa"
|
||||
],
|
||||
"monthNames": [
|
||||
"Januar",
|
||||
"Februar",
|
||||
"März",
|
||||
"April",
|
||||
"Mai",
|
||||
"Juni",
|
||||
"Juli",
|
||||
"August",
|
||||
"September",
|
||||
"Oktober",
|
||||
"November",
|
||||
"Dezember"
|
||||
],
|
||||
"firstDay": 1
|
||||
},
|
||||
ranges: {
|
||||
'Heute': [moment(), moment()],
|
||||
'Gestern': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
|
||||
'Letzte 7 Tage': [moment().subtract(6, 'days'), moment()],
|
||||
'Letzte 30 Tage': [moment().subtract(29, 'days'), moment()],
|
||||
'Diesen Monat': [moment().startOf('month'), moment().endOf('month')],
|
||||
'Letzten Monat': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
|
||||
}
|
||||
}, cb);
|
||||
|
||||
//cb(start, end);
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<section id="chart">
|
||||
<!-- Content ... -->
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
||||
|
||||
<script>
|
||||
var chart;
|
||||
|
||||
function reloadGraph(start, stop) {
|
||||
range = ""
|
||||
range = range + "&start=" + start;
|
||||
range = range + "&stop=" + stop;
|
||||
alert(sPageURL);
|
||||
$.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 dstart = moment({hour: 0});
|
||||
var start = dstart.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
|
||||
range = range + "&start=" + start;
|
||||
}
|
||||
|
||||
if (stop == null) {
|
||||
var dstop = moment();
|
||||
var stop = dstop.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
|
||||
range = range + "&stop=" + stop;
|
||||
}
|
||||
|
||||
console.log("Start: "+start);
|
||||
console.log("Stop: "+stop);
|
||||
$('#reportrange span').html(moment(start).format('D. MMMM YYYY') + ' - ' + moment(stop).format('D. MMMM YYYY'));
|
||||
|
||||
var sPageURL = window.location.search.substring(1);
|
||||
var label;
|
||||
if (sPageURL.search("property=t") > -1) {
|
||||
$("#btn_t").addClass("is-success");
|
||||
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) {
|
||||
$("#btn_vp").addClass("is-success");
|
||||
label = 'Akkuladung';
|
||||
minfunc = function(min) { return 0 }
|
||||
maxfunc = function(max) { return 100 }
|
||||
} else if (sPageURL.search("property=w") > -1) {
|
||||
$("#btn_w").addClass("is-success");
|
||||
label = 'Gewicht';
|
||||
minfunc = function(min) { if (min > 40000) { return min - 2000 } else { return 0 } }
|
||||
maxfunc = function(max) { return max + 2000 }
|
||||
} else if (sPageURL.search("property=h") > -1) {
|
||||
$("#btn_h").addClass("is-success");
|
||||
label = 'Luftfeuchtigkeit';
|
||||
minfunc = function(min) { return 0 }
|
||||
maxfunc = function(max) { return 100 }
|
||||
} else if (sPageURL.search("property=p") > -1) {
|
||||
$("#btn_p").addClass("is-success");
|
||||
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'
|
||||
},
|
||||
title: {
|
||||
text: urlParams.get('alias'),
|
||||
align: 'center',
|
||||
style: {
|
||||
fontSize: '32px'
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
type: "datetime",
|
||||
labels: {
|
||||
rotate: 0
|
||||
}
|
||||
},
|
||||
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}}
|
||||
Loading…
Reference in New Issue