1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
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>
|
