Test Adapter flexcharts - Stapeldiagramme und mehr

Maddm

@jrbwh was muss ich denn tun, um die dynamische Funktion zu nutzen (Stichwort "develop" Branch), muss ich dazu eine andere Version installieren? Da verlasse ich leider sicheres Fahrwasser, das habe ich bisher noch nicht gemacht.

jrbwh

@maddm Ich habe die Version (0.4.0) inzwischen released. Sollte jetzt im normalen Repository verfügbar sein. Die Verwendung ist im Readme beschrieben.
Freue mich über Feedback und Verbesserungsvorschläge.

Maddm

@jrbwh
Mit der neuen Version und dem in der readme angegebenen Beispiel habe ich die "dynamische" Darstellung hinbekommen, vielen Dank für die Erweiterung.
Was mich jetzt noch interessiert:
meine Source-Daten (s. hier) beinhalten 5 Arrays:
das Datum, welches ich auf der x-Achse verwende und 4 Datenreihen, die dann einerseits die 4 Linien als auch die 4 Pie-Stücke bilden.
Aber: meine Daten sind PV Daten und ich zeige damit einerseits den Ertrag pro Monat und andererseits wohin der Ertrag gewandert ist (ins Netz, ins Haus oder in die Batterie). Die Linien sind einwandfrei, aber: wie bekomme ich den Pie Chart konfiguriert, so dass die Datenreihe "Gesamt" im Pie Chart nicht vorkommt?

Warum? Weil somit in jedem Chart genau 50% auf den Datenpunkt der Reihe "Gesamt" geht und die anderen 3 als Summe die andere Hälfte bilden, das ist verwirrend - daher würde ich die Gesamt-Datenpunkte aus dem Pie-Chart ausblenden (aber in den Linien beibehalten).

Geht das irgendwie?

jrbwh

@maddm Das ist mir grade auch nicht klar, ob bzw. wie das geht.
Was Du machen könntest: Statt normalem Balkendiagramm ein Stapeldiagramm machen und dabei den Wert "Gesamt" weglassen. Der ergibt sich im Stapeldiagramm ja automatisch aus der Summe der Einzelwerte. Damit macht er im Pie-Chart auch keine Probleme mehr.

iob69

@jrbwh
Hallo,
ich brauche Deinen Adapter in Zukunft wohl öfters und hab auch schon ein paar einfache Charts machen können.
Aber hier komme ich nicht weiter. Die Doku ist so umfangreich und ich weiss nicht, ob ich den richtigen Ansatz verfolge. Du kennst dich offenbar super mit echarts aus, villeicht hast du eine Idee:
Ich möchte einen Chart aufbauen, der mir den 7-Tagesverlauf einer Aktie anzeigt z.B. so:

Dabei möchte ich folgende Darstellung:

Die Börsenkurse sollten hintereinander (ohne grosse Lücke) gereiht werden, da diese ja nur von 9-17:30 gehandelt werden.
Jedes Datum z.B. "9.7." soll jeweils nur einmal in der X-Achse vorkommen, die Tage getrennt mit einem dünnen vertikalen Strich, das Datum wenn möglich in der Mitte.

Bisher hab ich das hingekriegt:

mit folgendem Code:

           a = {
                "animation": false,
                "radius": '100%', // self  
                "grid": {
                    "left": '43',
                    "right": '5%',
                    "top": 55,
                    "bottom": 20
                },  
                "tooltip": {
                    "trigger": 'axis',
                    "axisPointer": {
                        type: 'cross',
                        "label": {
                        "backgroundColor": '#6a7985'
                        }
                    }
                },
                "legend": {
                    "top": 3,
                    "data": [title],
                    "padding": [ 30, 0, 0,  0 ] // up right down left
                },
                "xAxis": {
                    "type": 'category',
                    "data": times,
                },
                "yAxis": {
                    "type": 'value',
                    "min" : min,
                    "max" : max,
                    "offset" : 0
                },
                "series": [
                    {
                        "name": title,
                        "data": values,
                        "type": 'line',
                        "lineStyle": {
                            "width": 3
                        },
                        "color": firstVal > lastVal?'red':'ForestGreen'
                    }
                ]
            };

