{"id":181,"date":"2019-10-05T09:10:19","date_gmt":"2019-10-05T09:10:19","guid":{"rendered":"https:\/\/wordpress.labs.fhv.at\/pvfhv\/?p=181"},"modified":"2021-01-07T11:40:53","modified_gmt":"2021-01-07T11:40:53","slug":"test","status":"publish","type":"post","link":"https:\/\/wordpress.labs.fhv.at\/pv\/2019\/10\/05\/test\/","title":{"rendered":"Wie kann man eigentlich Live-Daten visualisieren?"},"content":{"rendered":"\n<p>Der erste Schritt zur Visualisierung von Live-Daten ist die Sicherstellung einer ordnungsgem\u00e4\u00dfen, automatisierten Datenerfassung. Wir nutzen einen Raspberry Pi. Dieser ist an unterschiedlichen Sensoren angeschlossen, welche sich auf dem Dach befinden. Die Daten werden in einem festgelegten Zeitintervall in eine Datenbank geschrieben. Im n\u00e4chsten Schritt muss sichergestellt werden, dass die Datenerfassung automatisiert wurde und zuverl\u00e4ssig funktioniert. Erst dann muss eine L\u00f6sung zur Visualisierung in Echtzeit gefunden werden. Daf\u00fcr gibt es z.B. sehr viele M\u00f6glichkeiten \u00fcber Javascript. Da wir uns gegen Javascript entschieden haben, werden wir vermutlich mit einem oder mehreren verschiedenen WordPress Plugins arbeiten. Bei besonders guter Eignung f\u00fcr unseren Zweck werden wir evtl. sogar auf kostenpflichtige Plugins zur\u00fcckgreifen. <\/p>\n\n\n\n<p>Eine Javascript-L\u00f6sung  f\u00fcr die Datenvisualisierung w\u00e4re &#8211; auch wenn wir uns dagegen entschieden haben &#8211; in der Theorie nat\u00fcrlich m\u00f6glich und wir m\u00f6chten Ihnen einige Informationen dazu zur Verf\u00fcgung stellen. Dies k\u00f6nnte dann umgesetzt werden, indem z.B. \u00fcber SQL in die Datenbank zugegriffen wird, anschlie\u00dfend ein PHP Array mit den entsprechenden Daten erzeugt wird und dieses in der ausgew\u00e4hlten Javascript Bibliothek genutzt wird (Formatierung beachten! &#8211; Die Notwendigkeit von eckigen oder runden Klammern, Kommas oder Semicolon, etc. ist je nach Javascript Bibliothek unterschiedlich!). Hier empfiehlt es sich jedoch, eine geeignete Methode zur tats\u00e4chlichen Implementierung zu kennen. HTML Injection ist nicht die sicherste Variante, jedoch schnell umsetzbar. Ein Auslesen von pers\u00f6nlichen Daten k\u00f6nnte Hackern dadurch jedoch erm\u00f6glicht werden. Bei ganz schlechter Umsetzung k\u00f6nnten dann z.B. die Zugangsdaten zur Datenbank \u00f6ffentlich eingesehen werden, was in jedem Fall zu verhindern ist.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Javascript Bibliotheken<\/h3>\n\n\n\n<p> Javascript Bibliotheken f\u00fcr die Visualisierung von Daten k\u00f6nnen teils kompliziert sein. F\u00fcr Experten empfehlen wir <a href=\"https:\/\/github.com\/d3\/d3\/wiki\/Gallery\">d3<\/a>, da diese Bibliothek vielf\u00e4ltige und dynamische M\u00f6glichkeiten bietet.<\/p>\n\n\n\n<p>F\u00fcr Anf\u00e4nger mit Python-Kenntnissen (Matplotlib) empfehlen wir <a href=\"https:\/\/mpld3.github.io\/index.html\">mpld3<\/a>. Diese Bibliothek erm\u00f6glicht die Umwandlung von Matplotlib Diagrammen in Python zu Javascript mit relativ geringem Aufwand.<\/p>\n\n\n\n<p>F\u00fcr Anf\u00e4nger, die noch nie an einer vergleichbaren Aufgabe gesessen sind und auch nicht \u00fcber Python-Kenntnisse verf\u00fcgen, empfehlen wir <a href=\"https:\/\/morrisjs.github.io\/morris.js\/index.html\">Morris.js<\/a> und <a href=\"https:\/\/www.chartjs.org\/docs\/latest\/\">Chart.js<\/a>. Mit diesen Javascript Bibliotheken kann man ebenfalls mit relativ geringem Aufwand Diagramme erstellen. Viele wichtige Funktionen sind jedoch z.T. nicht vorhanden. So ist es in Morris.js nicht m\u00f6glich Legenden automatisch zu erstellen (kann \u00fcber HTML manuell als Tabelle erstellt werden) und in Chart.js hatten wir Probleme mit deutschen Umlauten sowie mit bestimmten Sonderzeichen in der y-Achsenbeschriftung.<\/p>\n\n\n\n<p>Vielleicht wurden Sie durch diesen Artikel etwas schlauer. Wir geben selbstverst\u00e4ndlich nur unsere pers\u00f6nliche Einsch\u00e4tzung ab. Probieren Sie doch am besten einfach die Bibliotheken aus!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Der erste Schritt zur Visualisierung von Live-Daten ist die Sicherstellung einer ordnungsgem\u00e4\u00dfen, automatisierten Datenerfassung. Wir nutzen einen Raspberry Pi. Dieser ist an unterschiedlichen Sensoren angeschlossen, welche sich auf dem Dach befinden. Die Daten werden in einem festgelegten Zeitintervall in eine &hellip; <a href=\"https:\/\/wordpress.labs.fhv.at\/pv\/2019\/10\/05\/test\/\">Weiterlesen <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":278,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-181","post","type-post","status-publish","format-standard","hentry","category-live-diagramme"],"_links":{"self":[{"href":"https:\/\/wordpress.labs.fhv.at\/pv\/wp-json\/wp\/v2\/posts\/181","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.labs.fhv.at\/pv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.labs.fhv.at\/pv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.labs.fhv.at\/pv\/wp-json\/wp\/v2\/users\/278"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.labs.fhv.at\/pv\/wp-json\/wp\/v2\/comments?post=181"}],"version-history":[{"count":5,"href":"https:\/\/wordpress.labs.fhv.at\/pv\/wp-json\/wp\/v2\/posts\/181\/revisions"}],"predecessor-version":[{"id":470,"href":"https:\/\/wordpress.labs.fhv.at\/pv\/wp-json\/wp\/v2\/posts\/181\/revisions\/470"}],"wp:attachment":[{"href":"https:\/\/wordpress.labs.fhv.at\/pv\/wp-json\/wp\/v2\/media?parent=181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.labs.fhv.at\/pv\/wp-json\/wp\/v2\/categories?post=181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.labs.fhv.at\/pv\/wp-json\/wp\/v2\/tags?post=181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}