Der neue Monatsrückblick für Mai und Juni 2026 ist online!

[Norwegen60]

Hallo zusammen,

ich habe unter VIS-2 in einem Basic - iFrame ein eChart mit mehreren Wertelinien eingebunden.

Quelle = /echarts/index.html?preset=Climate

Das Chart wird auch korrekt angezeigt mit dem im eChart-Editor definierten Zeitfenster Ende "Jetzt" , Reichweite "2 Tage"
Jetzt habe ich die beiden Datenfelder 0_userdata.0.dashboard.rTimeFrom und rTimeTo als Timestamp. Gibt es eine Möglichkeit, dass ich diesen Zeitbereich irgendwie an eChart übergebe? Sei es auf der eChart-Seite, sei es auf der iFrame-Seite.
Versuch mit

/echarts/index.html?preset=echarts.0.Climate&start={v:0_userdata.0.dashboard.rTimeFrom}&end={v:0_userdata.0.dashboard.rTimeTo}

hatte keinen Einfluss. Auch nicht wenn ich Festwerte genommen habe. Am Binding lags also nicht

Danke und Grüße
Gerd

[fuzzy1955]

@Norwegen60 sagte:

VIS-2 in einem Basic - iFrame ein eChart

Hallo Norwegen60,

ich hatte das gleiche Thema mit 11 übereinanderliegenden Diagrammen in Basic-IFrames auf einer Seite. Mit der Zeitauswahl habe ich lange probiert, bis ich vor Kurzem diese Seite entdeckte: https://mcuiobroker.gitbook.io/jarvis-infos/jarvis-v3/system-effektprog./echartschange
Klappt wunderbar und müsste auch mit "start" und "end" funktionieren! Basic-IFrames habe ich keines mehr sondern das eChart-Widget.

[EDIT] Unter anderen Eigenschaften ist da einstellbar:

range: 1440, (in Minuten)
relativeEnd: now,
start: ,
end: ,
start_time: ,
end_time: ,
timeFormatCustom: false,
timeFormat: 'DD.MM',

Das JavaScript dazu:

// 13.6.2026 / hfurt

const idDiagramm = '0_userdata.0.Diagrammdaten.Diagrammart';
const idRange = '0_userdata.0.Diagrammdaten.Range';
const idTimeformat = '0_userdata.0.Diagrammdaten.Zeitformat';
const idTimeformatCheck = '0_userdata.0.Diagrammdaten.ZeitformatJN';
const strDiagrammPath = 'echarts.0.';

on({id: idDiagramm, change: "any"}, function (obj) {
    let value = obj.state.val;
    if (value!=null &&value!=undefined && value!=''){
        let echartsDP = strDiagrammPath + getState(idDiagramm).val;
        if (existsObject(idDiagramm) &&  echartsDP !=''){
            const eChartobj = getObject(echartsDP);
            const ecRange = String(TimeRange(String(eChartobj.native.data.range)));
            const ecTimeFormat = 'HH.MM dd.mm';
            const ectimeFormatCustom = true;
            setStateAsync(idRange,ecRange,false);
            setStateAsync(idTimeformatCheck,ectimeFormatCustom,false)
            setStateAsync(idTimeformat,ecTimeFormat,false);
            setObject(getState(idDiagramm).val,eChartobj);
            //log('ecRange=' + ecRange + ', echartsDP=' + echartsDP);

        }else{
            log('Angegebener eChart-DP ' + idDiagramm + 'existiert nicht!','warn');
        }
    }
});


on({id: idRange, change: "any"}, function (obj) {
    let value = obj.state.val;
    if (value!=null &&value!=undefined && value!=''){
        let echartsDP = strDiagrammPath + getState(idDiagramm).val;
        if (existsObject(echartsDP)){
            let objDP = getObject(echartsDP);
            log(objDP);
            objDP.native.data.range = TimeRange(value);
            setObject(echartsDP,objDP);
        }else{
            log('eCharts-DP ' + echartsDP + ' ist nicht vorhanden! Eingeben!','warn');
        }
    }
});

function TimeRange (vRange) {
    
    let iVal;

    switch (vRange) {
        case ("1 Tag"): iVal = 1440; break;
        case ("1 Woche"): iVal = 10080; break;
        case ("2 Wochen"): iVal = 20160; break;
        case ("1 Monat"): iVal = 40320; break;
        case ("2 Monate"): iVal = 86400; break;
        case ("3 Monate"): iVal = 129600; break;
        case ("6 Monate"): iVal = 259200; break;
        case ("1 Jahr"): iVal = 518400; break;
        case ("2 Jahre"): iVal = 1036800; break;
        default: iVal = 720; break;
    }

    return Number(iVal);

}

