Flot Chart vs Material Design History Chart

@rtwl also, ich bin begeisterter ECharts Nutzer und habe gerade mal gemessen: Jupp, auch bei mir dauert es.
1 bis 2 Sekunden bis die VIS-Seite aufgebaut ist und noch mal 2 bis 5 Sekunden bis ECharts fertig ist. Jedenfalls bei meiner Hauptansicht.

Naja, ist ja auch ein Kunststück - es kommt darauf an was denn gerade zu sehen ist. Mein Hauptansicht mit dem Stromverbrauch, den 3 Phasen + Solarertrag + Prognose, da muss er schon ein paar Hundert bis Tausend Werte zusammenklauben bis er meine gewünschte 24h Ansicht zusammen hat.

Schaue ich mir die Luftfeuchtigkeit im Badezimmer an sind das nur 3 Kurven und wenige Messpunkte, da ist das Diagramm nach 1 Sekunde da, man kann kaum das Logo sehen.

Also, Quatsch mit "dies ist langsam" und "das ist schnell" - es kommt immer darauf an wie viele Daten da zusammen kommen.

Und an Echarts genieße ich die vielen Einstellungen, ich mag meine Diagramme eher gerundet und nicht jeden einzelnen Zacken. (Einstellung percentil).

Ro75

@rtwl Das ist mit JSON - ging nicht anders:

Das ist das JSON dazu:

[
  {
    "label": "01.03.",
    "value": "5.380000000000109",
    "dataColor": "rgba(156, 33, 33, 0.7)",
    "valueColor": "#ffffff"
  },
  {
    "label": "02.03.",
    "value": "5.990000000000009",
    "dataColor": "rgba(156, 33, 33, 0.7)",
    "valueColor": "#ffffff"
  },
  {
    "label": "03.03.",
    "value": "6.769999999999982",
    "dataColor": "rgba(156, 33, 33, 0.7)",
    "valueColor": "#ffffff"
  },
  {
    "label": "04.03.",
    "value": "11.919999999999844",
    "dataColor": "rgba(156, 33, 33, 0.7)",
    "valueColor": "#ffffff"
  },
  {
    "label": "05.03.",
    "value": "8.940000000000055",
    "dataColor": "rgba(156, 33, 33, 0.7)",
    "valueColor": "#ffffff"
  },
  {
    "label": "06.03.",
    "value": "5.130000000000109",
    "dataColor": "rgba(156, 33, 33, 0.7)",
    "valueColor": "#ffffff"
  },
  {
    "label": "07.03.",
    "value": "6.479999999999791",
    "dataColor": "rgba(156, 33, 33, 0.7)",
    "valueColor": "#ffffff"
  },
  {
    "label": "heute",
    "value": 1.3800000000001091,
    "dataColor": "rgba(97, 128, 94, 0.7)",
    "valueColor": "#ffffff"
  }
]

Dieses hier über Datenpunkte:

Nur damit es nicht falsch rüber kommt. Ich war mit der Performance von FLOT und e-Charts nicht so begeistert. Bei mir laufen die Widgets vom Material Design am besten. Das kann natürlich auch systemabhängig sein. Das muss jeder selbst versuchen und für sich herausfinden. Auf alle Fälle kann man mit allen drei Systemen wunderbar Diagramme in jeglicher Form erstellen.

Ro75

BananaJoe

@ro75 Da du bei dir nur 6 Werte und davon ja auch nur den letzten im Datenpunkt stehenden Darstellst geht das natürlich so viel schneller. Da braucht es keine großen Datenbankabfragen und das Rendering der Daten.

Es kommt halt auch immer auf den Anwendungsfall an.

Homoran

@ro75 sagte in Flot Chart vs Material Design History Chart:

Das kann natürlich auch systemabhängig sein.

die wichtigsten Eckpunkte dazu hat ja @BananaJoe schon sehr schön erklärt.
Dann kommen noch Leistungsfähigkeit des Frontends und WLAN Qualität hinzu.

Ro75

@homoran Also ich habe mit den Diagrammen keine Probleme. Das war nur für @rtwl ein Beispiel. Ich habe auch wesentlich komplexere Chart.

Ro75.

rtwl

Hier ein Video meiner VIS
https://youtu.be/0vPfxFuDwOw

das Diagramm welches zuerst zu sehen ist bei dem ich oben die Zeiträume umstellen ist jenes vom Material Design Adapter (History Line Widget) dauert nur 1 Sek pro Wechsel, obwohl hier Daten alle 5 min gespeichert werden.

beim zweiten Diagramm (FLOT) unten rechts (Stundenansicht, also 24 Datensätze aus dem History Adapter ) dauert ganze 11 sekunden! Beim dritten Diagramm ebenfalls FLOT (Tagesansicht mit den letzten 7 Tagen, also genau 7 Datensätze) geht hier akzeptabel schnell.

