Aufzeichnung von Sensordaten und grafische Auswertung mit Highcharts

    This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

    • Aber Du hast keine Idee woran das liegen könnte? Oder jemand anderes?
      Eigentlich kann es ja an fehlendem PHP nicht liegen,
      denn das Script von Dir wird auf dem selben Serfer ausgeführt, wo auch SHC läuft.
      Und dort klappt es ja einwandfrei.
      Kann ich dem Script vielleicht irgendwie zusätzliche Infos mitgeben, damit das richtig funktioniert?

    • So, da war ein Fehler im Script, keine Ahnung wie das passiert ist, aber der Opener hat plötzlich gefehlt,
      ist mir die ganze Zeit nicht aufgefallen.
      Naja, habe das jetzt angepasst, viel weiter bin ich trotzdem nicht:

      Die Seite 192.168.1... funktioniert nicht

      192.168.1.... kann diese Anfrage momentan nicht verarbeiten.
      HTTP ERROR 500

      Es ist zum Mäuse melken

    • tatsächlich:
      12 08:57:06.726412 2016] [:error] [pid 21276] [client 192.168.1.43:50277] PHP Parse error: syntax error, unexpected '$conn' (T_VARIABLE) in /var/www/sensors/datatemphumi.php on line 1


      Eine Idee?
      Kann das vielleicht daher kommen, das die Spalte "Spannung" leer ist?
      Ne oder?

      PHP Source Code

      1. <?php$conn = mysqli_connect("192.168.1.68","admin", "xxxxxx", "Sensoren"); if (!$conn) {
      2. die('Kann nicht verbinden: ' . mysql_error());
      3. }
      4. $sth = $conn->query("SELECT Temperatur FROM Keller"); $rows = array(); $rows['name'] = 'Temperatur'; while($r = mysqli_fetch_array($sth)) {
      5. $rows['data'][] = $r['Temperatur'];
      6. }
      7. $sth = $conn->query("SELECT Luftfeuchte FROM Keller"); $rows2 = array(); $rows2['name'] = 'Luftfeuchte'; while($rrrr = mysqli_fetch_array($sth)) {
      8. $rows2['data'][] = $rrrr['Luftfeuchte'];
      9. }
      10. $sth = $conn->query("SELECT Spannung FROM Keller"); $rows1 = array(); $rows1['name'] = 'Spannung'; while($rr = mysqli_fetch_array($sth)) {
      11. $rows1['data'][] = $rr['Spannung'];
      12. }
      13. $sth = $conn->query("SELECT Zeit FROM Keller"); $rows3 = array(); $rows3['name'] = 'Zeit'; while($rrr = mysqli_fetch_array($sth)) {
      14. $rows3['data'][] = strtotime($rrr['Zeit'])*1000;
      15. }
      16. $result = array(); array_push($result,$rows); array_push($result,$rows2); array_push($result,$rows1); array_push($result,$rows3); print
      17. json_encode($result, JSON_NUMERIC_CHECK); mysqli_close($conn); ?>
      Display All

      The post was edited 1 time, last by mastadook ().

    • hier der export, ist auf enabled:

      mysql

      MySQL Supportenabled
      Active Persistent Links0
      Active Links0
      Client API version5.5.50
      MYSQL_MODULE_TYPEexternal
      MYSQL_SOCKET/var/run/mysqld/mysqld.sock
      MYSQL_INCLUDE-I/usr/include/mysql
      MYSQL_LIBS-L/usr/lib/arm-linux-gnueabihf -lmysqlclient_r

      DirectiveLocal ValueMaster Value
      mysql.allow_local_infileOnOn
      mysql.allow_persistentOnOn
      mysql.connect_timeout6060
      mysql.default_hostno valueno value
      mysql.default_passwordno valueno value
      mysql.default_portno valueno value
      mysql.default_socket/var/run/mysqld/mysqld.sock/var/run/mysqld/mysqld.sock
      mysql.default_userno valueno value
      mysql.max_linksUnlimitedUnlimited
      mysql.max_persistentUnlimitedUnlimited
      mysql.trace_modeOffOff

      mysqli
      MysqlI Supportenabled
      Client API library version5.5.50
      Active Persistent Links0
      Inactive Persistent Links0
      Active Links0
      Client API header version5.5.50
      MYSQLI_SOCKET/var/run/mysqld/mysqld.sock

      DirectiveLocal ValueMaster Value
      mysqli.allow_local_infileOnOn
      mysqli.allow_persistentOnOn
      mysqli.default_hostno valueno value
      mysqli.default_port33063306
      mysqli.default_pwno valueno value
      mysqli.default_socket/var/run/mysqld/mysqld.sock/var/run/mysqld/mysqld.sock
      mysqli.default_userno valueno value
      mysqli.max_linksUnlimitedUnlimited
      mysqli.max_persistentUnlimitedUnlimited
      mysqli.reconnectOffOff
      mysqli.rollback_on_cached_plinkOffOff

    • OK, super, so hatte ich das aus Deinem 4er Pack (Scripte) rauskopiert... vielleicht schaust Du dort nochmal, nicht das andere auch das Problem bekommen.
      Oder mein Texteditor hat da Quatsch gemacht?

      Jetzt bekomme ich Deine Fehlermeldung: Kann nicht verbinden:

      Wir nähern uns dem Ziel, ich sehe es schon als Punkt am Ende des Tunnels ;)

    • Die Scripte im zip-File sehen bei mir gut aus, allerdings verwende ich hier Linux, da kann der Windows-Editor schonmal mit Zeilenumbrüchen Probleme haben (UTF-8 vs. UTF-16LE). Deshalb sollte man nie einfach wild loskopieren ;)

      Dass es mit der IP-Adresse nicht funktioniert liegt daran, dass mySQL standardmässig nur auf localhost lauscht, kannst du in der my.cnf einstellen. Bei

      bind-address = 127.0.0.1


      Was die leere Seite angeht: Heissen deine Variablen alle genauso wie bei mir? Hast du die Datei auch mal auf fehlerhafte Umbrüche überprüft?

    • von einem zweiten PI schreibe ich ja die Daten in die Datenbank,
      von demher hätte es gehen sollen mit der IP dachte ich, naja, egal ;)

      die datatemphumi.php scheint jetzt zu laufen, siehe hier:
      [{"name":"Temperatur","data":[21.5,21.5,21.5,21.5,21.5,21.5,21.5,21.5,21.6,22.3,21.6,21.6,21.5,21.5]},{"name":"Luftfeuchte","data":[68.9,69,69,69.1,68.9,68.9,67.4,65.9,65.1,64.7,66.3,66.8,67.3]},{"name":"Spannung","data":["","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","",""]},{"name":"Zeit","data":[1473542571000,1473542574000,1473542576000,1473542578000,1473542581000,1473542597000,1473544803000,1473548404000,1473552002000,1473555603000,1473559203000,1473562803

      bei der temphumi.php habe ich nur dein "Bad" durch mein "Keller" ersetzt.
      Sehe da jetzt keine fehlenden Zeilenumbrüche.
      Ich poste trotzdem mal hier den Quelltext:

      HTML Source Code

      1. <!DOCTYPE HTML>
      2. <html>
      3. <head>
      5. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" / >
      6. <meta http-equiv="refresh" content="150">
      7. <title>Keller</title>
      8. <script type="text/javascript" src="charts/js/jquery.min.js"></script>
      9. <script type="text/javascript">
      13. $(document).ready(function() {
      15. ////////////////////////////////////////////// globale Optionen
      17. Highcharts.setOptions({
      18. lang: {
      19. contextButtonTitle: "Kontextmenü",
      20. decimalPoint: ",",
      21. downloadJPEG: "JPEG herunterladen",
      22. downloadPDF: "PDF herunterladen",
      23. downloadPNG: "PNG herunterladen",
      24. downloadSVG: "SVG herunterladen",
      25. drillUpText: "Zurück zu {series.name}",
      26. loading: "Lade...",
      27. months: [ "Januar" , "Februar" , "März" , "April" , "Mai" , "Juni" , "Juli" , "August" , "September" , "Oktober" , "November" , "Dezember"],
      28. noData: "Keine Daten zum Anzeigen",
      29. numericSymbols: [ "k" , "M" , "G" , "T" , "P" , "E"],
      30. printChart: "Diagramm drucken",
      31. resetZoom: "Zoom zurücksetzen",
      32. resetZoomTitle: "Zoomlevel auf 1:1 zurücksetzen",
      33. shortMonths: [ "Jan" , "Feb" , "Mär" , "Apr" , "Mai" , "Jun" , "Jul" , "Aug" , "Sep" , "Okt" , "Nov" , "Dez"],
      34. shortWeekdays: [ "So" , "Mo" , "Di" , "Mi" , "Do" , "Fr" , "Sa"],
      35. thousandsSep: ".",
      36. weekdays: [ "Sonntag" , "Montag" , "Dienstag" , "Mittwoch" , "Donnerstag" , "Freitag" , "Samstag"]
      37. }
      38. });
      40. ////////////////////////////////////////////// generelle Optionen des Diagramms
      42. var options = {
      43. chart: {
      44. zoomType: 'x',
      45. alignTicks: false,
      46. renderTo: 'container',
      47. type: 'spline',
      48. marginRight: 180,
      49. marginBottom: 120,
      50. backgroundColor: '#000000',
      51. plotBackgroundColor: '#000000',
      52. plotBorderWidth: 1,
      53. plotBorderColor: '#444444',
      54. plotBorderRadius: 5
      55. },
      56. title: {
      57. text: 'Keller',
      58. style: {color: '#ffffff'},
      59. x: -55
      60. },
      62. ////////////////////////////////////////////// Optionen der Charts
      64. plotOptions: {
      65. spline: {
      66. marker: {
      67. radius: 3
      68. },
      69. lineWidth: 3,
      70. states: {
      71. hover: {
      72. lineWidth: 5
      73. }
      74. },
      75. threshold: null
      76. }
      77. },
      79. ////////////////////////////////////////////// Optionen der X-Achse
      81. xAxis: {
      82. crosshair: false,
      83. type: 'datetime',
      84. tickInterval: 0.1,
      85. labels: {
      86. style: {color: '#ffffff'},
      87. format: '{value: %e.%b %Y<br/>%H:%M}',
      88. dateTimeLabelFormats: {
      89. second: '%d.%m.%Y<br/>%H:%M:%S',
      90. minute: '%d.%m.%Y<br/>%H:%M',
      91. hour: '%d.%m.%Y<br/>%H:%M',
      92. day: '%Y<br/>%d.%m',
      93. week: '%Y<br/>%d.%m',
      94. month: '%m.%Y',
      95. year: '%Y'
      96. }
      97. }
      98. },
      100. ////////////////////////////////////////////// Optionen der Y-Achsen
      102. yAxis: [{ //////////////////////////////////// Y-Achse 1
      103. title: {
      104. tickInterval: 0.1,
      105. text: 'Temperatur',
      106. rotation: -90,
      107. style: { color: '#ffffff'}
      108. },
      109. labels: {
      110. style: {color: '#ffffff'},
      111. format: '{value}°C',
      112. },
      113. gridLineWidth: 0
      114. },
      115. { //////////////////////////////////// Y-Achse 2
      116. title: {
      117. tickInterval: 0.1,
      118. text: 'Luftfeuchte',
      119. rotation: 90,
      120. style: {color: '#ffffff'}
      121. },
      122. labels: {
      123. style: {color: '#ffffff'},
      124. format: '{value}%',
      125. },
      126. opposite:true,
      127. gridLineWidth: 0
      128. },
      129. { //////////////////////////////////// Y-Achse 3
      130. title: {
      131. tickInterval: 0.1,
      132. text: 'Spannung',
      133. rotation: 90,
      134. style: { color: '#ffffff'}
      135. },
      136. labels: {
      137. style: {color: '#ffffff'},
      138. format: '{value}V',
      139. },
      140. opposite:true,
      141. gridLineWidth: 0
      142. }],
      144. ////////////////////////////////////////////// Optionen des Tooltips
      146. tooltip: {
      147. useHTML: true,
      148. backgroundColor: null,
      149. borderWidth: 1,
      150. borderColor: '#ffffff',
      151. shadow: false,
      152. formatter: function(){
      153. return '<div style="background-color:' + '#000000;' + 'color:' + '#ffffff' + '" class="tooltip"> ' +
      154. this.series.name + '<br>' + Highcharts.dateFormat('%e.%b %Y %H:%M',new Date(this.x))
      155. + '<br>' + this.y +'' + this.series.tooltipOptions.valueSuffix +
      156. '</div>';
      157. },
      158. },
      160. ////////////////////////////////////////////// Optionen für die Legende
      163. legend: {
      164. enabled: true,
      165. layout: 'horizontal',
      166. align: 'center',
      167. verticalAlign: 'bottom',
      168. y: -35,
      169. x: -55,
      170. itemStyle: {color: '#ffffff'},
      171. itemHoverStyle: {color: '#555555'},
      172. itemHiddenStyle: {color: '#000000'},
      173. labelFormatter: function() {
      174. return this.name;
      175. }
      176. },
      178. ////////////////////////////////////////////// Aufbereitung der Daten
      180. series: [],
      182. }
      184. $.getJSON("datatemphumi.php", function(json) {
      185. options.xAxis.categories = json[3]['data'];
      186. options.series = new Array();
      187. options.series[0] = json[0];
      188. options.series[1] = json[1];
      189. options.series[2] = json[2];
      191. ////////////////////////////////////////////// Farben der einzelnen Kurven
      193. options.series[0].color = { linearGradient: [0, 0, 0, 250],
      194. stops: [[0.2, 'rgb(255, 0, 0)'],
      195. [0.5, 'rgb(0, 255, 0)'],
      196. [0.6, 'rgb(0, 255, 0)'],
      197. [0.8, 'rgb(0, 0, 255)'],]};
      198. options.series[1].color = '#6666ff';
      199. options.series[2].color = '#888888';
      201. ////////////////////////////////////////////// Optionen der Labels an den Messpunkten
      203. options.series[0].dataLabels = {
      204. enabled: true,
      205. color: '#ffffff',
      206. formatter: function() {
      207. return this.y + '°C';
      208. }};
      209. options.series[1].dataLabels = {
      210. enabled: true,
      211. color: '#ffffff',
      212. formatter: function() {
      213. return this.y + '%';
      214. }};
      215. options.series[2].dataLabels = {
      216. enabled: true,
      217. color: '#ffffff',
      218. formatter: function() {
      219. return this.y + 'V';
      220. }};
      222. gekürzt wegen zuvieler Zeichen...
      Display All
      ich sehe da nichts weiter.

      mit der ersten Version von Dir sieht es auch nicht besser aus.

    • mir fehlt die charts/js/jquery.min.js
      die soll wohl laut dem Script:

      Source Code

      1. <script type="text/javascript" src="charts/js/jquery.min.js"></script>
      vorhanden sein, ist sie dort aber nicht.
      sagt Dir das was?
      Ich habe sie weder im Paket von Highcharts auf dem PC noch auf dem PI

      Werde mal neu runterladen---

      auch im neuen Paket nicht, komisch

    • Habe die jquery.min.js von derer Homepage geladen.
      In das gewünschte Verzeichnis kopiert und sie da, TADAAAAAAA, mein erstes Chart poppt auf :)

      Komisch das die Datei fehlt, aber nagut, hat sich ja geklärt.
      Ich danke Dir Dir für Deinen Hilfe und auch den anderen die Tipps gegeben haben einen netten Dank. ;)

      Ich freu mich :D
      Files

      • Unbenannt.PNG

        (69.51 kB, downloaded 40 times, last: )

    • Freut mich, dass es funktioniert. An die jquery.min.js hätte ich auch selbst denken können. Ursprünglich hatte ich von Highcharts nur die Minimalvariante. Die besteht nur aus der besagten jquery.min.js und der highcharts.js, allerdings fehlen da viele erweiterte Funktionen, deshalb hab ich mir dann die komplette Version runtergeladen und die jquery.min.js einfach in das Verzeichnis kopiert, sorry.

      Aber was mir am Wochenende schon aufgefallen ist und was man an deinem Screenshot auch schon sehen kann:

      Je mehr Daten auflaufen, desto unübersichtlicher wird der Chart. Leider liefert Highcharts keine vernünftige Funktion, um das zu umgehen. Deshalb habe ich am Wochenende schonmal angefangen, das ganze nach Highstock zu portieren. Da ist die Funktionalität von Highcharts mit drin, aber eben noch bessere Funktionen für die Organisation. Die beiden Bibliotheken sind fast kompatibel, aber eben nur fast. Im Moment bin ich noch am Basteln, aber hier schonmal ein kleiner Vorgeschmack, mit Rangeselector und Zeitleiste:

      highstock.png

      Highcharts will die Daten in einem etwas anderen JSON-Format, deswegen musste ich auch die datatemphumi.php ändern. Aber dazu später mehr ;)