Neues YouTube-Video: Visualisierung im Devices-Adapter

[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);

}