aber die 11 Sekunden für das eine Diagramm ist halt komisch. Diese Werte werden per Skript jede Stunde in ein Objekt geschrieben und dieser per History geloggt. Hier ist also keine "Summe von zig Werten" nötig. Das mitloggen läuft auch erst seit wenigen Tagen, also sind hier noch keine 500 Datensätze im. History gespeichert.

Homoran

@rtwl sagte in Flot Chart vs Material Design History Chart:

en! Beim dritten Diagramm ebenfalls FLOT (Tagesansicht mit den letzten 7 Tagen, also genau 7 Datensätze

das sind nicht die relevanten Parameter.

ich hab da zwei Threads verwechselt und das für hier irrtümlich in diesen Thread gepostet: https://forum.iobroker.net/post/959619
Bitte mal dort nachsehen (+ein paar posts weiter), dann muss uch das nicht nochmal alles am Handy tippen

DANKE!

rtwl

@homoran sagte in Flot Chart vs Material Design History Chart:

in der Version 1.3.3

Na toll.
in der Adapter Übersicht ist erst die Version 1.0.12 verfügbar. Und wie ich schon öfters gelesen hab, sollen ungeübte/unerfahrene keine Adapter über die "Katze" installieren. Das heißt diese Option ist also auch nichts für mich.

Schade, dann muss ich wohl mit der Wartezeit leben müssen.

@bananajoe sagte in Flot Chart vs Material Design History Chart:

Also, Quatsch mit "dies ist langsam" und "das ist schnell" - es kommt immer darauf an wie viele Daten da zusammen kommen.

Das dachte ich mir auch, aber siehe mein Video und Erklärungen dazu. Ich hab wirklich nicht viele Daten abzurufen, trotzdem dauert es bis zu 11 Sekunden?

@ro75 sagte in Flot Chart vs Material Design History Chart:

Das ist mit JSON - ging nicht anders (Material Design Adapter)

Kann jemand mir kurz mit Ja oder Nein beantworten ob es möglich ist (noch nicht wie) mit einem Blockly die letzten 7 gespeicherten History Adapter Werte eines Objektes abzufragen, um eine JSON Tabelle zu erstellen für das Balken Widget von Material Design?

@homoran sagte in Flot Chart vs Material Design History Chart:

Dann kommen noch Leistungsfähigkeit des Frontends und WLAN Qualität hinzu

Mein Tablet ist tatsächlich nicht das neueste (3 Jahre altes Huawei) aber da es mit dem Material Design Widget super funktioniert auch mit einigen hunderten Werten vom History denke ich nicht, dass es primär daran liegt, vor allem da ich aktuell nur 2 solcher Diagramme eingebunden hab, und auch sonst keinen großen Schnick Schnack (siehe Video)
WLAN Qualität kann ich nicht messen, aber das Tablet zeigt einen "vollen Balken" an.

Homoran

@rtwl sagte in Flot Chart vs Material Design History Chart:

sollen ungeübte/unerfahrene keine Adapter über die "Katze" installieren.

musst du doch gar nicht.

ist ja schon seit 2 Monaten im latest.

@rtwl sagte in Flot Chart vs Material Design History Chart:

siehe Video

ich sehe mir prinzipiell keine Videos an.

@rtwl sagte in Flot Chart vs Material Design History Chart:

Mein Tablet ist tatsächlich nicht das neueste (3 Jahre altes Huawei) aber da es mit dem Material Design Widget super funktioniert auch mit einigen hunderten Werten vom History

hast du dir die Berechnung zu Gemüte geführt?

@rtwl sagte in Flot Chart vs Material Design History Chart:

WLAN Qualität kann ich nicht messen, aber das Tablet zeigt einen "vollen Balken" an.

Balken sagen gar nichts aus. Die Datenrate ist entscheidend. Dafür gibt es Apps.

rtwl

@homoran sagte in Flot Chart vs Material Design History Chart:

ist ja schon seit 2 Monaten im latest.

Deine Antwort mit 1.3.3 bezog sich auf E-Charts nicht auf FLOT.

@homoran sagte in Flot Chart vs Material Design History Chart:

ich sehe mir prinzipiell keine Videos an.

Cool

@homoran sagte in Flot Chart vs Material Design History Chart:

hast du dir die Berechnung zu Gemüte geführt?

Welche Berechnung? Ich hab das Objekt ausgewählt und meine Einstellungen gemacht - Da ist nichts mit Berechnung.

@homoran sagte in Flot Chart vs Material Design History Chart:

Balken sagen gar nichts aus. Die Datenrate ist entscheidend. Dafür gibt es Apps.

Verstehe. Muss ich mal schauen.

Homoran

@rtwl sagte in Flot Chart vs Material Design History Chart:

Welche Berechnung?

in dem verlinkten Thread, wo ichves irrtümlich reingeschrieben hatte

@homoran sagte in Flot Chart vs Material Design History Chart:

das sind nicht die relevanten Parameter.
ich hab da zwei Threads verwechselt und das für hier irrtümlich in diesen Thread gepostet: https://forum.iobroker.net/post/959619
Bitte mal dort nachsehen (+ein paar posts weiter), dann muss uch das nicht nochmal alles am Handy tippen

Homoran

@rtwl sagte in Flot Chart vs Material Design History Chart:

Deine Antwort mit 1.3.3 bezog sich auf E-Charts nicht auf FLOT.

ok! ok!

dann nochmal

wann da die 1.3.3 im latest auftauchte weiß ich nicht mehr.

rtwl

@homoran sagte in Flot Chart vs Material Design History Chart:

wann da die 1.3.3 im latest auftauchte weiß ich nicht mehr.

Also ich kann nur die 1.0.12 installieren?

Homoran

@rtwl repo kurz auf beta umstellen

rtwl

@homoran sagte in Flot Chart vs Material Design History Chart:

in dem verlinkten Thread, wo ichves irrtümlich reingeschrieben hatte

Es gut mir leid, aber ich verstehe den Zusammenhang mit dem verlinkten Thread nicht. Auch in Bezug auf "Berechnung" finde ich hier keinen Anhaltspunkt. - Ich finde es aber sehr löblich wie du so vielen Usern (mir eingeschlossen) immer wieder hilfst

rtwl

@homoran sagte in Flot Chart vs Material Design History Chart:

repo kurz auf beta umstellen

Homoran

mal die Diskussion hierherkopiert

@mango1402 sagte in "Warn" Logeinträge InfluxDB-Adapter:

Aufbau von 2 24h-Linien

enthält wie viele Datenpunkte?
in welcher Datenbank?
wie angebunden?
mit welcher Aggregation?
auf welchem Frontend?
wie angebunden?
für welche Auflösung?
in welcher Widgetgröße?
Welche Art der Darstellung?
mit Schatten oder anderen Gimmicks?

und viele mögliche Gründe mehr

mango1402
8. März 2023, 12:59

@homoran said in "Warn" Logeinträge InfluxDB-Adapter:

enthält wie viele Datenpunkte?

alle 10s eine Messung -> 8640 pro Messreihe und Tag?

in welcher Datenbank?

InfluxDb V2.6

wie angebunden?

Influx-Adapter, V3.2.0

mit welcher Aggregation?

??

auf welchem Frontend?

ECharts - direkt im IoBroker
aber auch mit Flot geht's nicht flotter.....

wie angebunden?

??

für welche Auflösung?
in welcher Widgetgröße?

--

Welche Art der Darstellung?

Linie, minmax

mit Schatten oder anderen Gimmicks?

nein

und viele mögliche Gründe mehr

Homoran
8. März 2023, 14:22

@mango1402 sagte in "Warn" Logeinträge InfluxDB-Adapter:

mit welcher Aggregation?

??

minmax, mittel, usw. Und Aggregation auf Zeit oder Anzahl.
diese Dinge werden auf dem Backend aufbereitet

apollon77
8. März 2023, 14:27

Ganz kurz: minmax ist mit influxdb eine Wahl die länger dauern muss!

Alle Standardaggregationen wir average, min, max, percentiles und sowas werden direkt von der DB berechnet. Das ist üblicherweise sehr performant.

Da "minmax" eine "ioBroker eigene Art" der Datenaufbereitung ist werden hier ALLE Daten selektiert und dann im Adapter aggregiert. Das dauert etwas länger.

Homoran

März 2023, 14:28

@mango1402 sagte in "Warn" Logeinträge InfluxDB-Adapter:

wie angebunden?

Influx-Adapter, V3.2.0

eher: wo liegt die? Müssen die Daten irgendwo und irgendwie transferiert werden?

@mango1402 sagte in "Warn" Logeinträge InfluxDB-Adapter:

auf welchem Frontend?

ECharts - direkt im IoBroker

das ist das Backend

@mango1402 sagte in "Warn" Logeinträge InfluxDB-Adapter:

für welche Auflösung?
in welcher Widgetgröße?

--

hier geht es um die Rechenintensität auf dem Frontend.
die von Flot berechneten Daten gehen erst einmal davon aus, dass ausreichend Grafikpunkte für die Darstellung vorhanden sind.
bei 8650 Datenpunkten und einer Linienstärke von 3px, braucht es 5px um 2 Punkte getrennt darstellen zu können.
Da dein Chart garantiert keine 45000 Pixel breit ist, rechnet jetzt dein Frontend wieder alles zurück.

NEWS

Flot Chart vs Material Design History Chart

Support us

455
Online

31.8k
Users

79.9k
Topics

1.3m
Posts

NEWS

Flot Chart vs Material Design History Chart

Support us

455Online

31.8kUsers

79.9kTopics

1.3mPosts

455
Online

31.8k
Users

79.9k
Topics

1.3m
Posts