Das Problem: ich musste "type" der x-Achse als "category" definieren, damit es mir die Daten zusammen schiebt.
Mittlerweile zeigt er mir auch die Daten so an, wenn ich "time" einstelle:?

Hättest du mir einen Ansatz wie ich das anstellen könnte?

jrbwh

@iob69 Das scheint nicht so einfach zu sein. Auf die Schnelle fällt mir nur eine Quick-and-dirty-Lösung ein:
X-Achse als Kategorienachse, für jeden Tag so viele X-Werte wie es Daten gibt. Die sind alle leer, außer einem Wert in der Mitte, der das Datum enthält. Also im Prinzip so:

option = {
  legend: {},
  tooltip: {},
xAxis: {
    data: ['', '', '08.07.', '', '',
           '', '', '09.07.', '', ''
          ],
    type: 'category',
},
yAxis: {
  type: 'value'
},
series: [{
  type: 'line',
    data: [23,  24,  25,  26, 27,   // 08.07.
           29,  24,  23,  22, 24    // 09.07.
    ]
  }]
};

Problem dürften die x-Achsen-Ticks und die Grid-Lines sein.

Als Vorlage könnte auch dieses Beispiel dienen. Da muss man sich aber etwas ausführlicher mit beschäftigen. Spontan habe ich die Datenstruktur nicht kapiert.
Wenn ich Zeit habe, denke ich nochmal drüber nach.

iob69

@jrbwh
Vielen Dank für die Antwort. Ich werde das mal versuchen.
Eigentlich wollte ich da nicht so "basteln" , denn ich wollte den selben Chart für verschiedene Zeitbereiche nutzen, da müsste ich jeden einzelnen so hinmurksen. Aber solche Bespiele geben immer super Input!

Weisst du wie ich funktionen einbauen kann?
Ich hab das mal so wie im ECharts-Beispiel "Confidence Band" versucht:

        "axisLabel": {
          "formatter": function (value, idx) {
            var date = new Date(value);
            return idx === 0
              ? value
              : [date.getMonth() + 1, date.getDate()].join('-');
          }
        },

Aber das scheint keine Funktion zu haben, auch eine vereinfachte Funktion mit:

return value/1000;

hat nichts bewirkt.

jrbwh

@iob69

Weisst du wie ich funktionen einbauen kann?

Schau mal ins Readme, da ist das beschrieben.

jrbwh

Apache hat die Version 6.0.0 von ECharts veröffentlicht, hier sind die Neuerungen im Detail beschrieben. Das Standard-Thema, also das visuelle Erscheinungsbild, wurde deutlich verändert, es gibt einige neue Funktionen und Diagrammtypen und man kann nun dynamisch zwischen hellem und dunklem Design umschalten, getriggert durch die Systemeinstellung.

Ich habe Flexcharts entsprechend erweitert:

mit &themev5 kann man dafür sorgen, dass das alte Erscheinungsbild (Version 5) bestehen bleibt
mit &darkmode=auto aktiviert man die erwähnte dynamische Umschaltung
es ist jetzt möglich, eigene Themen zu definieren und an Flexcharts zu übergeben
zusätzliche Funktionsdefinitionen können nun in unbegrenzter Anzahl übergeben werden

Gerne mal ausprobieren, vor allem auch die Abwärtskompatibilität. Es sollte alles funktionieren wie bisher. Evtl. sehen die Chart visuell anders aus, dann sollte &themev5 das alte Erscheinungsbild zurück bringen. Die Version ist im Beta-Repo verfügbar.

Im Readme sind die neuen Möglichkeiten beschrieben. Auch ein einfaches Beispiel wie man die Themen nutzen kann, ist enthalten.

Freue mich auf euer Feedback.

Viele Grüße
Jürgen

legro

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

Ich habe Flexcharts entsprechend erweitert:

mit &themev5 kann man dafür sorgen, dass das alte Erscheinungsbild (Version 5) bestehen bleibt ..

VORSICHT: Das funktioniert wohl nur, wenn man nicht den Parameter ..&darkmode.. im HTTP-Aufruf verwendet.

