Test Adapter flexcharts - Stapeldiagramme und mehr

legro

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

@legro Ein Button in der View führt zu einem erneuten Aufruf der HTML-Seite. Kann man das Aktualisieren der View durch eine Änderung der Quelldaten triggern, so dass die HMTL-Seite neu geladen wird?

Hier zeige ich in einem kleinen Video wie sich das Ganze in der Praxis darstellt. Sowohl ein Klick auf den Aktualusierungsbutton (Schaltfläche mit dem Kreis) als auch die Auswahl von Jahr/Monat in den beiden drop/down-Menüs bewirkt die Aktualisierung der Diagramme.

Bei diesem Vorgehen wird jedoch nicht die View, sondern bloß das Diagramm im iFrame neu dargestellt.

Da für @UlliJ das Aktualisieren ja kein Problem ist, möchte ich nur auf Nachfrage mir die Mühe machen, mein Vorgehen im Detail hier zu beschreiben.

jrbwh

@icebear Ok, mit dem Skript erzeugst Du alle 5 Minuten die Diagrammdaten in den States neu. Aber wie wird bewerkstelligt, dass dann auch das Chart aktualisiert wird? Das hab ich noch nicht kapiert.

legro

@ullij

.. Mich stört nur das "flackern" beim neuaufbau, speziell wenn die Aktualisierungsrate hoch ist. ..

In einem anderen Zusammenhang habe ich dieses Problem gelöst: Ich stelle in einer View die Auswahl von Energie in KWh oder Kosten in € zur Verfügung. Über Radio-Buttons schalte ich zwischen diesen zuvor erzeugten Anzeigen um, indem ich die Sichtbarkeit der beteiligten Widgets ändere.

Du könntest also mit zwei iFrames arbeiten: Das Widget, das gerade neu mit Daten gefüllt wird, erzeugst du während es (noch) ausgeblendet ist. Sobald die Aktualisierung abgeschlossen ist, schaltest du die Sichtbarkeit um.

Aber ob sich solch ein Aufwand lohnt?

legro

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

.. Aber wie wird bewerkstelligt, dass dann auch das Chart aktualisiert wird? Das hab ich noch nicht kapiert.

Genau das hatten wir doch vor einiger Zeit in einem Thread diskutiert. Leider finde ich den nicht auf Anhieb.

Hier mein Vorgehen ..

Das verwendete iFrame besitzt ein Feld Updatezeit (ms).

Dieses Feld wird via Binding mit einem Datenpunkt verbunden, in den man die Update-Zeit reinschreibt. Immer wenn dies geschieht, baut sich das iFrame mit dem Diagramm neu auf. Selbstverständlich muss zuvor das (als JSON) bereitgestellte Diagramm im zugrundeliegenden Datenpunkt aktualisiert worden sein.

icebear

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

Aber wie wird bewerkstelligt, dass dann auch das Chart aktualisiert wird? Das hab ich noch nicht kapiert.

Das Chart hab ich in der vis-2 in einem iFrame und da dann ganz normal die Häckchen bei 'Update beim Aufwachen', 'Update beim View Wechsel' und Updatezeit bei 180000.
Sieht dann in der Runtime so aus:

UlliJ

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

Dieses Feld wird via Binding mit einem Datenpunkt verbunden, in den man die Update-Zeit reinschreibt. Immer wenn dies geschieht, baut sich das iFrame mit dem Diagramm neu auf. Selbstverständlich muss zuvor das (als JSON) bereitgestellte Diagramm im zugrundeliegenden Datenpunkt aktualisiert worden sein.

das wird probiert. Die Updatezeit setzt Du vermutlich anschließend wieder auf 0?
Danke.

legro

