FTUI Neue Version chart_widget

Begonnen von eki, 31 Januar 2016, 00:17:26

Vorheriges Thema - Nächstes Thema

Aeroschmelz


Standarduser

Zitat von: Aeroschmelz am 07 Oktober 2017, 16:58:20
Hallo,

ist es eventuell möglich mit der highchart API, eine Windrose in dieser Art, darzustellen:

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/polar-wind-rose/

Danke

Grundsätzlich ja, denn das Beispiel ist ja von Highchart.
Aber Du bist hier im Thread für das "Chart"-Widget. Es gibt auch noch das "Highchart"-Widget, das ist aber etwas anderes  ;)

eki

Zitat von: Standarduser am 06 Oktober 2017, 19:40:23
Danke. Ist aber leider beides nicht so optimal.

Variante 1 ist beim nächsten Update wieder weg.

Bei Variante 2 liegt der vertikale Strich leicht außerhalb des Diagramms. Außerdem hat diese Variante den Nachteil, dass ich mich ja für eine Höhe entscheiden muss. Damit funktioniert dann die automatische Skalierung der Y-Achse nicht mehr.

Gibt es vielleicht noch eine andere Möglichkeit? Oder könntest Du das irgendwann mal fest einbauen? Von mir aus auch mit einem neuen Attribut?

Ich werde die Variante 1 einbauen und über ein Attribut steuerbar machen, damit die Kompatibilität zu bestehenden Setups erhalten bleibt

eki

Zitat von: Standarduser am 07 Oktober 2017, 20:05:52
Grundsätzlich ja, denn das Beispiel ist ja von Highchart.
Aber Du bist hier im Thread für das "Chart"-Widget. Es gibt auch noch das "Highchart"-Widget, das ist aber etwas anderes  ;)

Grundsätzlich geht das sicher. Dazu müsste aber auf jeden fall etwas im widget_highchart.js angepasst werden. Dort wird sozusagen das Highchart API an FTUI geflanscht, und soweit mir bekannt werden da eben nicht alle (wäre auch mega aufwändig) features unterstützt. Aber eine Anfrage an den Ersteller von widget_highchart.js gibt da sicher Auskunft.

basty2

Ich würde gern die Farbe des Grafen in Abhängigkeit von der Temperatur darstellen lassen. Keine Ahnung ob das funktioniert, aber d.h. bspw. zu warm -> Graf wird rot. Dazu würde ich ein Reading erzeugen, dass eben "ftui l2". Ist es möglich, den Wert
data-style="xyz"
über ein Reading zu steuern, bspw.

data-style="Device:Reading" ?

Ich habe es nicht direkt geschafft, daher meine Frage an Euch.

eki

Das geht bisher leider nicht. Ich mach mir mal Gedanken, wie ich das realisieren kann.

Standarduser

Zitat von: eki am 09 Oktober 2017, 07:44:56
Das geht bisher leider nicht. Ich mach mir mal Gedanken, wie ich das realisieren kann.

Wie wäre es mit einem Farbverlauf, zum Beispiel von Blau nach Rot, der fest unten fixiert ist, also nicht einfach die Fläche von unten nach oben füllt und sich dynamisch aufteilt, sondern immer statisch bleibt.
Steigt die Temperatur über einen bestimmten Wert, wird der rote Bereich langsam sichtbar. Rot wird auch nur der Teil des Charts, der über dem "Normal" liegt.
Hab mal schnell etwas konstruiert, damit man sich das besser vorstellen kann -> Screenshot

basty2

Also ich finde das sieht gut aus, für meinen Used Case auch besser als wenn die ganze Linie farblich anders wäre... Für mein Kühlschrank Widget auf jeden Fall superb... Für einen Heizungswidget könnte ich mir ggf. 3 Farben vorstellen, blau zu kalt, grün ok und rot zu warm.

Standarduser

Mir gefällt das auch ganz gut. Ich denke, dass man das vielleicht mit zwei Parametern umsetzen könnte. Jeweils ein Array für die Punkte, an denen sich die Farben ändern sollen und eins für die Farben selber.

ChrisW

also egal wo ich es einfüge sogar in die vorhandene muster index wird die Schriftart usw. angepasst
Folgendne code eingebaut zwischen einem <li>
<div data-type="chart"
data-device="HeizungWZ"
data-logdevice='["FileLog_HeizungWZ","FileLog_HeizungWZ"]'
data-columnspec='["4:measured-temp","4:humidity"]'
data-style='["ftui l0fill","ftui l1fill"]'
data-ptype='["lines","lines"]'
data-uaxis='["primary","secondary"]'
data-legend='["Temperatur","Luftfeuchte"]'
data-yunit="°C"
data-ytext="Temperatur"
data-yunit_sec="% rel."
data-ytext_sec="Feuchte"
data-height="250">
</div>


Anhang meine CSS Dateien.. ich raff nicht wieso
Raspberry PI3 mit allem möglichen.

eki

Hallo ChrisW,

