Highcharts mit mehreren y-Achsen & andere Features (ftui 2.2)

[klausw]

Hallo Guna,
das ging flott, super Sache!

- Der letzte "Punkt" wird bis zum aktuellen Zeitraum "verlängert" => nett wenn die Werte nur bei Änderung geschickt werden und sich diese z.T. nur selten Ändern

Gute Idee, das ist Ideal für die Anwesenheitsanzeige, wo manchmal nur 4 Werte am Tag kommen.
Was in diesem Zusammanhang noch eine schöne Funktion wäre:
Das Diagram zeigt den ganzen aktuellen Tag (0-24:Uhr) bzw. Woche / Monat an. und nicht nur bis zum aktuellen Zeitpunkt

- Bei unterstützten Charttypen gibt es ein zusätzliches Argument: data-linesteps="true" für Stufen im Chart (z.B. bei den Types lines, area => siehe auch die verschiedenen Charttypen unter http://api.highcharts.com/highcharts#series )

Klappt super 

Andere Sachen (dynamisches Laden, definierte Werte (on/off) auf der y-Achse) muss ich mir erst noch genauer angucken. Anregungen dazu weiterhin gerne .

Ich kann ja auch mal einen Blick reinwerfen. Halbwissen hat ja noch nie geschadet

Eine Option wäre noch toll:
Die verschiedenen y-Achsen unabhängig voneinander konfigurierbar machen (also fixe und variable min/max Werte)
Z.B beim Heizungsthermostat würde ich gern die Ventilstellung fix von 0-100% anzeigen lassen.
Die Temperatur dagegen von 5°C - 1° über angezeigten Maximalwert.

Eine Sache ist mir noch aufgefallen:
Es wird nie 0 angezeigt. Das Minimum ist 0,1.
Besonders bei kleineren Dynamikbereichen (0-1) fällt das auf.

[AHA1805]

Hallo Guna,

woran könnte die Fehlermeldung:

Code Auswählen Erweitern

highstock.js:8 Uncaught Error: Highcharts error #16: www.highcharts.com/errors/16ga @ highstock.js:8(anonymous function) @ highstock.js:18(anonymous function) @ highstock.js:8(anonymous function) @ highstock.js:8
fhem-tablet-ui.js:928 init widget: highchart
liegen.

Definition in einer Seite:

Code Auswählen Erweitern

   <li class="halbTransparent" data-row="2" data-col="2" data-sizex="6" data-sizey="2" >
<div class=""
             data-type="highchart"
             data-height="230"
             data-device="DBLog"
             data-logdevice="DBLog"
             data-columnspec="ow_Counter:G-Energy ow_Counter:G-Power"
             data-linenames="Energie,aktuell"
             data-linetypes="line,line"
data-linesteps="false,true"
             data-yaxis="0,1"
data-scroll="true,true"
data-range="true,true"
             data-daysago="0"
             data-yopposites="false,true"
             data-yunit="m³,m³/h"
             data-tooltip="{series.name} <b>{point.y:,.0f}</b><br>"
             data-legendalign="right">
  <div style="margin-top: 100px; text-align: center" id="loading">
  <i class="fa fa-spinner fa-spin"></i> Loading data from external source
  </div>
</div>
   </li>  
   <li class="halbTransparent" data-row="4" data-col="2" data-sizex="6" data-sizey="2" >
<div class=""
             data-type="highchart"
             data-height="230"
             data-device="DBLog"
             data-logdevice="DBLog"
             data-columnspec="ow_Counter:E-Energy ow_Counter:E-Power"
             data-linenames="Strom Verbrauch,aktueller Verbrauch"
data-linesteps="false,true"
             data-linetypes="line,line"
             data-yaxis="0,1"
             data-daysago="0"
             data-yopposites="false,true"
             data-yunit="KW/h,KW"
             data-yopposites="false,false,true"
             data-tooltip="{series.name} <b>{point.y:,.0f}</b><br>"
             data-legendalign="right">
  <div style="margin-top: 100px; text-align: center" id="loading">
  <i class="fa fa-spinner fa-spin"></i> Loading data from external source
  </div
</div>
   </li>  
   <li class="halbTransparent" data-row="6" data-col="2" data-sizex="6" data-sizey="2" >
<div class=""
             data-type="highchart"
             data-height="230"
             data-device="DBLog"
             data-logdevice="DBLog"
             data-columnspec="ow_Wasser:KW-Verbrauch ow_Wasser:WW-Verbrauch ow_Wasser:KW-Liter ow_Wasser:WW-Liter"
             data-linenames="KW Verbrauch,WW Verbrauch,KW aktuell,WW aktuell"
             data-linetypes="line,line,area,area"
data-linesteps="false,false,true,true"
             data-yaxis="0,0,1,1"
             data-daysago="0"
             data-yopposites="false,true"
             data-yunit="Liter,L/min"
             data-yopposites="false,false,true"
             data-tooltip="{series.name} <b>{point.y:,.0f}</b><br>"
             data-legendalign="right">
  <div style="margin-top: 100px; text-align: center" id="loading">
  <i class="fa fa-spinner fa-spin"></i> Loading data from external source
  </div>
</div>
   </li>  


Zu dem Fehler habe ich folgendes gefunden:

Code Auswählen Erweitern

Highcharts Error #16

Highcharts already defined in the page

This error happens the second time Highcharts or Highstock is loaded in the same page, so the Highcharts namespace is already defined. Keep in mind that the Highcharts.Chart constructor and all features of Highcharts are included in Highstock, so if you are running Chart and StockChart in combination, you only need to load the highstock.js file.

Aber wie muss ich die Charts definieren, wenn ich mehrere Charts auf einer Seite habe?

Gruß Hannes

[klausw]

woran könnte die Fehlermeldung:

Code Auswählen Erweitern

highstock.js:8 Uncaught Error: Highcharts error #16: www.highcharts.com/errors/16ga @ highstock.js:8(anonymous function) @ highstock.js:18(anonymous function) @ highstock.js:8(anonymous function) @ highstock.js:8
fhem-tablet-ui.js:928 init widget: highchart
liegen.

Code Auswählen Erweitern


data-scroll="true"
data-range="true"


nur ein Wert sollte gehen (es gibt nur eine x-Achse)

[guna83]

Hallo Klaus,
das mit dem 0.1 statt 0 war ein Workaround, da das Highcharts-Widget bei mir sonst (mit Werten die genau 0 sind) gar nicht angezeigt wurde. Ich setze es mal im ersten Threat mit unter "Bugs" .
Bei data-scroll und data-range geht auch nur ein Wert, da muss dann aber leider zur Zeit ein Komma hinter (siehe Bugs im ersten Threat).
Das mit dem ganzen Tag/Woche/Monat setze ich mal auf die Wunschliste, würde mich aber vorher um die Bugs und das dynamische Laden kümmern. Das mit der y-Achsenbeschriftung ziehe ich auch noch vor, da ich da schon eine wage Idee habe . Gehen die min/max Werte noch nicht pro y-Achse? Da muss ich nochmal gucken was ich programmiert habe...

Hallo Hannes,
der Fehler #16 kommt dadurch, dass die Highstock-Scripte pro Diagramm einmal eingebunden werden. Hier fehlt eine Überprüfung ob diese schon eingebunden sind. Ist mir auch schon aufgefallen, aber da ja alles funktioniert hat, hab ich das auf "später" verschoben . Kommt auch unter Bugs.

Viele Grüße
Guna

[Tobias]

Hi guna,
ich teste heute mal, DANKE schonmal für dein Engangement

Ich habe heute ein Update der tablet-UI eval Version gemacht und widget_highchart.js ist auch aktualisiert worden. Warst du das? Bzw. hast du deine Version ins Repo hochgeladen?

Edit: vergiss die Frage, da hat jemand parallel am "alten" widget gebastelt.
So sieht übrigens aus wenn man gunas widget mit einem Update überbrät (Screenshot1) und der Sollzustand (Screenshot2)

[guna83]

Das ist das Problem mit den 0-Werten Ich werde mich die Woche mal an den Widget-Maintainer wenden und fragen ob Interesse an einem Merge besteht.
Ansonsten könnte ich ein Highstock-Widget draus machen - dann kämen die sich auch nicht ins Gehege.

[klausw]

Hallo Guna,

das mit dem 0.1 statt 0 war ein Workaround, da das Highcharts-Widget bei mir sonst (mit Werten die genau 0 sind) gar nicht angezeigt wurde. Ich setze es mal im ersten Threat mit unter "Bugs" .

Verstehe, ja das ist schon nen Bug
Wie verhält es sich dann mit negativen Werten?

Bei data-scroll und data-range geht auch nur ein Wert, da muss dann aber leider zur Zeit ein Komma hinter (siehe Bugs im ersten Threat).

Ist das, weil du den String in ein Array übergeben willst?

Das mit der y-Achsenbeschriftung ziehe ich auch noch vor, da ich da schon eine wage Idee habe .

Super, in SVG Modul lässt sich einzelnen Zahlen, Text zuweisen.
("Aus" 0,"Aus" 1.5, "Aus" 3)
Vermutlich müsste da pro Achse ein Befehl her

Gehen die min/max Werte noch nicht pro y-Achse? Da muss ich nochmal gucken was ich programmiert habe...

irgendwie nicht

anbei ein Beispiel

Code Auswählen Erweitern

<div data-type="highchart"
data-device="Thermostat_Wohnzimmer_Clima"
data-logdevice="FileLog_Thermostat_Wohnzimmer"
data-columnspec='4:measured-temp 4:desired-temp.*::$fld[3]=~"off"?4:$fld[3] 4:actuator'
data-linenames="Temperatur ist,Temperatur soll,Ventil"
data-linetypes="line,line,line"
data-linesteps="false,true,true"
data-yaxis="0,0,1"
data-xunit="Heute"
data-yunit="Temperatur °C,Ventilstellung %"
data-yopposites="false,true"
data-daysago="0"
data-scroll="true"
data-range="true"
data-minvalue="2,0"
        data-maxvalue="32,100"
        data-height="400"
data-tooltip="{series.name}: <b>{point.y:,.1f}</b><br>"
data-legendalign="bottom"
class="noticks">
</div>

Beim ersten Diagramm habe ich nur data-minvalue und data-maxvalue weggelassen.

Ist es auch möglich anzugeben, welchen Abstand die Kurve beim automatischen Anpassen der y-Achse von den Diagrammrändern hat? (sowas wie maxval+2 oder minval-1)

[guna83]

Hi Tobias,
das alte Widget hat laut Github keiner angepackt, aber es ist normal dass selber modifizierte Dateien wieder überschrieben werden. Verhindern kann man das Aktualisieren einzelner Dateien aber einfach durch:
attr global exclude_from_update www/tablet_eval/js/widget_highchart.js
Gruß
Guna

[guna83]

Hallo Klaus,

null wird jetzt nicht mehr zu 0,1 - die Änderungen sind wieder in der aktuellen Version im ersten Threat. Für einen Test mit negativen Werten habe ich leider keine Daten in meiner Datenbank - und Frost ist so schnell nicht in Sicht .

Bei dem Problem mit dem notwendigen Komma am Ende war natürlich data-steps gemeint. Ja das liegt an dem außeinanderpflücken und in ein Array packen - komischerweise geht es bei anderen Werten wo ich das genauso mache problemlos... Bei data-scroll und data-range erwarte ich generell nur einen Wert.

Wie das mit den Werten/Texten für die y-Achse gedacht war, ist mir klar. Ich verwende es selber in fhemWeb . Ich grübel noch wie man die Werte am besten angibt.
Vielleicht so für 4 y-Achsen, dabei die zweite ohne besondere Labels: data-labely="on,off;Windstill,Brise,Orkan;;kalt,warm"?

Das mit data-minvalue und data-maxvalue schaue ich mir bei Gelegenheit nochmal an.

Ich fände eine Option um den Abstand zwischen maximalen/minimalen Wert und dem Chartrand anzugeben auch toll, mir ist das meist "zu weit". Das scheint irgendwie über die Parameter für Ticks zu gehen, muss mir das aber noch genauer angucken.

Viele Grüße
Guna

[klausw]

Hi Guna,

null wird jetzt nicht mehr zu 0,1 - die Änderungen sind wieder in der aktuellen Version im ersten Threat. Für einen Test mit negativen Werten habe ich leider keine Daten in meiner Datenbank - und Frost ist so schnell nicht in Sicht .

Daumen hoch, klappt.

Bei dem Problem mit dem notwendigen Komma am Ende war natürlich data-steps gemeint. Ja das liegt an dem außeinanderpflücken und in ein Array packen - komischerweise geht es bei anderen Werten wo ich das genauso mache problemlos... Bei data-scroll und data-range erwarte ich generell nur einen Wert.

evtl. ist dort wo es geht der code in highcharts etwas toleranter

Wie das mit den Werten/Texten für die y-Achse gedacht war, ist mir klar. Ich verwende es selber in fhemWeb . Ich grübel noch wie man die Werte am besten angibt.
Vielleicht so für 4 y-Achsen, dabei die dritte ohne besondere Labels: data-labely="on,off;Windstill,Brise,Orkan;;kalt,warm"?

Gut, dann weißt du, wovon ich rede
Ich würde noch die Position mit übergeben (wenn nicht vorhanden kann ja standardmäßig 0,1,... genommen werden):
data-labely="on=0,off=1;Windstill,Brise,Orkan;;kalt=1,warm=3,heiß=5"

Grüße
Klaus

[Tobias]

Hi Guna,
ein paar Beobachtungen:

1) Mein Device "Heizung" hat viele Readings wo sich immer etwas ändert.
Im Chart habe ich aber nur ein Reading referenziert. Der Chart lädt sich nun fast alle 2-3sek neu da sich im Device "Heizung" gerade etwas ändert. Allerdings ändert sich das im Chart referenzierte Reading nicht!
Blöder Nebeneffekt: Wenn der Chart sich neu lädt, dann sind die aktuellen einstellungen weg, also zb. das scrollen in die History, hineinzoomen etc...

