Ich lese das Buch "Die elektronische Welt mit Raspberry Pi entdecken" von Erik Bartmann. Darin ist unter anderem ein Projekt beschrieben, in dem analoge Werte von einem A/D Wandler an den RasPi gehen und diese grafisch mit "Flot" (flotcharts.org) ausgewertet werden.
Das funktioniert bei mir soweit alles genau wie vom Autor beschrieben. Mein Anwendungsfall ist aber anders gelagert, daher benötige ich nicht 50 Messwerte, sondern bei sekündlicher Abfrage und 24h Darstellung 60x60x24 = 86.400 Werte. Die Datei mit dieser Anzahl Werte kann ich erzeugen und auch im Browser darstellen. Auch die Darstellung ansich habe ich soweit angepasst. Der Browser ist damit zwar stark beschäftigt, aber durch die Änderung des Aktualisierungsintervalls auf testweise 5 Sekunden hält es sich in Grenzen.
Die Werte werden rechts in der Grafik ergänzt und fallen dementsprechend links aus der Grafik heraus, die lediglich einen 24 stündigen Zeitraum anzeigen soll. Die beigefügte Grafik umfasst nur 3.600 Werte.
Ich möchte auf der x-Achse die vollen Stunden (hh:mm) anzeigen, die dann mit der Grafik nach links wandern. So hat man einen groben Überblick über den zeitlichen Zusammenhang.
Wie müsste ich das Script dazu abändern?
[code=php]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="refresh" content="5" >
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
</head>
<body>
<h1>A/D-Wandler-Messwerte (MCP3008)</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
<p>In diesem Graphen werden die gemessenen analogen Werte des <i><b>MCP3008</b></i> angezeigt.</p>
<script type="text/javascript">
$(function () {
var options = {
lines: { show: true },
points: { show: false },
xaxis: { tickDecimals: 0, tickSize: 60 },
grid: {hoverable: false }
};
<?php
$datafilename = "channeldata.txt"; // Daten-Datei
if(file_exists($datafilename)){ // Existiert die Datei?
$file_handle = fopen($datafilename, "rw"); // Datei lesen
$i = 0; // Laufvariable
$line = ""; // Gelesener Wert
$tupel = ""; // Tupel [x, y]
$var = ""; // Variable
while (!feof($file_handle)){
$line = fgets($file_handle);
$tupel .= "[".$i.", ".trim($line)."], ";
$i++;
}
fclose($file_handle);
$var = "var a0 = [".$tupel."];\n";
echo $var; // Benoetigte Variable f�r Flot-Chart ausgeben
} else{ /* ... */ }
?>
// Anzeigen des Graphen
$.plot($("#placeholder"), [{data: a0, label: "Analog/Data: <b>Kanal 0</b>", color: 2}], options);
});
</script>
</body>
</html>[/php]