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

[guna83]

Dies war ursprünglich ein Threat bzgl der Implementierung von mehreren y-Achsen im Highcharts-Widget (s.u.). Mittlerweile sind auch verschiedene weitere Änderungen eingeflossen und weitere geplant.

Stand 21.10.2016:

Neue Features
- mehrere y-Achsen (mit verschiedenen Units, Seitenangabe links/rechts) möglich (data-yopposites, default false -> schiebt bei true die Achse auf die gegenüberliegende/rechte Seite)
- min/max werden (wenn nicht fest gesetzt) automatisch an die Werte angepasst, dies geschieht auch wenn man z.B. eine Linie ausblendet
- Rangefinder: Auswahl ob ein Tag/Woche/Monat angezeigt werden soll (data-range, default false)
- Auswahl ob die Legende unten oder rechts angezeigt werden soll (data-legendalign, default bottom - alternativ right möglich)
- 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
- Steps: 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 )
- Scrollbar: Argument data-scroll (Scrollbar) ergänzt, default false

TODO/Wunschliste
- dynamisches Laden der Daten / Anzeige Day/Week/Month abhängig von geladenen Zeitraum
- Der Zeitraum im Rangefinder ist z.Zt. nicht editierbar, hier gibt es wohl Probleme im Zusammenspiel mit dem bei der Tablet UI eingesetzem Gridster
- Y-Achse alternativ beschriften (z.B. on/off) => hier hab ich erste Ideen, muss aber gucken wie man das umsetzt und die Definitionen dann aussehen könnten.
- Anzeige eines ganzen Tags(0-24)/Woche/Monat statt die letzten 24h

Bugs
- Problem mit "data-linesteps" => erfordert "," am Ende wenn nur ein Wert gesetzt.
- In der Konsole gibt es eine Fehlermeldung wenn mehr als ein Highchart-Widget auf der Seite genutzt wird, da die Highstock-Lib pro Widget und somit mehrfach eingebunden wird. Hier fehlt noch eine entsprechende Überprüfung vor dem Einbinden.

Allgemeines
Aktueller Stand ist immer hier oben angehangen. Aktueller Screenshot in meinem letzten Post.
Das Widget benötigt die erweiterte Version "Highstock", diese kann hier => http://www.highcharts.com/download heruntergeladen werden. Zur Zeit nutze ich die Version 5.0.0. Der in der ZIP-Datei enthaltene Ordner "js" muss Tabletui-Ordner/lib/highstock entpackt werden.
Bitte bei Problemen keine Anfrage an den ursprünglichen Maintainer des Widgets, da es eine inoffizielle Version ist :-D.

Ursprünglicher Threat
Hallo zusammen,

mir gefallen die Highcharts sehr gut. Für mehrere Anwendungen benötige ich aber mehr als eine y-Achse.
Ich habe versucht das Widget entsprechend anzupassen, leider bekomme ich immer die Fehlermeldung "Uncaught Highcharts error #18: www.highcharts.com/errors/18" - obwohl die Achsen an sich definiert sind.

Ansonsten habe ich noch die Berechnung des Wertebereichs der  y-Achse (wenn Werte größer/kleiner als angegebener Bereich) rausgenommen, gleiches gilt für die entsprechenden "default"-Werte - das kann meiner Meinung nach Highcharts schöner passend berechnen.

Ich habe mal meine modifizierte Version des Widgets angehangen - vielleicht hat ja jemand eine Idee? Wenn erstmal mehrere y-Achsen überhaupt funktionieren, würde ich mich natürlich noch dran machen, dass man hierfür auch die Einheit angeben kann, ob links oder recht und die Anzahl flexibel gestalten (im Moment ist da Anzahl der Plots=Anzahl der y-Achsen).

Viele Grüße
Guna

[guna83]

Hallo zusammen,

habe das Problem selber gelöst bekommt.
Aktuell kann ich mehrere Achsen anlegen und vorgeben ob diese links oder rechts angezeigt werden. Als Definition nutze ich:

Code Auswählen Erweitern

<div class=""
     data-type="highchart"
     data-height="350"
     data-device="logdb"
     data-logdevice="logdb"
     data-columnspec="KS300:temperature KS300:Taupunkt KS300:humidity KS300:wind"
     data-linenames="Temperatur,Taupunkt,Feuchte,Wind"
                 data-linetypes="line,line,line,line"
                 data-yaxis="0,0,1,2"
                 data-xunit="Heute"
                 data-yunit="Temperatur/Taupunkt °C,Feuchtigkeit %,Wind m/s"
                 data-yopposites="false,false,true"
                 data-tooltip="{series.name} <b>{point.y:,.0f}</b>"></div>
Mal gucken was ich sonst so aus der Highcharts-API noch gebrauchen kann  .