jrbwh

@legro Stimmt.

Das liegt daran, dass Apache ECharts für den light Mode das Thema "default" und für den den dark Mode das Thema "dark" verwendet. Für das "default" Thema stellt Apache ein Thema "v5" bereit, das mit dem Flexchart-Parameter "themev5" aktiviert wird, aber nur das Thema "default" ersetzt. Schaltet man auf den dark Mode um, ist der Parameter wirkungslos.

Ich habe ein Issue bei ECharts erstellt, mit der Bitte, ein entsprechendes Thema "v5dark" bereitzustellen.

Workaround:
Neben der Farbgestaltung ist vor allem die Legende betroffen, die unten statt oben dargestellt wird. Wenn man das ändern möchte, kann man entsprechende Definitionen in die Chart-Definition aufnehmen oder das Thema "dark" modifizieren. Wie Definition und Übergabe eigener Themen funktioniert, ist in der Readme beschrieben.

legro

@jrbwh in Test Adapter flexcharts - Stapeldiagramme und mehr:

Ich habe ein Issue bei ECharts erstellt, mit der Bitte, ein entsprechendes Thema "v5dark" bereitzustellen.

Da bin aber mal gespannt, ob die sich rühren.

Angesichts der vielen Diagramme, die ich im Laufe der Zeit erstellt habe, wäre das eine schöne Sache. Wenn ich daran denke, alle Diagramme überarbeiten zu müssen, vergeht mir der Spaß. Nach meinen ersten Erfahrungen ändert sich nicht nur die Position der Legende, auch andere Dinge sind betroffen. So fehlen die ‚Ticks‘ auf der x-Achse, die Schriftgrößen - obwohl im Chart explizit definiert - werden größer dargestellt, ..

Merlin123

Danke für das Update und die Infos...
Bin wohl mit nem blauen Auge davon gekommen... Musste teilweise die Größe etwas anpassen, sonst scheint es zu passen.....

jrbwh

@merlin123 @legro Danke für eure Rückmeldungen. Bei Apache ECharts gibt es knapp 1.800 offene Issues - das kann also ein wenig dauern, bis ein v5 Dark-Thema bereitgestellt wird. Ich habe deshalb selbst eins gebastelt, basierend auf dem Dark-Thema von ECharts V5.6.0. Mit dem Parameter &themev5 werden also Light- und Dark-Thema umgeschaltet.

Würdet ihr das bitte ausprobieren und eure Eindrücke und ggf. festgestellte Abweichungen hier zurück melden? Die Version liegt wieder im Branch develop: https://github.com/MyHomeMyData/ioBroker.flexcharts/tree/develop

Zurück zu Flexcharts 0.5.0 geht es bei Bedarf am besten durch komplette Deinstallation des Adapters und Neuinstallation aus dem Stable-Repository.

~~STOPP: Irgendwas ist beim letzten Push nach Github schief gegangen. Bitte noch warten, muss das zuerst klären!~~

OK: Branch develop auf Github ist bereinigt und kann genutzt werden.

Merlin123

@jrbwh Da komm ich leider nicht zeitnah dazu....

legro

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

.. Bei Apache ECharts gibt es knapp 1.800 offene Issues - das kann also ein wenig..

Wenn ich an meine Erfahrungen in Sachen InfluxDB und Grafana denke, habe ich wenig Hoffnung, dass zu meinen Lebzeiten sich etwas tut. Über die Jahre gesehen hat sich hier nur vieles verschlechtert: Ankündigung von Flux und Abkündigung InfluxQL. Nun heißt‘s Abkündigung von Flux zurück zu InfluxQL; also rein in die Kartoffeln, raus aus den Kartoffeln. Die verwirrenden Konfigurationen in Grafana kommen mir vor wir Kraut und Rüben. Von derartiger Agrarinformatik habe ich die Nase voll.

Dank deiner großartigen Arbeit (FlexCharts-Adapter) konnte ich in kürzester Zeit all das realisieren, was mir bei Grafana über Jahre mehr schlecht als recht gelungen ist.

