diff options
| author | schneefux <schneefux+commit@schneefux.xyz> | 2016-05-23 18:06:01 +0200 |
|---|---|---|
| committer | schneefux <schneefux+commit@schneefux.xyz> | 2016-05-23 18:06:01 +0200 |
| commit | 88363bcefc9b6093fab924e734c7918a76617ae5 (patch) | |
| tree | 2d354bdbeebb9d7cc03e5872024c0a32714b413f /www/index.html | |
| download | tempfeel-master.tar.gz tempfeel-master.zip | |
Diffstat (limited to 'www/index.html')
| -rw-r--r-- | www/index.html | 107 |
1 files changed, 107 insertions, 0 deletions
diff --git a/www/index.html b/www/index.html new file mode 100644 index 0000000..12a99a3 --- /dev/null +++ b/www/index.html @@ -0,0 +1,107 @@ +<html> + <head> + <meta charset="utf-8"> + <title>Feel</title> + </head> + <body> + <script src="jquery.js"></script> + <script src="highcharts.js"></script> + <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> + <p>Anzahl Messungen: <span id="messungen" /></p> + <p>Zeige die letzten <input type="number" id="maxMessungen" min="100" max="100000" value="1000" /> Messungen</p> + <script type="text/javascript"> +var chart; + +function updateData () { + $.ajax({ + url: "data.csv", + cache: false + }).done(function (content) { + updateChart(content); + }); +} + +function updateChart (data) { + var datarows = data.split("\n"); + var temperaturen = [], feuchtigkeiten = []; + $('#messungen').text(datarows.length); + + var firstNeeded = datarows.length - $('#maxMessungen').val(); + if (firstNeeded > 0) { + datarows.splice(0, firstNeeded); + } + + $.each(datarows, function (lineNumber, datarow) { + var data = datarow.split(","); + var date = parseInt(data[0]); + feuchtigkeiten.push([date, parseFloat(data[1])]); + temperaturen.push([date, parseFloat(data[2])]); + }); + chart.series[0].setData(feuchtigkeiten, true); + chart.series[1].setData(temperaturen, true); +} + +updateData(); +setInterval(updateData, 5000); + +Highcharts.setOptions({ + global: { + useUTC: false + } +}); +chart = new Highcharts.Chart({ + credits: { + enabled: false + }, + chart: { + type: 'spline', + animation: Highcharts.svg, // IE support + renderTo: 'container' + }, + title: { + text: 'Feel' + }, + subtitle: { + text: 'Temperatur und Luftfeuchtigkeit im Wohnzimmer' + }, + plotOptions: { + spline: { + marker: { + enabled: true + } + } + }, + xAxis: { + type: 'datetime', + title: { + text: 'Uhrzeit' + } + }, + yAxis: [{ + title: { + text: 'Prozent' + }, + /*min: 30, + max: 50*/ + }, + { + title: { + text: 'Grad Celsius' + }, + opposite: true, + /*min: 15, + max: 25*/ + }], + series: [{ + yAxis: 0, + name: 'Feuchtigkeit', + data: [] + }, { + yAxis: 1, + name: 'Temperatur', + data: [] + }] +}); + </script> + </body> +</html> |