@ullij sagte in [Test Adapter flexcharts - Stapeldiagramme und mehr](/post/

das wird probiert. Die Updatezeit setzt Du vermutlich anschließend wieder auf 0?
Danke.

Was du da reinschreibst, ist egal. Allein ein (Schreib)Zugriff löst bereits eine Aktualisierung aus.

legro

@ullij

Hier mein Vorgehen en detail ..

Um ein Diagramm aktuell zu halten und es in einem iFrame zu aktualisieren, definiere ich einen MultiTrigger ( -> Array mit Datenpunkten ).

on({id: ['0_userdata.0.A_Trigger_Test.Test1','0_userdata.0.A_Trigger_Test.Test2'], change: 'any'},function(obj) {
    console.log(obj) // ersetzen durch AktualisiereChart()
    setState(''0_userdata.0.A_Trigger_Test.refreshChart',0,true) // Updatezeit des iFrame beschreiben
});

Wenn sich einer der Datenpunkte ändert, wird der Trigger ausgelöst und in der Variable obj findet man alle Eigenschaften des Datenpunktes, der sich geändert hat und der im obigem BeispielCode via console.log ausgeben wird. Anstelle dieser Ausgabe ruft man natürlich die Funktion auf, welche das (als JSON gespeicherte) Chart aktualisiert.
Im letzten Schritt wird auf den Datenpunkt zugegriffen, der (via Binding) die Updatezeit des iFrame-Widgets enthält. Hierdurch wird das Diagramm im iFrame-Widget neu geladen/aktualisiert.

Anm.: In der Variable obj ist das dort (noch) vorhandene Feld newState abgekündigt und sollte daher durch state in den eigenen Anwendungen ersetzt werden. Hier ein Beispiel zur obigen Ausgabe von console.log ..

javascript.0	10:37:17.537	info	
EventObj {
  id: '0_userdata.0.A_Trigger_Test.Test2',
  newState: {
    val: 1,
    ts: 1761817037532,
    ack: false,
    lc: 1761817037532,
    from: 'system.adapter.admin.0',
    q: 0,
    c: undefined,
    user: 'system.user.legro'
  },
  oldState: {
    val: 2,
    ts: 1761816833753,
    ack: false,
    lc: 1761816833753,
    from: 'system.adapter.admin.0',
    q: 0,
    c: undefined,
    user: 'system.user.legro'
  },
  state: {
    val: 1,
    ts: 1761817037532,
    ack: false,
    lc: 1761817037532,
    from: 'system.adapter.admin.0',
    q: 0,
    c: undefined,
    user: 'system.user.legro'
  }
}

UlliJ

@legro
danke für die ausführliche Erklärung, würde ich ggf. hinkriegen

Habe zwischenzeitlich einen anderen Ansatz über eine HTML-Seite mit socketio verfolgt, der mir ganz gut gefällt Hat aber nichts mehr mit flexcharts zu tun, daher OT.

ist beide Male ein iframe-widget. Oben mit flexcharts, unten ohne. Animationszeiten und Aktualisierung gleich eingestellt. Mit Flexcharts verschwindet das Diagramm kurz vollständig, unten nicht.
Muss mal sehen welcher Weg mir da besser gefällt um Grafana zu entsorgen. JS steht in jedem Fall auf der "Arbeitsliste".

MCU

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

HTML-Seite mit socketio

Zeig mal bitte das HTML, mit JS erstellt?

UlliJ

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

Zeig mal bitte das HTML

gehört eigentlich nicht hier in das Thema...
Nein, manuell als Vorlage für die anderen Diagramme (kann kein JS)

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <title>PV Hochbeet Leistung</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    body {
      margin: 0;
      background: rgba(0,0,0,0);
      color: #fff;
      font-family: sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    #chart {
      width: 90vw;
      height: 90vh;
    }
  </style>

  <!-- Lokale ECharts-Dateien -->
  <script src="./echarts.min.js"></script>
  <script src="/lib/js/socket.io.js"></script>
</head>

<body>
  <div id="chart"></div>

  <script>
    // ioBroker States
    const STATE_P1 = '0_userdata.0.4000_EnergieErzeugung.PV.pacPVOst';
    const STATE_P2 = '0_userdata.0.4000_EnergieErzeugung.PV.pacPVInnenhof';
    const STATE_P3 = '0_userdata.0.4000_EnergieErzeugung.PV.pacPVHochbeet';
    const STATE_P4 = '0_userdata.0.4000_EnergieErzeugung.PV.pacPVWest';

    let p1 = 0, p2 = 0, p3 = 0, p4 = 0;

    const socket = io.connect(window.location.origin);
    const chart = echarts.init(document.getElementById('chart'));

    // === Grundkonfiguration aus deiner JSON-Vorlage ===
    const option = {
      "tooltip": { "show": false, "trigger": "item" },
      "textStyle": { "fontFamily": "sans-serif", "fontSize": 14 },
      "legend": {
        "top": "20%",
        "left": "0%",
        "show": true,
        "align": "left",
        "orient": "vertical",
        "textStyle": { "color": "#ffffff", "opacity": 0.5 }
      },
      "series": [
        {
          "name": "PV Leistung",
          "type": "pie",
          "startAngle": 90,
          "padAngle": 3,
		  "animation": true,
	  "animationThreshold": 2000,
      "animationDuration": 500,
	  "animationDelay": 0,
      "animationDurationUpdate": 1500,
      "animationEasing": "cubicInOut",
      "animationEasingUpdate": "cubicInOut",
      "animationTypeUpdate": "transition",
          "radius": ["35%", "55%"],
          "center": ["75%", "40%"],
          "color": ["#406036", "#d387d6", "#c215b0", "#737B1A"],
          "label": {
            "show": false,
            "color": "#ffffff"
          },
          "avoidLabelOverlap": true,
          "itemStyle": {
            "borderRadius": 6,
            "borderColor": "#fff",
            "borderWidth": 0
          },
          "labelLine": { "show": false },
          "data": [
            { "value": 0, "name": "Ost 0 W" },
            { "value": 0, "name": "Haus 0 W" },
            { "value": 0, "name": "Hochbeet 0 W" },
            { "value": 0, "name": "West 0 W" }
          ]
        }
      ]
    };

    chart.setOption(option);

    // === Datenaktualisierung ===
    function updateChart() {
      const newData = [
        { value: p1, name: `Ost ${p1.toFixed(0)} W` },
        { value: p2, name: `Haus ${p2.toFixed(0)} W` },
        { value: p3, name: `Hochbeet ${p3.toFixed(0)} W` },
        { value: p4, name: `West ${p4.toFixed(0)} W` }
      ];

      chart.setOption({
        series: [{
          name: "PV Leistung",
          data: newData
        }]
      });
    }

    // === ioBroker Verbindung ===
    socket.on("connect", () => {
      socket.emit("subscribe", STATE_P1);
      socket.emit("subscribe", STATE_P2);
      socket.emit("subscribe", STATE_P3);
      socket.emit("subscribe", STATE_P4);
    });

    socket.on("stateChange", (id, state) => {
      if (!state || state.val === undefined) return;
      if (id === STATE_P1) p1 = state.val;
      if (id === STATE_P2) p2 = state.val;
      if (id === STATE_P3) p3 = state.val;
      if (id === STATE_P4) p4 = state.val;
      updateChart();
    });

    window.addEventListener("resize", () => chart.resize());
  </script>
</body>
</html>

legro

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

danke für die ausführliche Erklärung, würde ich ggf. hinkriegen
Habe zwischenzeitlich einen anderen Ansatz über eine HTML-Seite mit socketio verfolgt, der mir ganz gut gefällt Hat aber nichts mehr mit flexcharts zu tun, daher OT.

Mache nicht denselben Fehler wie unsereiner. Seit Monaten bin ich damit beschäftigt, mein System zu konsolidieren. So habe ich immer, wenn mir etwas besonders gut gefiel, dies in mein System integriert. Das Ergebnis: Mit der Zeit ging mir zunehmend der Überblick verloren.

Muss mal sehen welcher Weg mir da besser gefällt um Grafana zu entsorgen. JS steht in jedem Fall auf der "Arbeitsliste".

Die Erfahrungen mit InfluxDB und insbesondere Grafana veranlassten mich, die Notbremse zu ziehen. Diese Art von Agrarinformatik kann ich einfach nicht mehr ertragen.

Zwar ist JavaScript diesbezüglich nicht viel besser, aber es lohnt sich allemal sich damit auseinander zu setzen. Damit sind Dinge möglich, die ich in den mir vertrauten Sprachen wohl nie hinbekommen hätte. Nachdem ich jahrelang einfach keinen Zugang zu JavaScript fand, habe ich letztes Jahr alles über Board geworfen, von dem ich überzeugt bin, was eine Programmiersprache an Eigenschaften haben sollte - von da an ging’s rasant voran. Wenn du wie unsereiner von streng typisierten Sprachen kommst, solltest du dich ggf. inTypeScript vertiefen; es wird kolportiert, dass das bloß ein „strengeres“ JavaScript sei.

NEWS

Test Adapter flexcharts - Stapeldiagramme und mehr

Support us

777
Online

32.3k
Users

81.1k
Topics

1.3m
Posts

NEWS

Test Adapter flexcharts - Stapeldiagramme und mehr

Support us

777Online

32.3kUsers

81.1kTopics

1.3mPosts

777
Online

32.3k
Users

81.1k
Topics

1.3m
Posts