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 (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
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:
<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 8) .
Viele Grüße
Guna
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
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 (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.
Freut mich, dass sich jemand dem Highcharts Widget annimmt. :)
War da auch immer ein Fan von.
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
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?
<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>
Das Zoom bzw From/To geht erst mit 2.2 oder schon vorher?
Ich nutze noch nicht 2.2 vermisse aber genau dieses Feature
Hallo Tobias, die angepasste Version ist nur für die 2.2er Version der TabletUI.
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.
<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:
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...
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
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
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
Hallo Guna,
Zitat von: guna83 am 06 Juli 2016, 07:02:10
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
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
Hallo Guna,
das ging flott, super Sache!
Zitat von: guna83 am 11 Juli 2016, 16:56:16
- 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
Zitat von: guna83 am 11 Juli 2016, 16:56:16
- 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 8)
Zitat von: guna83 am 11 Juli 2016, 16:56:16
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.
Hallo Guna,
woran könnte die Fehlermeldung:
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:
<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:
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
Zitat von: AHA1805 am 11 Juli 2016, 22:47:21
woran könnte die Fehlermeldung:
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.
data-scroll="true"
data-range="true"
nur ein Wert sollte gehen (es gibt nur eine x-Achse)
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
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)
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.
Hallo Guna,
Zitat von: guna83 am 12 Juli 2016, 07:14:46
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?
Zitat von: guna83 am 12 Juli 2016, 07:14:46
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?
Zitat von: guna83 am 12 Juli 2016, 07:14:46
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
Zitat von: guna83 am 12 Juli 2016, 07:14:46
Gehen die min/max Werte noch nicht pro y-Achse? Da muss ich nochmal gucken was ich programmiert habe...
irgendwie nicht
anbei ein Beispiel
<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)
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
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
Hi Guna,
Zitat von: guna83 am 12 Juli 2016, 19:15:52
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.
Zitat von: guna83 am 12 Juli 2016, 19:15:52
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
Zitat von: guna83 am 12 Juli 2016, 19:15:52
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
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?
Gibt es eigentlich die Möglichkeit im Titel die min/max Werte aus dem Plot mit auszugeben?
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
Hallo Guna
Dankeschön das hilft mir sehr .
Schöne Grüße
Hannes
Gesendet von meinem SM-T715 mit Tapatalk
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 ;)
Hallo zusammen,
ich schaff das nicht bei highchart immer die letzten 24 Stunden anzeigen zu lassen. Also z.B. um 14.30 Uhr einen Chart anzuzeigen von gestern um 13.30 bis heute um 13.30 Uhr.
Gibt es da eine Lösung?
Danke für Tipps.
Gruß Christian
Hallo zusammen,
kann ich bei dem Highchart auch Daten aus unterschiedlichen (Log)Devices anzeigen? Wenn ja wie? Ich habe beispielsweise einen Sensor für die Temperatur und einen anderen für die Luftdrücke. Beide laufen aber in unterschiedliche Logdevices.
Hi, ich habe ja nun auf FTUI 2.2. gewechselt. Damit funktionierten meine Charts nicht mehr.
Nach eurer Anleitung habe ich jetzt versucht es mit einem Highchart in 2.2 einzubinden.
Dies funkioniert auch schon weitestgehend, nur fehlt mir leider die "data-range" um zwischen Tag, Woche und Monat umschlaten zu können.
An was könnte dies liegen? Weiterhin kann ich die größe des charts nicht mehr verändern, früher ging dies doch mal mit (data-height="230" data-width="1100")
* widget_highchart.js ist vom 09.09.2016 und ist über das automatische Update gekommen
den kompletten js - Highstock Ordner habe ich auf den Raspberry geschoben
<li data-row="4" data-col="8" data-sizex="6" data-sizey="4">
<div data-type="highchart"
data-device="Heizung_Thermo_Wohnz"
data-logdevice="FileLog_Heizung_Thermo_Wohnz"
data-columnspec="4:measured-temp 4:desired-temp 4:Climate.humidity:0:"
data-linenames="Temperatur ist,soll Temperatur,Luftfeuchte"
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="2"
data-scroll="true"
data-range="false"
data-minvalue="2,0"
data-maxvalue="32,100"
data-height="230"
data-width="1100"
data-tooltip="{series.name}: <b>{point.y:,.1f}</b><br>"
data-legendalign="right"
class="">
</div>
</li>
Hallo Depechen,
wenn Du die hier im Threat beschriebenen "Zusatz"Features nutzen möchtest, musst Du die widget_highcharts.js aus dem ersten Beitrag nutzen.
@all Ich gucke mir Eure Wünsche, Anmerkungen, etc. nach und nach durch! Wenn jemand hierzu genaue Ideen zur Umsetzung hat oder selber erfolgreich etwas getestet hat (insbesondere was das dynamische Laden von Daten angeht!) immer her damit!
Seit gestern habe ich bei uns Highstock 5.0.0 im Einsatz.
Gruß
Guna
Servus Guna,
wollte heute mal dein highchart testen. Leider funktioniert das bei mir nicht.
Habe highstock 5.0.2 im Einsatz.
Statt einem Chart wird mir nur ein schwarzer Kasten angezeigt...
<div class=""
data-type="highchart"
data-height="350"
data-device="myDbLog"
data-logdevice="myDbLog"
data-columnspec="Garten_TempFeucht:temperature Garten_TempFeucht:humidity"
data-linenames="Aussen[°C],Aussen[RH%]"
data-linetypes="line,line"
data-yaxis="0,1"
data-yopposites="false,true"
data-daysago="1"
data-yunit="°C,%"
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>
Hab ich noch was vergessen zum Einstellen, machen etc.?
Danke
Gruß
Roland
Kommando zurück! Hab jetzt Highstock 5.0.0 installiert, und jetzt gehts!
Allerdings kann ich am Tablet(Android 6 mit Fully) die data-range Knöpfe nicht betätigen.... auf einem Windowslaptop klappt einwandfrei.
Weiß jemand warum?
Nochmals Danke ;-)
Heute habe ich exemplarisch ein Chart auf Highchart umgestellt (mit Highstock 5.0.0).
In der Konsole erscheint stets der Fehler widget_highchart.js:123 Uncaught TypeError: column_spec.match is not a function(...) (siehe Stacktrace im Anhang).
Wie immer in solchen Situationen stellt sich die Frage. Was mache ich falsch?
Gruß,
Mario
Meine Konfiguration:
<div
data-type="highchart"
data-height="230"
data-device="InfoPanel"
data-logdevice='["InfoPanel_FileLog"]'
data-columnspec='["4:powerLevel"]'
data-linenames="Battery Level"
data-linetypes="line"
data-yaxis="0"
data-daysago="31"
data-yopposites="false"
data-yunit="%"
data-tooltip="{series.name} <b>{point.y:,.0f}</b>"
data-legendalign="right">
</div>
Moin,
Gibt es noch irgend eine Quelle um sich "Highstock" zu laden?
Der Link im ersten Post ist leider tot.. :(
Vielen Dank!
grtz
CmdA
Hi,
gibt es mittlerweile die Möglichkeit, dass sich die Werte in einer Highchart zyklisch aktualisieren?
Ich möchte die alle 5 Sekunden aus VOLKSZAEHLER einlaufenden Werte so darstellen, dass das Schalten von Verbrauchern direkt sichtbar ist.
Gruß
moeweflieg
moin ...
ich bin ein Anfänger mit FHEm und table ui - bin aber schon zufrieden mit dem was ich mir zusammengebastelt habe .
Natürlich habe ich mir die einzelnen codes hier und da zusammengesucht , und einiges auch durch probieren verstanden .
ich habe Temperatursensoren die aus einem LogFile auslese ... und das funktioniert ...
nun habe ich auch Fritz!Dect200 eingebunden und auch hier werden LogFiles geschrieben ... würde gerne die Leistung - also zB 38.44 W von drei fritz!Dect200 in einem chart darstellen ... ich bekomme aber noch nichtmal eine Kurve hin . Ich vermute das der chart oder highchart nichts mit dem W hinter der Zahl anfangen kann ...
zB hier kann ich das dem Logfile auslesen und darstellen : XXXX_CARPORT Temperatur: 1.9
hier nicht : FBDECT_fbaha_16 power: 44.48 W
hier geht es : data-columnspec='["XXXX_A_CARPORT:Temperatur"]'
hiernicht : data-columnspec='["FBDECT_fbaha_16:power:"]'
hat jemand eine Idee ? entweder im define Befehl das W unterdrücken damit es nicht gschrieben wird oder aber unter table ui das W nicht einlesen aber wie - hab schon verschieden :;/,0,"" usw hinten angesetzt aber nix funktionierte ...
Auch eine suche brachte keine Antwort oder ich habe die falschen Suchbegriffe benutzt ...
... über Antwort würde ich mich freuen ...
pierre
würde mich über Antwort freuen ...
Egal was ich in lib/highstock kopiere vom zip Package der version 5.0.9, ich kriege immer den Fehler: dateFromString is not defined
Kann mir jemand bitte sagen, wie das lib/highstock Verzeichnis aussehen muss? Eine ls -laR in lib/highstock würde mir viel helfen.
Muss man zusätzlich auch etwas in den headers des index.htlm haben? So ein <script src="lib/highstock..."></script> oder ähnliches?
Danke im Voraus
Gruß
Hab auch mit Highstock 5.0.0 probiert, und geht auch nicht. :-[