Ich denke ein Parameter wäre sinnvoll?
data-autoload=1 / oder eben 0

Auf einer Hauptübersichtsseite ist ein Reload sinnvoll, in einem Popup dagegen nicht

2) Wenn ich einen Bereich markieren möchte in den ich hineinzoomen möchte funktioniert das nur mit der rechten maustaste, Auf einem Tablet hat man doch aber nur einen Finger -> linke Maustaste?
Wenn das Chart in einem Popup ist, so verschiebe ich das Popup anstatt einen Bereich auszuwählen.

3. Kann man die Liniendicke und Linienfarbe mit Parametern bestimmen?
Gibt es irgendwo einen Übersicht der aktuellen Parameter?

[devil77]

Gibt es eigentlich die Möglichkeit im Titel die min/max Werte aus dem Plot mit auszugeben?

[guna83]

Leider fehlt mir im Moment ein wenig Zeit um große Sprünge beim Highchart-Widget zu machen  . Ich hoffe in den nächsten Wochen wird das wieder besser - spätestens aber ab Mitte/Ende August :-D. Eure Anmerkungen habe ich gelesen und nicht vergessen.

Hier mal ein Versuch die Parameter zusammenzutragen, Ihr dürft das gerne ergänzen:
data-device: Device das die Daten bereit hält (Bei mir z.B. logdb) => ich glaube das wird für die Aktualisierungen herangezogen? Vielleicht mag das jemand ausprobieren?
data-logdevice: Device das die Daten bereit hält (Bei mir z.B. logdb)
data-columnspec: Die Daten die angezeigt werden sollen, bei mir z.B. "KS300:temperature KS300:Taupunkt KS300:humidity KS300:wind"
data-yaxis: Zuordnung der Daten zu den Verschiedenen Achsen, die erste Achse hat die ID 0, die zweite 1, etc. (z.B. "0,0,1,1")
data-yopposites: Wenn eine Achse auf der gegenüberliegenden Seite dargestellt werden soll, z.B. "false,true" => erste y-Achse links vom Chart, zweite rechts davon
data-yunit: Beschriftung der einzelnen Achsen, z.B. "Feuchtigkeit %,Co2 ppm"

