Temperaturaufzeichnung DS18B20 --> SQLite --> Highcharts/Highstock

  • Ich beziehe mich hier auf einen Beitrag von Webby aus dem Thema Temperaturaufzeichnung mit RRDTool und Highcharts. Da das Thema aber leider nicht mehr nach oben rutscht bei einem neuen Beitrag, habe ich mir erlaubt meinen dort erstellten Eintrag als neues Thema nochmals hier reinzustellen.


    Zuerst danke @Webb :helpnew:y: Danke für den Code der Seite. Allerdings krieg ich da keine Daten angezeigt. Könntest du mir evtl. dein xml zeigen? Ich denke, dass der Fehler bei mir im Aufbau der xml liegt.

    Danke

    So ich erweitere mal meinen Eintrag, evtl. hilft euch das dann ja weiter. Ich denke ich habe ein allgemeines Verständnisproblem und kriegs darum nicht hin.

    Als DB habe ich SQLite:

    Code
    sqlite3 --version
    3.7.13 2012-06-11 02:05:22 f5b5a13f7394dc143aa136f1d4faba6839eaa6dc


    Darin habe ich ein Datenbank namens ds18b20.db erstellt.

    Pro Temperatursensor (aussen, heizung, wohnen) gibt es eine Tabelle mit folgender Struktur:

    Code
    +----------+-------+----------+----------+---------------+-------------+
    | Column # | Field | Type     | Not NULL | Default Value | Primary Key |
    +----------+-------+----------+----------+---------------+-------------+
    |        0 | zeit  | DATETIME | Yes      | None          | Yes         |
    |        1 | wert  | REAL     | No       | None          | No          |
    +----------+-------+----------+----------+---------------+-------------+


    Die Werte darin werden als Unix Timestamp und als Zahl mit zwei Nachkommastellen gespeichert (z.B. 1449498241 7.56).

    Soweit funktioniert alles ohne Probleme. Die Werte kommen an und sehen soweit gut aus.

    Wenn ich es jetzt richtig verstehe, kann ich nicht direkt aus Highcharts/Highstock heraus auf die Datenbank zugreifen und die Werte auslesen, sondern muss diese in irgendeiner anderen Form zuerst bereitstellen (z.B. xml /Textdatei / JSON). Mein Favorit hier wäre JSON, wobei ich euch nicht erklären kann warum.

    Um die Daten aus SQLite in eine JSON-Datei zu bekommen habe ich mir das PHP-Script getData.php mit Hilfe des Internets geschrieben:

    Dies sollte jetzt irgendwie wieder in eine HTML-Datei eingelesen werden können (ich habs mit Webby's Codebeispiel probiert!), woran ich aber seit vier Wochen scheitere, egal was ich mir durchlese und ausprobiere. Ich habs mit einem 1:1-Beispiel aus dem "Highcharts Cookbook" von Michael Terwood probiert. Bis zu dem Punkt wo die Daten aus einer externen Quelle kommen sollen bekomme ich es hin. :wallbash:

    Kann mir hier jemand weiterhelfen? :helpnew: PHP und Javascript sind jetzt nicht meine Spezialgebiete, ich möchte aber doch gerne die Daten am Schluss in einer Highstock-Grafik darstellen, damit ich mittels dem Highstock-Slider mir den Bereich aussuchen kann, der mich interessiert.

  • Temperaturaufzeichnung DS18B20 --> SQLite --> Highcharts/Highstock? Schau mal ob du hier fündig wirst!

  • Hallo,

    du hast dir aber schon einen Webserver aufgesetzt, oder?
    Dann versuch erstmal aus den Highcharts Docs ein Beispiel zum laufen zu bringen (am besten Line-Chart), danach kannst du dann dieses Beispiel so umbauen das deine Daten eingelesen werden.


  • du hast dir aber schon einen Webserver aufgesetzt


    Ja, ein funktionierender Lighttpd läuft.


    Dann versuch erstmal aus den Highcharts Docs ein Beispiel zum laufen zu bringen (am besten Line-Chart), danach kannst du dann dieses Beispiel so umbauen das deine Daten eingelesen werden.


    Hab ich schon probiert, die Beispiele bringe ich zum Laufen. Ein Beispiel mit einer Line-Chart hatte ich versucht umzubauen, dass mir meine eigene JSON-Datei genommen wird. Allerdings ohne Erfolg.

    Bei mir hakts irgendwo bei den beiden Punkten

    • Wie muss eine aus SQLite generierte JSON- oder XML- oder Textdatei im Inneren aussehen, damit Highcharts sie akzeptiert.
    • Wie binde ich die Datei dann ein, dass mir die x-Achse mit den Zeitstempeln und die y-Achse mit den Temperaturwerten gefüllt wird.


    Da steh ich echt auf der Leitung.
    Automatisch zusammengefügt:

    Das Thema habe ich mir komplett durchgelesen und auch versucht deine Scripte zu verstehen. Da ich kein Programmierer bin, hatte ich da echt meine Mühe damit und musste mir irgendwo mittendrin eingestehen, dass es keinen Sinn macht es weiter zu versuchen.

    Ich werde aber über Weihnachten/Neujahr (genug Schlechtwettertage vorausgesetzt) nochmals versuchen deinen Ansatz nachzuvollziehen und zu verstehen.

    :danke_ATDE: nochmals für deinen Link.

    Einmal editiert, zuletzt von silverstripe (8. Dezember 2015 um 17:39)


  • Bei mir hakts irgendwo bei den beiden Punkten

    • Wie muss eine aus SQLite generierte JSON- oder XML- oder Textdatei im Inneren aussehen, damit Highcharts sie akzeptiert.
    • Wie binde ich die Datei dann ein, dass mir die x-Achse mit den Zeitstempeln und die y-Achse mit den Temperaturwerten gefüllt wird.

    Du musst keine extra Datei für die JSON Daten anlegen, du kannst JSON direkt mit PHP erzeugen.

    Wichtig ist das du die Datenbank so aufbaust dass du einen Zeitstempel (unixtime) hast und die SQL Abfrage dann entsprechend fertig sortiert ausgibst.

    Guck dir dazu einfach meine data.php an.
    Dem PHP Script übergebe ich den Zeitraum zum auslesen (period) sowie den jeweiligen Sensor-Typ (temp oder hum) für den jeweiligen Chart.
    Dann frage ich alle "locations" von der Datenbank ab, also die Orte wo Sensoren platziert sind (Zeile 32), erzeuge für jeden Datensatz ein Array (Zeile 34) und frage dann den jeweiligen Zeitraum für jeden Ort ab (Zeile 36).
    Wenn es dann Daten von dem Sensor-Typ gibt wird passend für HighCharts ein Array erzeugt welches "data" und "name" beinhaltet - das erwartet Highcharts als Inhalt im JSON. Und nach dem erfassen der Daten wird aus den Arrays der JSON gebildet sowie ausgegeben: Zeile 54.
    In der index.php wiederum verwende ich jquery um die Ausgabe von data.php zu verwenden: $.getJSON ... Das geschieht 2x, ein mal für temp und ein weiteres mal für hum: Zeile 126 und 168. "series:" sind die json Daten und alles andere sind Einstellungen für Highcharts. Wie das ganze dann aussieht kannst du dir in meiner Demo angucken.

    Du brauchst also eigentlich nur noch die SQL Abfragen für SQLite anpassen - ich verwende dafür in der functions.php hinterlegte PHP-Funktionen..

  • Ausgehend von diesem Beispiel:

    musst du das JSON file in Javascript laden und dir daraus 2 Arrays zusammen basteln. Das erste enthält die x-Werte (die sind bei dir noch als Timestamp, die solltest du vorher mit Hilfe des Date Objekts in irgendwas anschauliches umwandeln, z.B. "hh:mm") und das zweite die y-Werte. Das ist erstmal eine reine Javascript Aufgabe, die kannst du losgelöst von Highcharts testen.

    Deine beiden Arrays sollten dann so aussehen:

    Code
    x-data = ['06:10', '06:11', '06:12', '06:13']
    y-data = [19.5, 19.9, 20.0, 20.7]

    Wenn du soweit bist kannst du dadrunter dein Highcharts-Code mit zwei kleinen Änderungen packen:

  • Soweit nochmals danke für die Antworten.

    meigrafd: Ich finds super, dass du deinen ganzen Code für die Allgemeinheit zugänglich gemacht hast, so kann jeder profitieren. Allerdings ist es für einen Anfänger auf dem Gebiet JSON/Javascript einfach zu mächtig um es zu verstehen. Ich bin regelrecht erschlagen.

    Wie gesagt, ein ganz simples Beispiel (wäre evtl. etwas für die Tutorial-Sektion), wie eine JSON-Datei im inneren aussehen muss, wie ich z.B. 2-3 Spalten einer Tabelle sauber in ein JSON reinbekomme und wie ich aus dem JSON-File dann die Daten in Highcharts bekomme fehlt mir im ganzen weiten Internet.

    Daher ist hier

    ...musst du das JSON file in Javascript laden...

    spätestens nur noch :huh: :huh: :huh: angesagt weil ich nicht weiss:

    • wie muss die JSON-Datei aussehen, damit es überhaupt klappt
    • wie lädt man dann die Daten aus der JSON-Datei in Javascript rein
    • und verarbeitet das ganze nachher in Highcharts zu schönen Grafiken.
  • Es ist egal wie eine JSON Datei im inneren aussieht, das ist nebensächlich. Wichtig ist in diesem Fall nur das Highcharts eine gewisse Struktur verlangt um daraus einen Graphen erstellen zu können.

    Auch scheinst du noch nicht zu verstehen das man keine JSON-Datei erstellt, sondern diese Daten einfach direkt an Highcharts übergibt. Man ließt die Infos aus der Datenbank aus, strukturiert sie und generiert daraus einen JSON Datensatz welchen man an Highcharts übergibt.
    Wozu die Daten aus der Datenbank holen, eine Datei erzeugen, diese Datei dann wieder einlesen und erst dann an Highcharts übergeben? :s

    Verrate Uns doch einfach mal welche Spalten deine Datenbanktabelle hat und zeige uns dazu dann auch mal einen Datensatz. Ich glaube dieser Weg wäre einfacher.


    Ansonsten, wenn du weiterhin unbedingt wissen willst wie so ein JSON Datensatz auszusehen hat ist es doch ganz einfach: Rufe einfach die data.php von meiner Demo direkt auf, dann sieht du's: http://raspberrypi.roxxs.org/charts/data.ph…=temp&period=1y
    Aber was bringt dir diese Info wenn du den Rest nicht verstehst?

  • Auch scheinst du noch nicht zu verstehen das man keine JSON-Datei erstellt


    Ähm, damit ich das jetzt recht verstehe, Highstock kann sich die Daten direkt aus der SQLite-Datenbank ziehen? Ich brauche keinen Zwischenschritt über eine Datei, die mir die Daten für Highstock aufbereitet?
    Sorry, dann habe ich bisher wirklich ALLE Beispiele komplett falsch interpretiert. :wallbash:

    Verrate Uns doch einfach mal welche Spalten deine Datenbanktabelle hat und zeige uns dazu dann auch mal einen Datensatz. Ich glaube dieser Weg wäre einfacher.


    Sehr gerne. Hier die aktuellen Daten, des Aussensensors.

    Die beiden anderen Tabellen (heizung/wohnen) sind identisch aufgebaut.


    Natürlich gebe ich dir vollkommen recht, dass alles weitere keinen Sinn hat, wenn ich das hier nicht verstehe. Ich hoffe mit diesen Angaben könnt ihr etwas anfangen und mir weiterhelfen. Sorry fürs etwas doof anstellen.

    Einmal editiert, zuletzt von silverstripe (14. Dezember 2015 um 15:49)

  • Na das sieht doch schon relativ gut aus. Allerdings hast du nicht wie "verlangt" die Spalten-Namen gepostet, also muss ich nun Raten und du das entsprächend anpassen.

    Du schnappst dir meine HighCharts Dateien und erweiterst das einfach wie folgt:

    In include/functions.php wirfst du erst die beiden erste Funktionen query und mysql_con raus weil die brauchst Du nicht :fies: Die andere aber drin lassen. Dann nimmst du dir die Funktions aus >diesem< Beitrag (erste PHP-Block unter "Anwendung über PHP") und fügst sie dort stattdessen ein.

    Dann in include/config.php die oberen db* Einstellungen anpassen sowie am besten dort auch noch $SQLITEdb (oder so) einfügen mit Verweis auf die Datenbankdatei. Außerdem wär es einfacher wenn du auch noch die von dir verwendeten Tabellen-Namen in eine Variable einfügst um die dann auszulesen: [code=php]$dbTables = "aussen,heizung,wohnen";[/php]

    Dann in der index.php die Abschnitte bezüglich "Humidity" rauswerfen denn das scheinst du nicht zu haben.

    Und nun brauchst du eigentlich nur noch data.php bearbeiten... Hier brauchst du erst ab Zeile 26 etwas ändern, bzw am Einfachsten Alles ab Zeile 26 bis 52 raus löschen. Das ersetzt du dann mit folgendem:

    [code=php]
    // spalten name von dem temperatur wert
    $Type = "temp";

    $db = db_con($SQLITEdb);
    // Get Data from each "location"
    $dataResult = array();
    foreach(explode(",", $dbTables) AS $location) {
    $data = array();
    $query = $db->query("SELECT timestamp,".$Type." FROM ".$location."
    WHERE timestamp >= UNIX_TIMESTAMP(DATE_SUB(NOW(), INTERVAL ".$PeriodNum." ".getPeriodUnit($Period)."))
    AND timestamp <= UNIX_TIMESTAMP()
    ORDER BY timestamp ASC
    ;");
    while ($result = $query->fetch(PDO::FETCH_ASSOC)) {
    if (!empty($result[$Type])) {
    $data['data'][] = array((float)($row2['timestamp']*1000), (float)$row2[$Type]);
    }
    }
    if (isset($data['data'])) {
    $data['name'] = $location;
    array_push($dataResult, $data);
    }
    }
    [/php]


    Ob das mit Highstock auch so abläuft weiß ich btw nicht, bisher war hier von Highcharts die Rede, und auch nur das nutze ich :-/

  • Hallo meigrafd

    Vielen, vielen Dank für deine super ausführlichen Erklärungen. Ich versuch dies mal so anzupassen und melde mich dann wieder. Ich versuchs zuerst mal mit Highcharts. Highstock würde mir am Schluss besser gefallen, da ich den Slider unter der Grafik toll finde um den Zeitbereich einzugrenzen, den man sich ansehen will.
    Highstock ist eine Erweiterung von Highcharts und beinhaltet (angeblich) Highcharts komplett.

    Sorry für die Umstände mit den Namen der Felder, die waren ganz oben im ersten Beitrag mal drin. Dass sich nicht jeder nochmals durch alles durchlesen möchte leuchtet aber ein. Also hier nochmals nachgereicht:

    Code
    +----------+-------+----------+----------+---------------+-------------+
    | Column # | Field | Type     | Not NULL | Default Value | Primary Key |
    +----------+-------+----------+----------+---------------+-------------+
    |        0 | zeit  | DATETIME | Yes      | None          | Yes         |
    |        1 | wert  | REAL     | No       | None          | No          |
    +----------+-------+----------+----------+---------------+-------------+

    :danke_ATDE:

  • So ich hab mich mal hingehockt und versucht alles nach deinen Angaben herzurichten. Alle deine Highchartsdateien liegen zum Testen unter /var/www/zzz_Highcharts/master. Die Webseite wird soweit aufgebaut, allerdings werden wohl keine Daten ausgelesen.

    In der data.php hab ich das Problem, dass das alles umschliessende if() nicht gültig zu sein scheint, ansonsten müsste ich auf der Konsole ja mein echo "Hallo" als Ausgabe bekommen.
    [code=php]<?php
    //------------------------------------------------------
    require_once('include/global.php');
    //------------------------------------------------------
    $type='wert';
    if (isset($_GET['type'])) {
    echo "Hallo";
    ...
    [/php]

    Hast du hier einen Tipp wo ich suchen soll?

  • Ähm, das wird so jedenfalls nichts werden :fies:

    1. $type='wert'; ? Case-Sensitiv! In meiner data.php wird nur $Type verwendet, nicht $type.
    2. "$type='wert';" kannst du aber getrost löschen. Wenn du data.php über die Shell-Konsole aufrufst wird in dem von dir verwendeten Fall $type nicht verwendet. $_GET ist eine Übergabe an die PHP Datei, in diesem Fall direkt über den Aufruf. Also wenn du möchtest das die erste 'if' greift musst du die PHP wie folgt aufrufen:

    Code
    wget -qO- "http://localhost/zzz_Highcharts/master/data.php?type=bla"

    ...oder wie auch immer die URL bei dir lautet...

  • Hallo meigrafd

    Der Aufruf der Seite würde lauten: http://freihofer.mooo.com/zzz_Highcharts/master/?period=24h. Allerdings immer noch ohne Highcharts-Grafik.

    Ich hab mir jetzt mal erlaubt, die data.php anzupassen und hab die erste Prüfung auskommentiert. Nützt immer noch nichts.

    [code=php]<?php
    //--------------------------------------------------------------
    require_once('include/global.php');
    //--------------------------------------------------------------

    // if (isset($_GET['Type'])) {
    // if ($_GET['Type'] == 'temp') {
    // $Type = 'temp';
    // }
    if (isset($_GET['period'])) {
    $Period = $_GET['period'];
    // remove all numbers from period string (eg. from 12h so only h is left)
    $PeriodUnit = preg_replace('/[0-9]+/', '', $Period);
    // remove the Unit from period string so only numbers are left
    $PeriodNum = str_replace($PeriodUnit, '', $Period);
    } else {
    $Period = '6h';
    $PeriodUnit = preg_replace('/[0-9]+/', '', $Period);
    $PeriodNum = str_replace($PeriodUnit, '', $Period);
    }

    // Spaltenname des Temperaturwerts
    $Type = 'wert';

    $db = db_con($SQLITEdb);
    // Get Data from each "location"
    $dataResult = array();
    foreach(explode(",", $dbTables) AS $location) {
    $data = array();
    $query = $db->query(" SELECT zeit,wert
    FROM ".$location."
    WHERE zeit >= UNIX_TIMESTAMP(DATE_SUB(NOW(), INTERVAL ".$PeriodNum." ".getPeriodUnit($Period)."))
    AND zeit <= UNIX_TIMESTAMP()
    ORDER BY zeit ASC
    ;");
    while ($result = $query->fetch(PDO::FETCH_ASSOC)) {
    if (!empty($result[$Type])) {
    $data['data'][] = array((float)($row2['zeit']*1000), (float)$row2[$Type]);
    }
    }
    if (isset($data['data'])) {
    $data['name'] = $location;
    array_push($dataResult, $data);
    }
    } // end foreach()
    print json_encode($dataResult);
    // } // end if (isset($_GET['Type']))
    ?>[/php]

    Dass Highcharts auf dem Raspi läuft habe ich geprüft. Nimmt man eines der Beispiele, erhält man auch eine schöne Grafik. Hier ein auf dem Raspi laufendes Beispiel. Ungefähr so möchte ich mir nachher meine Temperaturdaten ebenfalls darstellen lassen, wenns dann mal mit deiner Hilfe und deinen Dateien für Highcharts geklappt hat.

    Funktionierendes Beispiel mit Highstock


    Ich denke die Temperatur/Datumswerte werden entweder nicht ausgelesen oder kommen nicht in Highcharts an. Ich weiss nur nicht mehr, wo ich noch suchen soll. :wallbash:

  • Hallo allerseits

    Mir geht's einwenig wie silverstripe: Da ich vom Programmieren nur wenig Ahnung habe, erschlägt mich die Menge der verschiedenen Sprachen (HTML, CSS, PHP, Javascript, JSON, Python,...).
    Es ist einwenig wie eine Reise durch sechs verschieden sprachige Länder.

    Welche Möglichkeit gibt es, dass mir jemand das Ganze Schritt für Schritt, anhand ganz einfacher Beispiele, erklärt ?
    Am einfachsten stell ich mir das Ganze via Skype (Audio und RemoteDesk) vor.
    Daten via Python in eine Sqlite-Datenbank zu schreiben krieg ich noch hin aber ab dann versteh ich die Sprachen (Syntax, Orthografie, Grammatik,...) nicht mehr.

    Wenn jemand glaubt, die Kompetenz und Geduld dazu zu haben, dann würde ich mich über eine PM freuen :)

    Gruss Alain

  • So, ich hatte jetzt mir nochmals dafür Zeit genommen, verzweifle aber weiterhin an der Aufgabe. Mein Problem ist weiterhin, dass das Beispiel einfach zu komplex ist für den Anfang, damit man die Zusammenhänge verstehen kann.

    Es fängt schon damit an, dass ich den Umbau des data.php auf SQLite3 nicht hinbekomme.

    Meine Daten in der SQLite sehen so aus:

    Code
    +-----------+------+
    | zeit      | wert |
    +-----------+------+
    | 147082541 | 5.25 |
    | 147082601 | 4.43 |
    | 147082661 | 5.18 |
    | usw.

    Zeit ist als DateTime und Wert als Real definiert. Gerundet wird der Wert beim Auslesen, bevor ich ihn in die SQLite schreibe. Ein einfaches Beispiel, dass nur mal mit einem Datensatz arbeitet, was man dann später mittels der oben erwähnten data.php selbst ausbauen kann fehlt. Jetzt nicht nur hier in dem Thread, nein im ganzen Forum, ja sogar im ganzen Netz. Bei allen Beispielen wird immer davon ausgegangen, dass der Betreffende alles über drei von vier Dingen komplett weiss.

    Würde ich das ganze zum Laufen bringen, würde ich gerne ein anfängerfreundliches Tutorial dazu schreiben. Es geht ja nicht nur mir so, es geht ja Alain so und vermutlich noch zig anderen da draussen.

    Ich bin auch der Meinung, dass man sich einlesen und -arbeiten soll. Aber das hier empfinde ich so, als würde ich Java von Grund auf lernen und die erste Aufgabe die gestellt wird lautet: "Entwickle eine Telefonnummernverwaltung mit DB-Anbindung und GUI", bitte alles schön auseinandernehmen wie in objektorientierter Programmierung normal". Und das ohne, dass man vorher die Grundlagen erläutert bekommt.

    Ja es tönt nach Geheule. Ja es kann nervig sein, wenn man etwas kann und es den Anfängern dutzend Mal erklären muss. Aber würde es ein einziges, simples, gut erklärtes Tutorial geben, sagen wir für DB --> JSON --> Highcharts mit den gängigen Datenbanken (MySQL, SQLite, PostgreSQL), wären vielen geholfen.

    Natürlich müsste man das auch aktuell halten, da der Verbindungsaufbau beim neuen major release von PHP oder DB auch mal anders aussehen kann. Wäre jetzt mein Geschenk ans Forum wenn ichs hinbekomme.

    Worauf ich echt keine Lust mehr habe ist, dass ich nochmal 30-40 Stunden investiere in etwas, was mir bisher nur Frust bereitet hat.

    So jetzt fertig geheult. Wenn jemand Interesse hat uns Anfängern das nochmals sauber und von Grund auf zu erklären, danke von mir schon jetzt, andernfalls würde ich das Projekt Highcharts/Highstock für mich als gescheitert erklären.


  • So jetzt fertig geheult. Wenn jemand Interesse hat uns Anfängern das nochmals sauber und von Grund auf zu erklären, danke von mir schon jetzt, andernfalls würde ich das Projekt Highcharts/Highstock für mich als gescheitert erklären.


    First of all: Ich habe NICHT alles gelesen!

    Gut wenn du nun fertig bist mit Heulen, kannst du dir das mal angucken!


    Meine JSON: (Es ist für mein Terrarium)


    Wichtig hierbei ist für dich nur __"Origi": "28250\n"__ !

    Wie die JSON erstellt wir haste ja rausbekommen denke ich?

    So der trick, oder hack oder wie man es nennen mag ist es, eine php datei zu erstellen...

    Du schriebst ganz normal den HTML code.

    bei deinem JavaScript für das HighChart mach du dann folgendes:


    und schon wird ein Chart gezeichnet...

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!