[Norwegen60]

Hallo Fuzzy,
mit etwas probieren habe ich es geschafft, das Chart per range anzupassen. Danke dafür.

• Hast du auch mit start, end und start_time, end_time gearbeitet? Das funktioniert bei mir nicht.
• Ich denke dazu muss ich auch timeType anpassen, und ich habe ihen auf Statisch = static gesetzt
• Unterschied zwischen start und start_time ist das Format. start als String und start_time als Timestamp. Wenn ich Start_Time aber auf 1781914467858 setze, zeigt das Objekt 1781912748321
  
  Hast du eine Idee was ich falsch mache?
• Und noch die Frage. Du schreibst du verwendest das eChart-Widget. Das habe ich aber nur dazu bekommen, eine Linie anzuzeigen und nicht 4 verschiedene Werte. Geht das doch?

[Norwegen60]

Blödsinn. Ich hatte in dem Beispiel das Log noch gar nicht hinter meine Änderung gesetzt. Jetzt passt start_time und start_end. Es funktionierte trotzdem nicht.

Ich habe aber raus gefunden, dass meine Annahme falsch war, dass start in String und start_time in Timestamp funktioniert. Beides sind String. start nur das Datum in yyyy-mm-dd, start_time nur die Uhrzeit in HH:MM.
Mit diesem Script geht es

function formatEChartTime(ts) {
    let d = new Date(Number(ts) || 0);

    return {
        date:
            d.getFullYear() + "-" +
            String(d.getMonth() + 1).padStart(2, "0") + "-" +
            String(d.getDate()).padStart(2, "0"),

        time:
            String(d.getHours()).padStart(2, "0") + ":" +
            String(d.getMinutes()).padStart(2, "0")
    };
}


function SetEChart() {
    let from = formatEChartTime(getState(ID_FROM).val);
    let to   = formatEChartTime(getState(ID_TO).val);

    let echartsDP = 'echarts.0.Climate';

    if (existsObject(echartsDP)) {
        let objDP = getObject(echartsDP);

        objDP.native.data.timeType = 'static';
        objDP.native.data.start = from.date;
        objDP.native.data.start_time = from.time;
        objDP.native.data.end = to.date;
        objDP.native.data.end_time = to.time;

        setObject(echartsDP, objDP);

        log(`SetEChart ${from.date} ${from.time} bis ${to.date} ${to.time}`);
    } else {
        log(`eCharts-DP ${echartsDP} ist nicht vorhanden!`, 'warn');
    }
}
Bliebe noch die Frage, wie du den Chart per eChart-Widget eingebunden hast. Gibt es ein Vorteil gegenüber der Einbindung per iFrame?

[fuzzy1955]

@Norwegen60 sagte:

Bliebe noch die Frage, wie du den Chart per eChart-Widget eingebunden hast. Gibt es ein Vorteil gegenüber der Einbindung per iFrame?

MIr ist das eChart-Widget sympathischer. Da braucht man keinen elendslangen Link wie beim IFrame, sondern man wählt das Preset aus der Box.

Die Sichtbarkeit benutze ich für das Ein/Ausblenden, weil ich 11 übereinanderliegende Diagramme brauche.

4 verschiedene Werte müssten auch funktionieren. Ich habe max. 3.

[Norwegen60]

@fuzzy1955 sagte:

MIr ist das eChart-Widget sympathischer. Da braucht man keinen elendslangen Link wie beim IFrame, sondern man wählt das Preset aus der Box.

Ja, aber ich weiß nicht wie ich dort mehrere Linien auswähle. Eine Linie kann ich in "Allgemein - Objekt mit Geschichte" verlinken, aber du scheinst das über Sichtbarkeit und ein Datenpunkt zu machen, in dem definiert ist, welche Linien angezeigt werden sollen. Wenn ich nur dort mein Datenpunkt eintrage wird nichts angezeigt

[fuzzy1955]

@Norwegen60 sagte:

aber ich weiß nicht wie ich dort mehrere Linien auswähle

[EDIT]
Hast du auch die eCharts v3.1.0? Da geht es über die Datenquellen (Entwurfsansicht). In dem Widget wird dann nur das eCharts -Preset ausgewählt:

So wird es 1:1 in dem VIS2- eCharts-Widget dargestellt:

[Norwegen60]

Vielen Dank, jetzt hab ichs.
Ich wollte es so machen und dachte, dass man da dann irgendwie auch mehrere Linie dazu bekommt.

Aber du hast die Charts im ioBroker-Editor - Diagramme definiert

und dann kannst du die in EChart-Preset auswählen