Ich habe deshalb selbst eins gebastelt, basierend auf dem Dark-Thema von ECharts V5.6.0. Mit dem Parameter &themev5 werden also Light- und Dark-Thema umgeschaltet.

Super!

Würdet ihr das bitte ausprobieren und eure Eindrücke und ggf. festgestellte Abweichungen hier zurück melden?

Das werde ich sehr gerne tun. Ich denke, dass ich diese Woche die nötige Ruhe und Zeit finde. Schon jetzt: Vielen Dank für deine Arbeit.

UlliJ

@jrbwh

kann mir (JS ist ein Buch mit 7 Siegeln für mich) erklären, wie die automatische Aktualisierung von Diagrammen umgesetzt werden kann...

Was ich habe:
Script mit Definition eines Diagramms

var strify = require('javascript-stringify');

onMessage('chartCOP', (httpParams, callback) => {
   const myJsonParams  = (httpParams.myjsonparams ? JSON.parse(httpParams.myjsonparams) : {} );
   console.log(`httpParams = ${JSON.stringify(httpParams)}`);
   console.log(`myJsonParams = ${JSON.stringify(myJsonParams)}`);
   chartCOP(result => callback(result));
});
   
function chartCOP(callback) {
   const numVLact=getState("alias.0.1000_Heizung.WP.VLTemperatur").val;
   const numATact=getState("alias.0.1000_Heizung.Klima.AussenTemperatur").val;
   const numCOPact=getState("0_userdata.0.1000_Heizung.WP.COP").val;
   const VLmin=30;
   const VLmax=65;
   const ATmin=-10;
   const ATmax=20;
   const option = {
 "tooltip": {
   "show": false,
   "formatter": function (param) {
     return (
       "AT: " + param.value[0].toFixed(1) + "°C<br>" +
       "VL: " + param.value[1].toFixed(1) + "°C<br>" +
       "COP: " + param.value[2].toFixed(2)
     );
   }
 },
 "visualMap": {
   "show": false,
   "dimension": 2,
   "seriesIndex": 0,
   "min": 1,
   "max": 6,
   "inRange": {
     "color": [
       "rgba(139, 0, 0, 0.9)",    // Dunkelrot – niedriger COP
       "rgba(255, 69, 0, 0.85)",  // Orange-Rot
       "rgba(255, 205, 0, 0.8)",  // Gelb
       "rgba(0, 255, 127, 0.75)", // Hellgrün
       "rgba(64, 224, 208, 0.75)", // Türkis / Mittelblau
       "rgba(30, 144, 255, 0.8)",  // Kräftiges Blau
       "rgba(0, 0, 200, 0.85)"     // Tiefblau – hoher COP
     ]
   },
   "text": ["COP hoch", "COP niedrig"],
   "calculable": true
 },
 "xAxis3D": { "type": "value", "name": "AT (°C)", "min": ATmin, "max": ATmax, "interval": 5 },
 "yAxis3D": { "type": "value", "name": "VL (°C)", "min": VLmin, "max": VLmax, "interval": 5 },
 "zAxis3D": { "type": "value", "name": "COP", "min": 0, "max": 8, "interval": 1 },
 "grid3D": {
   "boxWidth": 100,
   "boxDepth": 60,
   "boxHeight": 45,
   "environment": "auto",
   "viewControl": {
     "alpha": 30,
     "beta": 225,
     "distance": 150,
     "minBeta": -360,
     "maxBeta": 360,
     "autoRotate": false,
     "center": [
       0,
       -12,
       0
     ]
   },
   "light": {
     "main": {
       "intensity": 1.4,
       "shadow": true,
       "alpha": 30,
       "beta": 120
     },
     "ambient": {
       "intensity": 0.5
     }
   }
 },
 "series": [
   {
     "type": "surface",
     "name": "statisches COP Netz",
     "wireframe": { "show": false },
     "shading": "realistic",
     "itemStyle": {
       "color": "rgba(0,150,255,0.4)",
       "opacity": 0.8
     },
     "realisticMaterial": {
       "roughness": 0.1,
       "metalness": 0
     },
     "data": (function() {
       const data = [];
       for (let AT = ATmin; AT <= ATmax; AT += 1) {
         for (let VL = VLmin; VL <= VLmax; VL += 1) {
           const COP = 6.65 - 3.8 * Math.exp(-0.165 * (AT + 10)) +
                       0.00015 * VL * VL - 0.035 * VL;
           if (COP > 1) {
               data.push([AT, VL, COP]);
           }
         }
       }
       return data;
     })()
   },
   {
     "type": "line3D",
     "name": "VL = aktuelle Temperatur",
     "lineStyle": { "width": 3, "color": "rgba(255,69,0,0.9)" },
     "data": (function() {
       const arrLine1 = [];
       let VL = numVLact;
       for (let AT = ATmin; AT <= ATmax; AT += 1) {
           const COP = 6.65 - 3.8 * Math.exp(-0.165 * (AT + 10)) +
                     0.00015 * VL * VL - 0.035 * VL;
           arrLine1.push([AT, VL, COP]);
       }
       return arrLine1;
     })()
   },
   {
     "type": "line3D",
     "name": "AT = aktuelle Temperatur",
     "lineStyle": { "width": 3, "color": "rgba(255,69,0,0.9)" },
     "data": (function() {
       const arrLine2 = [];
       for (let VL = VLmin; VL <= VLmax; VL += 1) {
         const COP = 6.65 - 3.8 * Math.exp(-0.165 * (numATact + 10)) +
                     0.00015 * VL * VL - 0.035 * VL;
         arrLine2.push([numATact, VL, COP]);
       }
       return arrLine2;
     })()
   },
   {
       type: "line3D",
       name: "COP = 4.3 Kontur",
       lineStyle: { color: "rgba(139, 0, 0, 0.7)", width: 2 },
       data: (function () {
       const arrcop = [];
       for (let AT = ATmin; AT <= ATmax; AT += 0.05) {
           for (let VL = VLmin; VL <= VLmax; VL += 0.05) {
           const cop = 6.65 - 3.8 * Math.exp(-0.165 * (AT + 10))
                  + 0.00015 * VL * VL - 0.035 * VL;
           if (Math.abs(cop - 4.3) < 0.05) {  
         arrcop.push([AT, VL, cop]);
           }
       }
       }
       return arrcop;
   })()
   },
   {
     "type": "scatter3D",
     "name": "real",
     //"symbol": "pin",
     "visualMap": false,
     "symbolSize": 20,
     "animation": true,
     "animationDuration": 800,
     "animationEasing": "cubicOut",
     "itemStyle": { "color": "rgba(0, 0, 200, 0.95)" },
     "data": (function() {
       return [[numATact, numVLact, numCOPact]];
     })()
   },
   {
       "type": "scatter3D",
       "name": "Projektion CHA",
       "symbolSize": 6,
       "visualMap": false,
       "itemStyle": { "color": "rgba(0, 0, 200, 0.95)" },
       "data": [
       [ATmax, VLmax, numCOPact]
       ]
   },
   {
     "type": "scatter3D",
     "name": "Betriebspunkt",
     //"symbol": "pin",
     "visualMap": false,
     "symbolSize": 10,
     "animation": true,
     "animationDuration": 800,
     "animationEasing": "cubicOut",
     "itemStyle": { "color": "rgba(255,69,0,0.9)" },
     "data": (function() {
       const COPaktuell = 6.65 - 3.8 * Math.exp(-0.165 * (numATact + 10)) +
                          0.00015 * numVLact * numVLact - 0.035 * numVLact;
       return [[numATact, numVLact, COPaktuell]];
     })()
   },
   {
       "type": "scatter3D",
       "name": "Projektion auf AT-Ebene",
       "symbolSize": 6,
       "visualMap": false,
       "itemStyle": { "color": "rgba(255,69,0,0.9)" },
       "data": [
           [ATmin, numVLact, 0]
       ]
   },
   {
       "type": "scatter3D",
       "name": "Projektion auf VL-Ebene",
       "symbolSize": 6,
       "visualMap": false,
       "itemStyle": { "color": "rgba(255,69,0,0.9)" },
       "data": [
       [ATmax, VLmax, (6.65 - 3.8 * Math.exp(-0.165 * (numATact + 10)) +
                          0.00015 * numVLact * numVLact - 0.035 * numVLact)]
       ]
   },
   {
       "type": "scatter3D",
       "name": "Projektion auf COP-Basis",
       "symbolSize": 6,
       "visualMap": false,
       "itemStyle": { "color": "rgba(255,69,0,0.9)" },
       "data": [
           [numATact, VLmax, 0]
       ]
   }
 ]
};

   callback(strify.stringify(option));
};