Viele Grüße
Guna

[wildea]

Hallo Guna,

super Job gemacht hier. Habe mir dein highchart schon runtergeladen und bei mir im Einsatz. Du scheinst ja echt fit zu sein was das angeht. Ich versuche unter der 2.2 das Meteogram zum laufen zu bringen aber leider ohne Erfolg. Unter der alten ftui Version geht es.

Hab hier schon einen Post erstellt aber leider noch keine Hilfe bekommen. Vielleicht hast du ja eine Idee

https://forum.fhem.de/index.php/topic,54837.0.html

danke und gruß

Alex

[guna83]

Für mich sieht das so aus, als ob "einfach" das Widget noch nicht für die 2.2 angepasst wurde. Hab mal den ersten "Fehler" behoben, dann läuft man aber direkt in den nächsten. Hab das umgangen indem ich mir eine Seite mit dem Meteogramm gebaut habe (wie auf http://www.highcharts.com/demo/combo-meteogram und diese per iframe-Widget einbinde.
Aktuell gucke ich was mit den Highcharts alles geht und was - meiner Meinung nach - Sinn macht. Habe gerade von Highcharts auf Highstock geschwenkt (selbe API, aber zusätzliche Features) - hiermit ist es dann möglich den angezeigten Zeitintervall zu ändern (z.B. Tag/Woche/Monat). Ansonsten möchte über das Widget noch ermöglichen die Legende rechts anzuzeigen statt unten. Dann hätte ich erstmal alle Funktionen realisiert die ich so brauche.

[Thyraz]

Freut mich, dass sich jemand dem Highcharts Widget annimmt.
War da auch immer ein Fan von.

[wildea]

Oh sehr geil. Genau das mit dem Wochen und Monat und vielleicht auch Jahr brauch ich auch. Ich will Charts bauen für den kWh Verbrauch


Gesendet von iPhone mit Tapatalk

[guna83]

Jetzt kann man auch die Legende an die rechte Seite schieben. Meine aktuelle Widget-Version habe ich an den obersten Beitrag angehangen. Habt Ihr sonst noch Wünsche/Ideen?

Code Auswählen Erweitern

<div class=""
             data-type="highchart"
             data-height="230"
             data-device="logdb"
             data-logdevice="logdb"
             data-columnspec="Umwelt.Feuchte.Schlafen:state Umwelt.Feuchte.Wohnen:state Umwelt.Co2.Schlafen:state Umwelt.Co2.Wohnen:state"
             data-linenames="Schlafen Feuchte,Wohnen Feuchte,Schlafen Co2,Wohnen Co2"
             data-linetypes="line,line,line,line"
             data-yaxis="0,0,1,1"
             data-daysago="31"
             data-yopposites="false,true"
             data-yunit="Feuchte %,Co2 ppm"
             data-yopposites="false,false,true"
             data-tooltip="{series.name} <b>{point.y:,.0f}</b>"
             data-legendalign="right"></div>

[Tobias]

Das Zoom bzw From/To geht erst mit 2.2 oder schon vorher?
Ich nutze noch nicht 2.2 vermisse aber genau dieses Feature

[guna83]

Hallo Tobias, die angepasste Version ist  nur für die 2.2er Version der TabletUI.

[Tobias]

Hi
grundsätzlich funktioniert das highchart - ich bin begeistert . Problem ist noch folgendes, siehe schreeshot:
1. die Legende überlappt sich mit dem Zeitraum
2. ich kann keinen Zeitraum eingeben, felder sind nicht editierbar
3. Week und Month sind nicht klickbar, bei einem Klick auf Day passiert nix.
3. der Chart endet grundsätzlich gegen 8Uhr, ich würde aber gerne immer volle Tage angezeigt bekommen.

Code Auswählen Erweitern

<div id="load-container"
                 data-type="highchart"
                 data-device="SEN_EM_Elektro"
                 data-logdevice="DbLog"
                 data-columnspec="SEN_EM_Elektro:003_EM_All_usage SEN_EM_Elektro:031_EM_WZ_usage"
                 data-linenames="Gesamt,WZ"
                 data-linetypes="area,line"
                 data-height="230"
                 data-minvalue="0"
                 data-maxvalue="4000"
                 data-yticks="2"
                 data-title="Stromverbrauch"
                 data-subtitle="Gesamtauslastung des Systems 2"
                 data-daysago="2"
                 data-yunit="Power"
                 data-legendalign="right"
                 style="width: 500px; height: 250px">
        </div>

Über die firefox Konsole wird folgenes DbLog Kommando gezeigt:

Code Auswählen Erweitern

get DbLog - - 2016-07-03_00:00:00 2016-07-06_00:00:00 SEN_EM_Elektro:003_EM_All_usage SEN_EM_Elektro:031_EM_WZ_usage

Gibt es auch vor/zurück Pfeile mit denen man bei der Day-Ansicht einen Tag vor/zurück gehen kann? Bei der Week Ansicht dementsprechend um eine Woche?
Was bewirkt data-height? Ich finde keine Änderungen wenn ich es ändere...

[klausw]

Hallo zusammen,

lassen sich mit dem Widget auch steps wie mit dem SVG Modul darstellen?
Ich würde gern die Anwesenheit grafisch darstellen. Im logdevice wird halt nur anwesend/abwesend reingeschrieben, wenn sich der Zustand ändert. Mit line sieht das nicht so toll aus.

Grüße
Klaus

[guna83]

Hallo Tobias,
nach der Position der Legende gucke ich noch. Da ich bisher selber die Optionen für Titel und Untertitel nicht genutzt habe, ist mir das noch nicht aufgefallen. Danke für den Hinweis!
Probier mal "data-daysago=31" um auch Daten für den kompleten Monat zu erhalten, dann sollten "day/week/month" auch klickbar sein, nach der Datumseingabe muss ich mal gucken. Generell kennt das Widget aber nur die Daten der Tage die mittels "data-daysago" angegeben wurden. Vor-zurück-Pfeile habe ich bei Highcharts noch nicht gefunden. Was ginge wäre eine Scrollbar oder eine Miniansicht des kompletten Zeitraums unter dem Chart - besteht da Interesse? Data-height sollte eigentlich die Gesamthöhe des Charts ändern - tut es zumindest bei mir.

Hallo Klaus,
bisher habe ich keine Steps implementiert, aber da Highchart/Highstock das anbietet kann ich das gerne reinpacken - Du meinst doch sowas, oder?: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/line-step/

Viele Grüße
Guna

[Tobias]

Hi Guna,
bei Angabe von days-ago=31 werden beim Laden auch alle 31 Tage geladen. Bei sehr vielen Daten mit vielen charts innerhlab des Widgets dauert das ziemlich lang.
Ich denke mal sollte unterscheiden wieviel Daten man grundsätzlich sehen will als auch was die default-Anzeige ist.
Also zb. erlaube ich im Chart maximal 31 zurück, möchte aber beim Laden standardmäßig den aktuellen oder letzten Tag oder Woche sehen
Beispiel:

days-ago=31 (in meinen Augen ist der Parameter überflüssig wenn die beiden unten implementiert sind)
default-view=-1 -> Anzeige des letzten Tages/Woche/monats (nur negativwerte sind zugelassen)
default-agg=D -> Anzeige von Tag (D=Tag, W=Woche, M=Monat)

Ich kenne nun highcharts nicht, aber einen irgendein Pfeil vor/zurück reinmodellieren geht nicht? Damit soll ja "nur" das abgesetzte FileLog/DBLog Get Kommando bzgl Zeitraum manipulierbar sein.

Habe es gerade getestet: mit days-ago 31 ist jetzt auch der Week button klickbar. Der Monatsbutton geht nicht. Bei 40Tagen ist er aber auch aktiv. Es wird auch immer nur das letzte intervall dargestellt.
Bei 31 Tagen wird unter Tag nur der aktuelle Tag gezeigt, bei Woche nur die aktuelle Woche. Keine Chance die anderen 3 Wochen des Monats zu sehen Da würden jetzt die Vor/Zurück Pfeile helfen

Kannst du "Scrollbar" genauer erläutern? Würde ev. ein Ersatz sein wenn man mit einem klick auf den rechten Rand der scrollbar genau einen Tag (in der Day-Ansicht) vorscrollen kann. Analog für zurück, analog für Woche/monatsansicht

[klausw]

Hallo Guna,

bisher habe ich keine Steps implementiert, aber da Highchart/Highstock das anbietet kann ich das gerne reinpacken - Du meinst doch sowas, oder?: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/line-step/

Oh ja das sollte es sein, wäre super wenn du es einbaust.
Lassen sich an die y-Achse anstelle von Zahlen auch Text wie unten im Beispiel schreiben?

Grüße
Klaus

[guna83]

Hallo Tobias, hallo Klaus,

es hat ein wenig gedauert, aber übers Wochenende habe ich ein paar Eurer Anmerkungen/Ideen umgesetzt - siehe auch mein Beitrag ganz oben:
- Der Abstand der Legende zum oberen Rand ist jetzt abhängig davon ob Rangeselector, Titel und/oder Untertitel genutzt werden
- 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
- 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 )
- Argument data-scroll (Scrollbar) ergänzt, default false
- Defaultwert von data-range (Rangefinder) umgestellt auf false

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

Viele Grüße
Guna