ich verstehe es auch nicht. Ich habe es jetzt noch mal mit Deiner Chart Definition und Deiner index.html und Deinen css Dateien in Chrome bei mir probiert. Und es sieht soweit OK aus (siehe Bild).
Bekommst Du denn irgendwelche Meldungen auf der Browser Konsole?

ChrisW

#221
hmm das kommt als fehler:
Error: <rect> attribute width: A negative value is not valid. ("-88.968625px")
buildFragment @ jquery.min.js:3
fhem-tablet-ui.min.js:1 get jsonlist2: 250.662841796875ms
fhem-tablet-ui.min.js:1 read jsonlist2: 149.751953125ms
fhem-tablet-ui-user.css Failed to load resource: the server responded with a status of 404 (Not Found)


Scheint vielleicht an der fhem-tablet-ui-user.css zu liegen? Wenn ich den Code ausbaue ist dieser fehler auch weg.

Hab es aus der Index gehauen .. nu sind keine fehler mehr drin ABER Design is noch immer Komplett zerstört ich raff es nicht...

Angang nochmal der quelltext mit fehler und wie es richtig ist.
Raspberry PI3 mit allem möglichen.

eki

Hallo zusammen,

es gibt mal wieder eine neue Version des Chart Widgets (siehe Anfang dieses Threads https://forum.fhem.de/index.php/topic,48450.msg401006.html#msg401006). Die Beschreibung dessen was neu ist, findet Ihr wenn Ihr die Zeilen nach "Edit 29.11.2017:" lest.

Ulm32b

#223
Zunächst: Das Widget ist superaffenstark. Ich habe das jetzt mal am Beispiel Benzinpreis implementiert ... und mache gerne (vom Entwickler ermuntert) Vorschläge:

Noch keinen Weg gefunden habe ich, um den Diagrammtitel in Größe und Farbe zu formatieren.

Auf der Hochachse erhielt ich nach der alten Fassung 1.0, 1.2, 1.4 und habe dies mit der "Einheit" "0 € " zu 1.00 €, 1.20 €, 1.40 € gepimpt. In der neuen Fassung werde ich diesbezüglich mit der Achsenbeschriftung 1, 1.2, 1.4 ausgebremst. Besser fände eine Formatierungsmöglichkeit für die Achsenbeschriftung.

Das Dropdownmenü lautet bei mir:

  • Aktueller Monat
  • Vergangener Monat
  • Aktelle Woche
  • Vergangene Woche
  • Heute
  • Gestern
  • Initial Value

Das automatich eingefügte Initial Value ist hier ein ziemlicher Fremdkörper. Ich halte diesen Punkt für entbehrlich, weil der Initialwert bei Bedarf im Menü auch individuell implementiert werden kann. Dann kann man auch auf Sprachversionen verzichten.

Und dann die x-Achse: Zunächst war ich hochzufrieden, bis ich darauf kam, dass die Zeitreihe sowohl im Tagesgang als auch für längere Zeiträume interessant ist und dies genialerweise ja auch leicht eingestellt werden kann. Eine statische Achsenformatierung ist dafür natürlich wenig geeignet. Und die dynamische passt sich noch nicht so ganz perfekt an die eingestellten Zeiträume an. Mit       
data-nofulldays="true"
erhalte ich im Wochenprofil die Ticks 02.12, 01:00, 01:00, 01:00, 01:00, 01:00, 01:00, 09.12. (wobei der 09.12 von einem 01:00 überschrieben ist). Und im Tagesprofil werden nur Anfangs- und Enddatum angezeigt. Neu erfunden werden muss eine dynamische Achsenbeschriftung wahrscheinlich nicht. Der Suchbegriff "dynamic charts" liefert gute Ansätze. Wohl nicht trivial, aber den Schweiß der Edlen wert.

eki

Man merkt dass Weihnachten ist, der Wunschzettel ist ja ganz schön groß  ;)

Zum Thema Diagrammtitel: Das kann ich relativ leicht anpassen (Vorschlag: Ich lasse zu, dass bei der Angabe des Titels eine Klasse angegeben werden kann, dann kann man über die fhem-tablet-ui-user.css Datei für diese Klasse das Aussehen anpassen. In dem man für verschiedene Charts verschiedene Klassen festlegt, kann man dann auch unterschiedliche Header Formatierungen für unterschiedliche Charts realisieren.)

Bezüglich der Achsenbeschriftung kann ich natürlich auch noch eine Möglichkeit einbauen, dass das Format der Achsenbeschriftung gewählt werden kann (ist ein bisschen Aufwand, aber machbar). Dass jemand den yunit Parameter so "kreativ" einsetzten könnte darauf bin ich nicht gekommen.

Mit der Sprache hast Du natürlich recht, und auch damit, dass man das initial Value ja selbst mit dazu packen kann. Ich werde es raus nehmen.

Tja, das mit der x-Achsen Formattierung ist so eine Sache und bei data-nofulldays auch aktuell noch so, dass die Zwischenwerte komisch aussehen. Ich bin da noch dran, ist aber ein ziemliches Gefummel mal schauen.