Test Adapter flexcharts - Stapeldiagramme und mehr

jrbwh

@neopholus Es ist doch möglich, ein Chart als Datei zu exportieren. Wenn Du folgendes innerhalb der Chart-Definition ergänzt, erscheint ein Download-Button im Chart. Klickt man den, wird ein PNG-File im Download-Ordner erzeugt:

  "toolbox": {
    "show": true,
    "feature":{
      "saveAsImage":{
        "type": "jpg",
        "name": "meinDiagramm",
        "backgroundColor":"#ffffff",
        "pixelRatio":2
      }
    }
  },

Bei mir wird immer ein PNG erzeugt, auch wenn ich "jpg" angebe.
Hilft Dir das?

Herzlichen Dank an @legro für den Hinweis auf dieses Feature!

legro

@merlin123

Gegen Ende der hier entstehenden Dokumentation zu unserer Visualisierung solltest du eine möglich Lösung finden.

Merlin123

@legro Danke für den Hinweis :)

SMS

Guten Morgen,

ich möchte benfalls eine von tibber bereitgestellte Datei in einem Balkendiagram darstellen. Hat jemand eine Schritt für Schritt Anleitung? Verstehe nicht wo ich die json Datei von tibber

einfügen soll das mir das angezeigt wird. Irgendwo muss ja ein template rein, aber wo und wie?
echarts und flexcharts sind installiert.

Danke!

jrbwh

@sms Dazu gibt es ja schon eine ausführliche Diskussion im Adapter tibberLink. Mir ist deshalb nicht ganz klar, was Dir an Info fehlt. Die Vorgehensweise, um per State ein Diagramm zu erzeugen ist im Readme beschrieben. Kurz zusammengefasst:

Du musst einen State im json-Format erzeugen, der das Format der cChart-Options hat und Deine Daten als "series" enthält
Du übergibst die State-ID an flexcharts. Der eCharts-Adapter wird dabei übrigens nicht benötigt.

Um ein passendes eChart-Options Template zu bekommen, gehst Du am besten auf die Beispielseite von Apache eCharts, suchst Dir ein Beispiel-Chart, das einigermaßen zu Deinen Vorstellung passt und zeigst das an. Dann kannst Du online den Chart-Code verändern und direkt ausprobieren. Wenn alles passt übernimmst Du diesen Code in den State für flexcharts. Nun musst Du per Skript nur noch Deine Daten einfügen.

SMS

@jrbwh sagte in Test Adapter flexcharts - Stapeldiagramme und mehr:

@sms Dazu gibt es ja schon eine ausführliche Diskussion im Adapter tibberLink. Mir ist deshalb nicht ganz klar, was Dir an Info fehlt. Die Vorgehensweise, um per State ein Diagramm zu erzeugen ist im Readme beschrieben. Kurz zusammengefasst:

Du musst einen State im json-Format erzeugen, der das Format der cChart-Options hat und Deine Daten als "series" enthält

Das verstehe ich nicht bzw. bekomme ich nicht hin. Denke du meinst einen DP erzeugen? Aber was für einen?
hier?

Dann müsste ich doch hier was einfügen können?

jrbwh

@sms Ja, ich meine einen DP. Ich nutze kein Tibber und kenne auch den tibberLink-Adapter nicht. Aber @ReblausGT hat ja hier die Vorgehensweise schön beschrieben.

Wenn Du die Funktionsweise von flexcharts verstehen möchtest, empfehle ich, die Beispiele im Readme auszuprobieren.

@ReblausGT @Merlin123 Falls ihr ein praktikables Verfahren für die Aufbereitung der tibberLink-Daten für flexcharts habt, wäre es super, ihr könntet das als Diskussionsbeitrag bei flexcharts teilen.

Merlin123

@jrbwh Die Frage ist: Was verstehst Du unter praktikabel? Ich hab ein Blockly, das mit das visualisiert und einträgt, wann das Auto geladen würde und die Grenzen für Speicher laden/entladen.

Kann das mal einstellen.

Hier zu finden

jrbwh

@merlin123 Ja, genau sowas meine ich mit praktikabel! Danke!

Das kann - mindestens - als super Startpunkt für eine eigene Implementierung dienen.

@sms Hoffe, das hilft Dir auch weiter.

Merlin123

@jrbwh Bei Fragen können sich die Leute gerne melden. Hab da auch genug Fragen gestellt, bis ich das halbwegs verstanden habe :)

SMS

Mir geht es ja nicht um die Anzeige des tibber Strompreises, das war ja in einen anderen Thread erklärt und habe ich hinbekommen.