Anzeige im Browser funktioniert

Aktualisiert werden die Daten bei einem refresh im Browser. Ich hätte das aber gerne bei Änderung der relevanten Datenpunkte ohne refresh... und das will nicht!
Wie muss ich die Trigger im Spoiler an den Adapter übergeben?

//Trigger für update des Charts
on({id: [
 "alias.0.1000_Heizung.WP.VLTemperatur",
 "alias.0.1000_Heizung.Klima.AussenTemperatur",
 "0_userdata.0.1000_Heizung.WP.COP"
], change: "any"}, function (obj) {
   const numVLact = getState("alias.0.1000_Heizung.WP.VLTemperatur").val;
   const numATact = getState("alias.0.1000_Heizung.Klima.AussenTemperatur").val;
   const numCOPact = getState("0_userdata.0.1000_Heizung.WP.COP").val;

   const update = {
       series: [
           { name: "real", data: [[numATact, numVLact, numCOPact]] }/*,
           { name: "Projektion auf AT-Ebene", data: [[numATact, 20, numCOPact]] },
           { name: "Projektion auf VL-Ebene", data: [[numATact, numVLact, 0]] }*/
       ]
   };
   sendTo("flexcharts.0", "setOption", {
       id: "chartCOP",                  // Chart-ID im Frontend
       option: update,                  // Update-Objekt
       notMerge: false,
       lazyUpdate: false,
       transition: { duration: 800 }
   });
})