data-linenames: Namen für die Daten, bei mir z.B. "Temperatur,Taupunkt,Feuchte,Wind"
data-linetypes: Die zugehörigen Typen der Darstellung, bei mir einfach "line,line,line,line" => möglich wäre z.B. auch der Typ area,spline - weitere sind möglich, aber nicht getestet (siehe http://api.highcharts.com/highcharts#plotOptions)
data-linesteps: Bei unterstützten Datentypen, erzeugt eine stufenweise Darstellung, default: false => erfordert zur Zeit ein "," am Ende wenn nur ein Wert gesetzt ist

data-minvalue/data-maxvalue: min- und max-Wert für die y-Achse, noch nicht an mehrere Achsen angepasst
data-xunit: Beschriftung der x-Achse
data-title: Titel des Diagramms, wird oberhalb angezeigt
data-subtitle: Untertitel des Diagramms, wir unterhalb des Titels in etwas kleinerer Schriftart angezeigt
data-range: Zeigt Buttons an um je einen Tag, Woche, Monat auf einmal anzuzeigen (default: false)
data-scroll: Zeigt eine Scrollbar unterhalb des Charts an (default: false)
data-legend: Legende anzeigen, (default: true)
data-legenalign: Anzeigeposition der Legende (default: bottom, auch möglich: right)
data-daysago: Wieviele Daten sollen geladen werden (bei Nutzung von data-range möglichst min. 31)
data-height: Höhe des Widgets
data-width: Breite des Widgets
data-tooltip: Tooltip der beim Mouseover eines Punktes angezeigt wird, z.B. "{series.name} <b>{point.y:,.0f}</b>"

Hab ich mich noch nicht mit beschäftigt und gab es schon im ursprünglichen Highchart-Widget:
data-xticks/data-yticks
data-noticks
data-tickinterval
data-tickamount
data-yticks

[AHA1805]

Hallo Guna

Dankeschön das hilft mir sehr .

Schöne Grüße
Hannes

Gesendet von meinem SM-T715 mit Tapatalk

[Tobias]

Hi Guna,
kannst du bitte noch einen Parameter einbauen das man wählen kann das der Chart NICHT automatisch refreshed wird?
Ev. wenn man es deaktiviert, wird in einer ecke ein Touchfeld eingeblendet für ein manuelles refreshen.
Grund: DBLog ist noch blockierend, wenn ich also einen Monatschart habe, ist fhem quasi nicht mehr benutzbar da die Datenabfrage und aufbereitung 5-7sek benötigt. Und das ca. alle 10sek