Was ich jetzt nicht hinbekomme, ist das Anzeigen eines anderen json DP. Ich weiß nicht bzw. lese nicht heraus was für einen ich erstellen soll und dann wo eintragen. Das war ja meine Frage. :-(

jrbwh

@sms Mit diesen Infos fällt mir eine Antwort schwer. Wenn Du einen Beispieldatensatz postest und Deine Vorstellung beschreibst, wie das Diagramm aussehen soll, kann ich mir ein paar Gedanken dazu machen.

SMS

@jrbwh ich möchte ebenfalls eine von tibber bereitgestellte Datei in einem Balkendiagram darstellen.
Verstehe nicht wo ich die json Datei von tibber

Angezeigt werden sollen einmal die Gesamtkosten (totalcost) und der Gesamtverbrauch (consumption)

[{"from":"2025-01-06T00:00:00.000+01:00","to":"2025-01-06T00:00:00.000+01:00","cost":10.7284204741,"unitPrice":0.287942,"unitPriceVAT":0.045974,"consumption":37.259,"consumptionUnit":"kWh","totalCost":10.3727235241,"unitCost":10.7284204741,"currency":"EUR"},{"from":"2025-01-13T00:00:00.000+01:00","to":"2025-01-13T00:00:00.000+01:00","cost":14.5018410257,"unitPrice":0.298478,"unitPriceVAT":0.047656,"consumption":48.586,"consumptionUnit":"kWh","totalCost":14.0038652957,"unitCost":14.5018410257,"currency":"EUR"},{"from":"2025-01-20T00:00:00.000+01:00","to":"2025-01-20T00:00:00.000+01:00","cost":16.5644088827,"unitPrice":0.385434,"unitPriceVAT":0.06154,"consumption":42.976,"consumptionUnit":"kWh","totalCost":16.0664331527,"unitCost":16.5644088827,"currency":"EUR"},{"from":"2025-01-27T00:00:00.000+01:00","to":"2025-01-27T00:00:00.000+01:00","cost":13.6840366474,"unitPrice":0.360961,"unitPriceVAT":0.057632,"consumption":37.91,"consumptionUnit":"kWh","totalCost":13.1860609174,"unitCost":13.6840366474,"currency":"EUR"}]

einfügen soll das mir das angezeigt wird. Irgendwo muss ja ein template rein, aber wo und wie?

Adresse ist ja dann: http://iobroker-ip:8082/flexcharts/echarts.html?source=state&id=...

Danke!

legro

@sms sagte in Test Adapter flexcharts - Stapeldiagramme und mehr:

.. Irgendwo muss ja ein template rein, aber wo und wie?

Die Daten müssen in dem Bereich series eingetragen werden. Dieses Feld ist ein Array aus Objekten, die ihrerseits wiederum Arrays enthalten, in welche die darzustellenden Werte einzutragen sind. In dem nachfolgenden Beispiel ab Zeile 23. Für jede Datenreihe muss ein solches Objekt in Array series angelegt werden.

  "yAxis": [
    {
      "name": "Temperatur",
      "nameLocation": "end",
      "nameTextStyle": {
        "color": "#ffffff",
        "fontSize": 15
      },
      "type": "value",
      "axisLabel": {
        "formatter": "{value} °C",
        "fontSize": 12,
        "color": "#ffffff"
      }
    }
  ],
  "series": [
    {
      "name": "Min",
      "type": "bar",
      "barGap": "30%",
      "color": "#5f5f5f",
      "data": [
        0.7,
        0.7,
        -0.1,

jrbwh

@sms Ich habe mal was gebastelt. Hoffe, das kommt Deinen Vorstellung nahe. Hier ist die Beschreibung.

SMS

@jrbwh Hi
Ja das sieht schon mal ganz gut aus. Danke! Ich habe es auf dem Tablet soweit hinbekommen, das es mir wie in deiner Beschreibung angezeigt wird.
Das würde ich jetzt gerne mit daily genauso haben. Leider kann ich auf dem Tablet nicht nachvollziehen, was in der zip-Datei drin steht. Das muss ich mir aufm Laptop mal anschauen.
Ich denke beim ersten muss ich weekly durch daily ersetzen und die json von tibber rein kopieren? Das müsste mir dann wieder die Objektstruktur erzeugen wenn ich es dann importiere. Liege ich richtig?
Woher kommen die Daten vom Abschnitt ..."_id": "0_userdata...chartweekly"? bei "val": "{"...
Muss ich die händisch eintragen?

jrbwh

@sms Ich habe das Skript mal als Text in die Anleitung eingefügt. Das ist leichter verständlich. Der State chartWeekly enthält die Definition des Charts. Das habe ich auf Basis eines Beispiels von den Apache Echart Seiten erstellt - wie ich weiter oben erläutert habe. Wenn das Chart anders aussehen soll, musst Du diesen State ändern.

Für ein Daily Chart:

chartWeekly nach chartDaily kopieren und ggf. anpassen
tibberDaily anlegen und die richtigen Daten reinkopieren
Im Skript die ersten 3 Konstanten kopieren und anpassen
den Funktionsaufruf evalTibberData() (Zeile 9) kopieren und anpassen
die Funktion on() kopieren und anpassen

UlliJ

@jrbwh

Vielen Dank für den Adapter und die unendlichen Möglichkeiten für die Darstellung von Charts:+1:

Ich scheitere derzeit an diesem Chart für ein CoP Netz der Wärmepumpe. Auf der Apache echarts Webseite funktioniert die Darstellung (bis auf Details und aktuellen Betriebspunkt) wie gewollt

In der Vis bleibt nur die Farbskala und der Rest ist weg

Der Datensatz dazu

option = {
 "tooltip": {},
 "visualMap": {
   "min": 1,
   "max": 6,
   "dimension": 2,
   "inRange": {
     "color": [
       "#313695",
       "#4575b4",
       "#74add1",
       "#abd9e9",
       "#e0f3f8",
       "#ffffbf",
       "#fee090",
       "#fdae61",
       "#f46d43",
       "#d73027"
     ]
   }
 },
 "xAxis3D": {
   "type": "category",
   "name": "AT (°C)"
 },
 "yAxis3D": {
   "type": "category",
   "name": "VL (°C)"
 },
 "zAxis3D": {
   "type": "value",
   "name": "COP"
 },
 "grid3D": {
   "boxWidth": 100,
   "boxDepth": 100,
   "viewControl": {
     "projection": "perspective"
   }
 },
 "series": [
   {
     "type": "scatter3D",
     "symbolSize": 10,
     "data": [
       [
         -10,
         35,
         3.43
       ],
       [
         -10,
         40,
         3.18
       ],
       [
         -10,
         45,
         2.92
       ],
       [
         -10,
         50,
         2.65
       ],
       [
         -10,
         55,
         2.37
       ],
       [
         -10,
         60,
         2.08
       ],
       [
         -10,
         65,
         1.78
       ],
       [
         -8,
         35,
         3.67
       ],
       [
         -8,
         40,
         3.42
       ],
       [
         -8,
         45,
         3.15
       ],
       [
         -8,
         50,
         2.88
       ],
       [
         -8,
         55,
         2.6
       ],
       [
         -8,
         60,
         2.31
       ],
       [
         -8,
         65,
         2.01
       ],
       [
         -6,
         35,
         3.92
       ],
       [
         -6,
         40,
         3.67
       ],
       [
         -6,
         45,
         3.4
       ],
       [
         -6,
         50,
         3.13
       ],
       [
         -6,
         55,
         2.85
       ],
       [
         -6,
         60,
         2.56
       ],
       [
         -6,
         65,
         2.26
       ],
       [
         -4,
         35,
         4.18
       ],
       [
         -4,
         40,
         3.93
       ],
       [
         -4,
         45,
         3.67
       ],
       [
         -4,
         50,
         3.4
       ],
       [
         -4,
         55,
         3.12
       ],
       [
         -4,
         60,
         2.83
       ],
       [
         -4,
         65,
         2.53
       ],
       [
         -2,
         35,
         4.44
       ],
       [
         -2,
         40,
         4.19
       ],
       [
         -2,
         45,
         3.92
       ],
       [
         -2,
         50,
         3.65
       ],
       [
         -2,
         55,
         3.37
       ],
       [
         -2,
         60,
         3.08
       ],
       [
         -2,
         65,
         2.78
       ],
       [
         0,
         35,
         4.69
       ],
       [
         0,
         40,
         4.44
       ],
       [
         0,
         45,
         4.18
       ],
       [
         0,
         50,
         3.91
       ],
       [
         0,
         55,
         3.63
       ],
       [
         0,
         60,
         3.34
       ],
       [
         0,
         65,
         3.04
       ],
       [
         2,
         35,
         4.95
       ],
       [
         2,
         40,
         4.7
       ],
       [
         2,
         45,
         4.43
       ],
       [
         2,
         50,
         4.16
       ],
       [
         2,
         55,
         3.88
       ],
       [
         2,
         60,
         3.59
       ],
       [
         2,
         65,
         3.29
       ],
       [
         4,
         35,
         5.2
       ],
       [
         4,
         40,
         4.95
       ],
       [
         4,
         45,
         4.69
       ],
       [
         4,
         50,
         4.42
       ],
       [
         4,
         55,
         4.14
       ],
       [
         4,
         60,
         3.85
       ],
       [
         4,
         65,
         3.55
       ],
       [
         6,
         35,
         5.44
       ],
       [
         6,
         40,
         5.19
       ],
       [
         6,
         45,
         4.93
       ],
       [
         6,
         50,
         4.66
       ],
       [
         6,
         55,
         4.38
       ],
       [
         6,
         60,
         4.09
       ],
       [
         6,
         65,
         3.79
       ],
       [
         8,
         35,
         5.67
       ],
       [
         8,
         40,
         5.42
       ],
       [
         8,
         45,
         5.16
       ],
       [
         8,
         50,
         4.89
       ],
       [
         8,
         55,
         4.61
       ],
       [
         8,
         60,
         4.32
       ],
       [
         8,
         65,
         4.02
       ],
       [
         10,
         35,
         5.89
       ],
       [
         10,
         40,
         5.64
       ],
       [
         10,
         45,
         5.38
       ],
       [
         10,
         50,
         5.11
       ],
       [
         10,
         55,
         4.83
       ],
       [
         10,
         60,
         4.54
       ],
       [
         10,
         65,
         4.24
       ],
       [
         12,
         35,
         6.1
       ],
       [
         12,
         40,
         5.85
       ],
       [
         12,
         45,
         5.59
       ],
       [
         12,
         50,
         5.32
       ],
       [
         12,
         55,
         5.04
       ],
       [
         12,
         60,
         4.75
       ],
       [
         12,
         65,
         4.45
       ],
       [
         14,
         35,
         6.29
       ],
       [
         14,
         40,
         6.04
       ],
       [
         14,
         45,
         5.78
       ],
       [
         14,
         50,
         5.51
       ],
       [
         14,
         55,
         5.23
       ],
       [
         14,
         60,
         4.94
       ],
       [
         14,
         65,
         4.64
       ],
       [
         16,
         35,
         6.47
       ],
       [
         16,
         40,
         6.22
       ],
       [
         16,
         45,
         5.96
       ],
       [
         16,
         50,
         5.69
       ],
       [
         16,
         55,
         5.41
       ],
       [
         16,
         60,
         5.12
       ],
       [
         16,
         65,
         4.82
       ],
       [
         18,
         35,
         6.63
       ],
       [
         18,
         40,
         6.38
       ],
       [
         18,
         45,
         6.12
       ],
       [
         18,
         50,
         5.85
       ],
       [
         18,
         55,
         5.57
       ],
       [
         18,
         60,
         5.28
       ],
       [
         18,
         65,
         4.98
       ],
       [
         20,
         35,
         6.78
       ],
       [
         20,
         40,
         6.53
       ],
       [
         20,
         45,
         6.27
       ],
       [
         20,
         50,
         6
       ],
       [
         20,
         55,
         5.72
       ],
       [
         20,
         60,
         5.43
       ],
       [
         20,
         65,
         5.13
       ]
     ]
   }
 ]
};

Klar kann man das auch z.B. als Liniendiagramm darstellen, das klappt auch in Vis-2 ...aber das 3D scatter gefällt mir besser.

Eingebunden in der Vis über ein HTML widget mit Inhalt:

http://192.168.178.9:8082/flexcharts/echarts.html?source=state&id=0_userdata.0.0000_Visualisierung.Heizung.copnetz

Hast Du eine Idee warum das in Vis-2 (vis nicht getestet) nicht angezeigt wird?
Danke vorab

SMS

@jrbwh sagte in Test Adapter flexcharts - Stapeldiagramme und mehr:

@sms Ich habe das Skript mal als Text in die Anleitung eingefügt. Das ist leichter verständlich. Der State chartWeekly enthält die Definition des Charts. Das habe ich auf Basis eines Beispiels von den Apache Echart Seiten erstellt - wie ich weiter oben erläutert habe. Wenn das Chart anders aussehen soll, musst Du diesen State ändern.

Für ein Daily Chart:

chartWeekly nach chartDaily kopieren und ggf. anpassen

Ich scheitere irgendwie schon hierbei. Ich muss doch hier auf kopieren:

aber wo einfügen?

tibberDaily anlegen und die richtigen Daten reinkopieren

Einfach hierüber anlegen?

Im Skript die ersten 3 Konstanten kopieren und anpassen

den Funktionsaufruf evalTibberData() (Zeile 9) kopieren und anpassen

die Funktion on() kopieren und anpassen

Mal schauen ob ich das hinbekomme.

jrbwh

@ullij Das ist ziemlich seltsam. Es gibt Beispiele mit scatter3D, wenn ich aber in die Docs schaue bei series.type wird da kein scatter3D aufgelistet.
Und der Browser meldet in der Konsole "[ECharts] Unknown series scatter3D" beim Versuch, das Chart darzustellen.
Hab noch keine Idee, was da los ist.

Community Forum

NEWS

Test Adapter flexcharts - Stapeldiagramme und mehr

Support us

722

32.4k

81.5k

1.3m