Vorab schon mal danke für die Hilfe

jrbwh

@ullij Ich kann Deinen Wunsch gut verstehen und der Ansatz über sendTo() ist im Prinzip genau richtig, aber leider mit dem aktuellen Konzept nicht umsetzbar.

Flexcharts arbeitet als Web-Extension des Web-Adapters und hat gar keine eigene permanente Laufzeit-Routine. Der Flexcharts-Code wird vom Web-Adapter aufgerufen, liefert eine HTML-Seite zurück und beendet sich wieder. Der einzige Entry-Point ist also der HTML-Aufruf im Browser. Der Parameter refresh bewirkt, dass der Browser die Abfrage regelmäßig wiederholt.

Ich sehe im Moment keine Möglichkeit, im Rahmen dieses Konzepts einen externen Trigger zu realisieren.

Vielleicht hat jemand im Forum ein Idee?

UlliJ

@jrbwh
danke Dir für die Antwort...
Dennoch ein tolles feature für iobroker

legro

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

Vielleicht hat jemand im Forum ein Idee?

Irgendwie kommt mir diese Diskussion bekannt vor. Wenn ich mich recht entsinne, ging es damals darum, wie man ein in einer View integriertes Diagramm aktualisieren kann.

Die damals entwickelte Technik könnte ja ggf. auch hier greifen: Ein Klick auf einen Button in der View sorgt dafür, dass das Diagramm - inklusive einer Abfrage der Datenquellen - neu aufgebaut und dargestellt wird. So kann etwa auch mittels schedule für eine regelmäßiges Aktualisieren gesorgt werden, oder man setzt Trigger auf die sich ändernden Datenpunkte.

NEWS

Test Adapter flexcharts - Stapeldiagramme und mehr

Support us

626
Online

32.3k
Users

81.1k
Topics

1.3m
Posts

NEWS

Test Adapter flexcharts - Stapeldiagramme und mehr

Support us

626Online

32.3kUsers

81.1kTopics

1.3mPosts

626
Online

32.3k
Users

81.1k
Topics

1.3m
Posts