Auf der Seite
http://www.liquidx.net/plotkit/ gibt es eine JavaScript Library mit der sich Kurven-, Balken- und Tortengrafiken aus den Logdaten des Modems direkt im Browser zeichnen lassen.
Um den Einstieg zu erleichtern, hier ein kurzes Beispiel wie zwei Analogwerte als Kurve dargestellt werden können:
Zunächst müssen die Logdaten für das PlotKit als Table zur Verfügung gestellt werden.
Der Table muss dabei dieses Format haben:
Code:
<tbody>
<tr><td>1</td><td>90</td><td>55</td></tr>
<tr><td>2</td><td>88</td><td>0</td></tr>
<tr><td>3</td><td>65</td><td>55</td></tr>
<tr><td>4</td><td>87</td><td>60</td></tr>
...
</tbody>
Die erste Spalte beinhaltet die fortlaufende ID, die anderen beiden Spalten die aufgezeichneten Datenpunkte.
Um das zu erreichen, legt man folgenden Log-Alias für das Logfile "Datalogging_0" an:
Code:
<Datalogging_0_PK _="Datalogging_0" type="HTML" flags="NoDate,NoTime,NoNames" tabstart="<tbody>
" rowstart="<tr>" tagstart="<td>" tagend="</td>" rowend="</tr>
" tabend="</tbody>
"/>
Nun wird das Logfile als versteckter Table via SSI in die Webseite geladen, und der <canvas>-Abschnitt gebildet:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>PlotKit: Alarm Modem Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="MochiKit.js" type="text/javascript"></script>
<script src="excanvas.js" type="text/javascript"></script>
<script src="Base.js" type="text/javascript"></script>
<script src="Layout.js" type="text/javascript"></script>
<script src="Canvas.js" type="text/javascript"></script>
<script src="SweetCanvas.js" type="text/javascript"></script>
</head>
<body>
<div style="margin: 0 auto 0 auto; width: 500px;">
<div><canvas id="chart" width="500" height="300"></canvas></div>
<table id="values" class="data" style="display:none">
<thead>
<tr><td>x</td><td>y1</td><td>y2</td></tr>
</thead>
®(ReadLog=Datalogging_0_PK+last 1 hours);
</table>
<script type="text/javascript">
var layout = new Layout("line", {xOriginIsZero: false});
layout.addDatasetFromTable("dataset2", $("values"), xcol = 0, ycol = 2);
layout.addDatasetFromTable("dataset1", $("values"), xcol = 0, ycol = 1);
layout.evaluate();
var chart = new SweetCanvasRenderer($("chart"), layout);
chart.render();
</script>
</div>
</div>
</body></html>
Achtung: die Zeile
Code:
var layout = new Layout("line", {xOriginIsZero: false});
weicht von dem Beispiel der Herstellerseite ab. Diese Modifikatin ist notwendig, damit die X-Achse nicht beim 0 anfängt, und die Kurve bei steigender ID immer mehr nach rechts gedrückt wird.
Viel Spaß beim Ausprobieren !
_________________
Tixi Support Team
E-Mail-Support, Mo-Fr, 9:00 - 17:00:
Tixi-Support@tixi.com
techn. Hotline, Mo-Fr, 9:00 - 12:00 und 13:00 - 17:00: 0900-100 90 11 für 2€/min
