<html>
<head>
</head>
<body>
<p style="font-family:Arial,sans-serif; font-size:24px; color:black;">
<?php
$phys = array("Datum", "Temperatur außen: ", "rel. Luftfeuchte außen: ", "Temperatur innen: ", "rel. Luftfeuchte innen: ", "Luftdruck: ", "Helligkeit: ");
$units = array("d", "°C", " %rH", "°C", " %rH", " hPa", " lux");
$rows = file('logdata.csv');
$last_row = array_pop($rows);
$data = str_getcsv($last_row);
$num = count($data);
echo "<table class=\"WetterDaten\" style=\"font-family:Arial,sans-serif; font-size:24px; color:black;\">";
for ($c=0; $c < $num; $c++) {
echo "<tr>";
if ($c < 1) {
$d1 = floor($data[$c]/1000); // Sekunden (abgerundet)
$datum = date("d.m.Y H:i:s", $d1);
echo "letzte Wetterdaten: "."<br>";
echo $datum;
}
else {
echo "<td>".$phys[$c]."</td>";
echo "<td>".round($data[$c],2)."</td>";
echo "<td>".$units[$c]."</td>";
}
}
echo "</table>";
?>
</p>
</body>
</html>Diagramm aus .csv-Datei erstellt (graphcsv.php).
<html>
<head>
<script type="text/javascript" src="dygraph.js"></script>
<script type="text/javascript" src="synchronizer.js"></script>
<link rel="stylesheet" href="../dygraph.css">
</head>
<body>
<table>
<tr>
<td>
<div id="graphdiv1" style="width: 700; height: 500"></div>
<script type="text/javascript">
g1 = new Dygraph(
document.getElementById("graphdiv1"),
"logdata.csv", // Pfad zur .csv-Datei
{
strokeWidth: 2,
labels: ['Date', 'avgOutdoorTemp', 'OutdoorHum', 'IndoorTemp', 'IndoorHum', 'Pressure', 'Light'],
ylabel: 'Temperatur [°C]',
y2label: 'rel. Luftfeuchte [%rH]',
visibility: [true, true, true, true, false, false],
series: {
'OutdoorHum': {
axis: 'y2',
color: "teal"
},
'IndoorHum': {
axis: 'y2',
color: "green"
},
'IndoorTemp': {
axis: 'y',
color: "red"
},
'avgOutdoorTemp': {
axis: 'y',
color: "blue"
}
},
axes: {
y2: {
// set axis-related properties here
axisLineColor: "green",
axisLineWidth: 2,
drawGrid: true,
independentTicks: true,
gridLinePattern: [2, 2]
},
x: {
axisLineColor: "black",
axisLineWidth: 2,
valueFormatter: function (x) {
var d = new Date(x);
return d.toLocaleTimeString("de-DE", { year: "numeric", month: "numeric", day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit" })
},
xValueParser: function (x) { return parseInt(x); },
ticker: Dygraph.dateTicker
}
}
}
);
</script>
</td>
<td>
<div id="graphdiv2" style="width: 700; height: 500"></div>
<script type="text/javascript">
g2 = new Dygraph(
document.getElementById("graphdiv2"),
"logdata.csv", // path to CSV file
{
strokeWidth: 2,
labels: ['Date', 'avgOutdoorTemp', 'OutdoorHum', 'IndoorTemp', 'IndoorHum', 'Pressure (hhh m \u00fcNN)', 'Light'],
ylabel: 'Luftdruck [hPa]',
y2label: 'Helligkeit [lux]',
visibility: [false, false, false, false, true, true],
series: {
'Pressure (hhh m \u00fcNN)': {
axis: 'y',
color: "darkmagenta"
},
'Light': {
axis: 'y2',
color: "orange"
}
},
axes: {
x: {
axisLineColor: "black",
axisLineWidth: 2,
valueFormatter: function (x) {
var d = new Date(x);
return d.toLocaleTimeString("de-DE", { year: "numeric", month: "numeric", day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit" })
},
xValueParser: function (x) { return parseInt(x); },
ticker: Dygraph.dateTicker
},
y: {
axisLineColor: "darkmagenta",
axisLineWidth: 2,
valueRange: [800, 1020]
},
y2: {
axisLineColor: "orange",
axisLineWidth: 2,
drawGrid: true,
independentTicks: true,
labelsKMG2: true,
gridLinePattern: [2, 2]
}
}
}
);
var sync = Dygraph.synchronize(g1, g2, {
selection: true,
zoom: true
});
</script>
</td>
</tr>
<tr>
<td>
<br>
</td>
</tr>
</table>
<p style="font-family:Arial;"> // letzte Messwerte unter dem Diagramm darstellen
<?php
$phys = array("Datum", "Temperatur außen: ", "rel. Luftfeuchte außen: ", "Temperatur innen: ", "rel. Luftfeuchte innen: ", "Luftdruck: ", "Helligkeit: ");
$units = array("d", "°C", " %rH", "°C", " %rH", " hPa", " lux");
$rows = file('logdata.csv');
$last_row = array_pop($rows);
$data = str_getcsv($last_row);
$num = count($data);
for ($c=0; $c < $num; $c++) {
if ($c < 1) {
$d1 = floor($data[$c]/1000); // Sekunden (abgerundet)
$datum = date("d.m.Y H:i:s", $d1);
echo $datum;
}
else {
echo " | ".$phys[$c].round($data[$c],2).$units[$c];
}
}
?>
</p>
</body>
</html><< zurück
Keine Kommentare:
Kommentar veröffentlichen