[Codebeispiel] highcharts in openHAB

[Ea Sy]

hallo fans...

nachdem ich ein einem anderen thread darauf angesprochen wurde möchte ich euch heute mal zeigen wie bei mir die highcharts (http://www.highcharts.com) in meine openHAB visu eingebunden werden.

es ist eigentlich kein großes ding und es wundert mich schon das die nicht schon zur standart ausstattung gehören, so wie beim dash-ui.

vorraussetzungen:

für die persistens verwende ich mysql hier werden ALLE werte persistiert, bei jeder änderung und jede stunde.
das bewirkt im nachgang das wie JEDEN wert im diagramm darstellen können.
wenn man nur bei jeder änderung persistiert gibt es nicht genug daten zum anzeigen.

als mysql datenbank nutze ich eine xampp installation.
diese bringt php und einen webserver mit welches die zweite vorraussetzung ist.

und natürlich das paket von highcharts welches auf dem xammp webserver läuft.

eine nutzung des webservers von OH wäre hier sicher schicker aber ein externer webserver bietet die möglichkeit die diagramme auch auf der homepage ohne OH drumherum anzuzeigen.



nun hab ich mir ein php-script gebaut welches mit parametern gespeist wird und ein diagramm ausgibt.
das liegt im zusammen mit dem highcharts paket im htdocs ordner vom xampp. im unterordner diagramm.

webserver.png


ich hänge das script hier mal mit an.
es ist sicher noch lange nicht fertig und überarbeitungswürdig, dummer weise funktioniert es aber so gut das ich diese baustelle noch nicht wieder betreten musste.
und wie der murphy sagt.. never change an running system ...



somit brauche ich in der sitemap nur noch einen webview an der stelle wo das diagramm erscheinen soll.
den welche daten angezeigt werden sollen bestimmen die parameter das script sucht sich dann selbsständig die daten aus der datenbank.


sitemap.png


ich habe die parameter hier mal farblich gekennzeichnet.
das ? (fragezeichen) hinter dem diagramm.php weist die übergabe von parametern an.
das & (und zeichen) verbindet die parameter zu einer langen url.
die reihenfolge der parameter ist egal, da die parameternamen ja mit angegeben werden.
praktischer weise kann man es hier so schön darstellen das es übersichtlicher wird.

w1= >> wert 1 gefolgt vom item namen des anzuzeigenden wertes
t1= >> (optional) text der dem wert 1 zugeordnet wird, wenn keiner angegeben wird erscheint der item name
ty1= >> (optional) linientyp, mögliche werte in der highcharts doku, ohne angabe wird ein spline ausgegeben (abgerundete gerunde linie)
days= >> (optional) anzahl der aus der datenbank auszulesenden tage (rückwärts vom aktuellen tag an gesehen) ohne angabe 720 tage

aktuell kann man max 8 werte gleichzeitig in einem diagramm anzeigen.
also w1 bis w8 uns t1 bis t8 und ty1 bis ty8.

man sieht das im script, dass die blöcke einfach nur kopiert wurden also wäre es auch leicht auf 10 oder mehr auszubauen.
mit noch mehr mühe könnte man schleifen aus den blöcken machen und somit die anzahl deutlich erhöhen.
das habe ich aber bis dato noch nicht benötigt.

die height angabe gehört zum webview und legt fest wie hoch das diagramm in der anzeige sein soll.
die highcharts passen sich automatisch dem frame an.

alles weitere seht ihr im script, hier könnt ihr auch die default werte anpassen die verwendet werden sollen wenn die optionalen parameter weg gelassen werden.

hier nun mal das ergebniss aus dem im designer gezeigtem abschnitt

dia2.png

zur bedienug der highcharts gehe ich nicht weiter ein, das ist recht intuitv mehr gibt in der highcharts doku.


auch balken sind hier natürlich möglich...

dia1-balken.png

für jeden eintrag in der DB wird hier ein balken erzeugt, werte die sich nicht ändern und jede stunde persistiert werden bekommen natürlich für jede stunde einen balken.
werte die bei jeder ändeung persistiert werden, bekommen zusätzliche balken.

man kann diese werte aber von den highcharts zusammenfassen lassen und für einen zeitruam den durchschnitt anzeigen.
jedoch hab ich das bisher noch nicht weiter verfolgt.



da das ganze ja nur eine url ist kann man es natürlich auch ohne openhab einfach im browser eingeben um ein diagramm zu sehen.
den namen des items sollte man aber kennen.

browser.png
hier auch schön zu sehen das das automatische gruppieren abgeschaltet ist und jeder wert im diagramm dargestellt wird.
nur damit ist es möglich spitzen auch richtig darzustellen.
evtl könnte man daraus noch einen schalter machen den man mit gibt. denn die anzeige so vieler daten dauert schon ein wenig.

(der ausreisser auf 0 war hier die umstellung auf OH2 hier wurden zwischenzeitlich alle items genullt statt aus der DB geladen)


und natürlich sieht man die diagramme auch in der neuen basic UI

basic-ui.png

als hätte der kai die basic UI an die highcharts angepasst, hier sehen sie aus als wären sie immer schon dabei gewesen....



so ich hoffe mal das ist halbwegs verständlich rüber gekommen.
natürlich sollte man etwas kenntnisse von web programierung haben php und sql schaden nie.

das ganze ist sicher noch ausbaufähig, jedoch reicht es erstmal für meine bedürfnisse daher sehe ich aktuell hier keinen handlungsbedarf.
also bitte keine anfragen in der richtung.

schaut euch die doku zu den highcharts an, da kann man viel raus lesen und experimentieren.
die highcharts sind etwas penibel wenn es um die syntax geht, wenn nicht alles passt, gibt es keine daten im diagramm, und auch keine fehlermeldung.
daher erst mit wenig features anfangen und dann langsam hoch rabeiten.


einen negativen punkt möchte ich noch erwähen.
wenn man die sitemap über den reverseproxy aus der ferne abruft kann man die diagramme nicht sehen.
das liegt zum einen daran das ich in der sitemap aktuell die lokale ip hinterlegt habe.
aber die haupt ursache ist die lokale datenbankverbindung im php script.
man könnte hier die dyn-dns adressen eintragen und die ports der webserver und der datenbank freigeben.
aber im inTRAnet der dinge soll so etwas nicht sein. das sehe ich auch so.
eine elegantere lösung ist eine vpn verbindung, damit klappt das ohne probleme auch aus der ferne.

ok nun viel erfolg beim nachmachen...

---

diagramm_php.txt diagramm_php.zip

[trant]

Hi,

Super, Danke, die Charts sehen sehr gut aus. Das werde ich dann in den nächsten Tagen auch angehen.

[Ea Sy]

Interessante Sache. Hast du schon mal probiert ein High/Low Signal zu plotten? Ich habe den Status meiner Heizung in der Datenbank. Mit 1/0 abgelegt. Leider Interpoliert er mir die Daten so, dass ich bei zu großen Bereich auf einmal 0.5 dargestellt bekomme

war eigentlich für diesen Thread geplant
https://knx-user-forum.de/forum/supp...rts-in-openhab

ob nun 0/1 oder 0/100 ist eigentlich egal.

wie erwähnt...
das interpolieren habe ich aus diesem grund bei den highcharts defaultmäßig deaktiviert.
um eben genau auch ausrutzer zu sehen.

                        dataGrouping: {
                            enabled: [B]false[/B],
                            groupPixelWidth: 30,
                            approximation: "average",
                            }

siehe highcharts doku...

ich meine man könnte auch linien einblendne lassen die min und max ausweisen, jedoch sieht man dann ja immernoch nicht wie offt ausrutzer passieren.
z.b. wenn man einen bewegungsmelder darstellt, 0/100.
nur ohne interpolation kann man den zeitpunkt der bewegung genau anzeigen, es wäre hier nicht nüzulich 88% zu sehen.

[tiknx]

Danke für deine rasche Antwort,

ich bin mit deiner diagramm.php nicht zusammengekommen, dh mir wurde nichts geplottet, habe mir dann aus deinem code, und aus einem Beispiel eine funktionierende Version zusammengebaut. aber genau darauf habe ich vergessen. Siehe da, schon passts

Danke

[trant]

So, ich habs mal auf die Schnelle versucht (diverse Anpassungen in deinem php gemacht (meine Datenbank liegt nicht lokal, meine Tables und meine Columns heissen anders), aber angezeigt bekomme ich nichts richtiges (schwarze Seite mit eine paar Datumsfeldern)

Anbei der erzeugte Quelltext, siehst du da vl. das Problem?

[tiknx]

(schwarze Seite mit eine paar Datumsfeldern)

War bei mir das selbe. Darum hab ich wie weiter oben erwähnt selber gebastelt

[Ea Sy]

hallo freunde ich bitte um verständniss das ich hier nicht jedem seine fehler suche, lest euch in das thema ein und dann experimentiert etwas.
ich habe das auch nicht mal kurz nach feieraben zusammengebastelt und dann gings gleich.

@stefan
evtl liegts an den namen der tabellen.

beim OH ist es ja so das jedem item eine nummer zugewiesen wird mit, dessen nummer wird dann für jedes item eine tabelle angelegt.
damit sich OH selbst zurecht findet gibts eine tabelle die als inhaltsverzeichniss dient, hier werden die namen der item und die nummern hinterlegt.
mein script sucht anhand des namens die nummer aus dieser übersichtstabelle, so wie OH das auch macht.
mit dieser nummer lassen sich dann die daten in der zugehörigen tabelle finden.

[tiknx]

Hier ist die von mir abgeänderte Version. Vorteil ist auch, dass du nichts weiter downloaden musst, es ist alles vorhanden, bzw eben im File die Pfade gesetzt

[trant]

Deines läuft mal auch bei mir, Danke

[Ea Sy]

was dann aber wiederum bewirkt das bei jedem diagramm aufruf ins internet gegriffen wird.
mal von der sicherheit ganz abgesehen, nicht jeder hat eine 100mbit leitung, ich hatte bis vor 3 wochen nur eine 2mbit leitung.

und wie auch schon erwähnt, das inTRAnet der dinge soll autak ohne das internet funktionieren.

gute verbesserung, aber sicher nicht für jeden etwas.
jemand der soetws nutz sollte auch wiessen was dahinter steht und wie es funktioniert.
dann kann jeder für sich entscheinden welchen weg er bevorzugt.

was man noch erwähnen sollte.
wenn ein chart auf einer seite der sitemap mit anderen werten eingebunden ist. (z.b. mein basic-ui bild)
dann aktualisiert sich auch das chart sobald sich einer der anderen werte ändert.

[trant]

Bin da ganz bei dir, möchte natürlich auch alles im meinem Netz behalten (deshalb mein "läuft auch mal"), für erste Tests (vorallem wie es mir gefällt), kann ich tiknx Lösung nutzen.
Nebenbei suche ich, wo bei deinem Beispiel bei mir das Problem liegt (hab ein diagramm1.php und diagramm2.php ;-))

[Ea Sy]

gut so, ich hatte am anfang 6 files davon ...

[trant]

Kannst du meine Fehler Datei mal ausprobieren, bzw. mit einem funktionierendem von dir vergleichen?

[Ea Sy]

ich habe mal kurz rein geschaut, das ist ja nur das halbe script,
irgenwie hast du nur die java hälfte benutzt und den php teil weg gelassen.

damit kannst du zwar das diagramm darstellen jedoch ohne vorher daten zu sammeln.

also ist das resultat maximal ein leeres diagramm..

[trant]

Es ist der resultierende Html Code (Quellcode der geladenen Seite im Browser), also der php teil ist hier bereits aufgelöst

Wenn du die html seite direkt ins verzeichnis zu deinem php kopierst und das html aufrufst, dann sollte was angezeigt werden.