UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?

[Familienvater]

@homoran

OK, ich habe es geschafft, das aus dem nicht-Stable zu Installieren, und auch aus dem großen Hilfe-Thread mit Beispiel-Daten was zu erzeugen (was mir mit der Anleitung anleine nicht gelungen ist).
Erstmal Danke an alle, dann wird mir heute sicherlich nicht mehr langweilig.

Danke,
Christian

[Homoran]

@familienvater sagte in Diagramm mit festen Werten in VIS - nur wie?:

dann wird mir heute sicherlich nicht mehr langweilig.

Dann mal viel Spaß!

und zeig uns dein Ergebnis

[Familienvater]

Moin,

also mit dem JSON-Chart habe ich es nicht hinbekommen, aber mit dem Bar Chart hat es geklappt, und es ist ausreichend "hübsch":

Zu meinem Code und als Entschuldigung: JavaScript ist nicht so meins :-), Kommentare sind immerhin überhaupt welche drin. Und die createChartData - Funktion ist das, was ich vergeblich für das JSON-Chart versucht hatte, vielleicht schleift das noch jemand rund...

JavaScript-Code

var myName = "tibber.createchartdata";

var logOn           = false;     // Skript Logausgabe ein- (true) / ausschalten (false). Fehler werden immer ausgegeben.
var forceCreation    = false;    // Default: false. true: Datenpunkte werden überschrieben (wenn z.B. Bezeichnungen geändert wurden)

var tibberPricesToday = "tibber.0.priceInfo.today.";        // mit . am Ende!
var tibberPricesTomorrow = "tibber.0.priceInfo.tomorrow.";  // mit . am Ende!

var tibberStartsAt = "startsAt";
var tibberTotal = "total";


// Datenpunkte anlegen:
// -----------------------------------------------------------------------------
var idChartData = "tibber.prices.chartData";                      // Pfad und Name, unter dem in der Javascript-Instanz der Datenpunkte angelegt wird
createState(idChartData, '[{"label":"15","value":"25.2","dataColor":"#ffffff"},{"label":"16","value":"28.8","dataColor":"#ffffff"},{"label":"17","value":3"5.2","dataColor":"#ffffff"},{"label":"18","value":"33.2","dataColor":"#ffffff"},{"label":"19","value":"20.2","dataColor":"#ffffff"}]', forceCreation, {
     name: 'Chart-Data Price Forecast',
     desc: 'Chart-Data Price Forecast',
     type: 'string',
     role: 'value'
});

// Datenpunkte anlegen:
// -----------------------------------------------------------------------------
var idBarChartData = "tibber.prices.barChartData";                      // Pfad und Name, unter dem in der Javascript-Instanz der Datenpunkte angelegt wird
createState(idBarChartData, '[{"label":"15","value":"25.2","dataColor":"#ffffff"},{"label":"16","value":"28.8","dataColor":"#ffffff"},{"label":"17","value":3"5.2","dataColor":"#ffffff"},{"label":"18","value":"33.2","dataColor":"#ffffff"},{"label":"19","value":"20.2","dataColor":"#ffffff"}]', forceCreation, {
     name: 'Bar Chart-Data Price Forecast',
     desc: 'Bar Chart-Data Price Forecast',
     type: 'string',
     role: 'value'
});

createBarChartData();

// Cron-Job, zum Stundenwechsel
// Stundenwechsel, Ausführen immer um *:00:10
schedule('10 0 * * * *', function () {createBarChartData()});

function createBarChartData () {    
	if(logOn) console.log(myName + " Stundenwechsel");
    
    let barChart = [];

    var jetzt = new Date(Date.now());
    var aktStunde = jetzt.getHours();
    var unixTimestamp=new Date().getTime();

    // bis zu 18 Stunden in die Zukunft
    const offsets=[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13, 14, 15, 16, 17, 18];

    for (let offset of offsets)
    {
        // Template Objekt für BarChart erzeugen
        let itemData ={label:"", value:0.0, dataColor: "#c2c2c2", valueColor: "#dddddd"}; //, valueAppendix: "", valueColor: #ffffff"

        // Vorbereitung um Werte aus Tibber Adapter zu holen         
        var prefix="";
        aktStunde=jetzt.getHours()+offset;
        if (aktStunde>23)
        {
            aktStunde=aktStunde-24;
            prefix=tibberPricesTomorrow;
        }
        else
        {
            prefix=tibberPricesToday;
        }

        var strStunde = ("0" + aktStunde.toString()).slice(-2);
        itemData['label']=strStunde;

        prefix=prefix+strStunde+'.';

        var aktPrice=getState(prefix+tibberTotal).val;
 
        // falls keine Daten vorliegen, weiter ohne diese ItemData an das Chart-Objekt anzuhängen
        if (aktPrice==null && aktStunde>=0)
            continue;

        // von 0.2345 € auf Cent mit einer Nachkomma-Stelle umrechnen
        itemData['value']=Math.round(aktPrice*1000)/10.0;

        // Je nach Preis den Balken einfärben
        if (aktPrice<0.30)
            itemData['dataColor']="green";
        else
        if (aktPrice<0.40)
            itemData['dataColor']="yellow";
        else
        if (aktPrice<0.50)
            itemData['dataColor']="orange";
        else
        if (aktPrice<0.60)
            itemData['dataColor']="red";
        else
            itemData['dataColor']="magenta";

        // Daten für diese Stunde dem Objekt zufügen
        barChart.push(itemData);
    }

    // fertiges Objekt in den Datenpunkt als JSON schreiben
    setState("javascript."+instance+"."+idBarChartData, JSON.stringify(barChart), true);

};

function createChartData () {    
	if(logOn) console.log(myName + " Stundenwechsel");
    
    let chart = {};
    let axisLabels =[];
    let values =[];
    let datalabels =[];

    var jetzt = new Date(Date.now());
    var aktStunde = jetzt.getHours();
    var unixTimestamp=new Date().getTime();

    const offsets=[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13, 14, 15, 16, 17, 18];

    // Spaltenbeschriftungen
 
    //chart.graphs[0].axisLables=axisLabels;
    chart.graphs=new Array();
    chart.graphs.push({});
    chart.graphs[0].color="green";
    chart.graphs[0].type="bar";
    chart.graphs[0].datalabel_rotation=-90;
    chart.graphs[0].datalabel_color="lightgreen";
    chart.graphs[0].datalabel_fontSize=10;
    chart.graphs[0].yAxis_title_text="cent";
    chart.graphs[0].yAxis_show=true;
    chart.graphs[0].legendText="Uhrzeit";
    chart.graphs[0].datalabel_show=true;
    chart.graphs[0].yAxis_minimumDigits=1;
    chart.graphs[0].yAxis_maximumDigits=1;

    for (let offset of offsets)
    {
        // Spaltenbeschriftungen
        aktStunde=jetzt.getHours()+offset;
        if (aktStunde>23)
            aktStunde=aktStunde-24;
        var strStunde = ("0" + aktStunde.toString()).slice(-2);
        axisLabels.push(strStunde)
        //axisLabels.push(aktStunde);
               
        var prefix="";
        aktStunde=jetzt.getHours()+offset;
        if (aktStunde>23)
        {
            aktStunde=aktStunde-24;
            prefix=tibberPricesTomorrow+".";
        }
        else
        {
            prefix=tibberPricesToday+".";
        }

        strStunde = ("0" + aktStunde.toString()).slice(-2);
        prefix=prefix+strStunde+'.';

        //if(logOn) console.log(myName + " Stundenwechsel, akt Stunde "+strStunde+", prefix "+prefix);
        var aktPrice=getState(prefix+tibberTotal).val;
        //var aktStartAt=getState(prefix+tibberStartsAt).val;
        //if(logOn) console.log(myName + " aktPrice "+aktPrice+", aktStartAt "+aktStartAt);
        //let itemData ={t:0, y:0.0};
        //itemData['t']=unixTimestamp+3600*offset;
        //itemData['y']=aktPrice;
        values.push(Math.round(aktPrice*1000)/10.0);
        var cents=(Math.round(aktPrice*1000)/10.0).toString();
        datalabels.push(cents);

    }
    chart.graphs[0].data=values;
    chart.graphs[0].datalabel_override=datalabels;
    chart.data=values;
    chart.datalabel_override=datalabels;
    chart.axisLables=axisLabels;

    setState("javascript."+instance+"."+idChartData, JSON.stringify(chart));

};

Christian

Und hier noch das exportierte Widget

Widget

[{"tpl":"tplVis-materialdesign-Chart-Bar","data":{"oid":"javascript.0.tibber.prices.barChartData","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","chartDataMethod":"jsonStringObject","dataCount":"0","chartType":"vertical","backgroundColor":"#mdwTheme:vis-materialdesign.0.colors.charts.background","chartAreaBackgroundColor":"#mdwTheme:vis-materialdesign.0.colors.charts.background_chart","titleLayout":"#mdwTheme:vis-materialdesign.0.fontSizes.card.title","titleFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.card.title","colorBackground":"#mdwTheme:vis-materialdesign.0.colors.card.background","colorTitleSectionBackground":"#mdwTheme:vis-materialdesign.0.colors.card.background_title","colorTextSectionBackground":"#mdwTheme:vis-materialdesign.0.colors.card.background_body","colorTitle":"#mdwTheme:vis-materialdesign.0.colors.card.title","globalColor":"#mdwTheme:vis-materialdesign.0.colors.charts.global","hoverColor":"#mdwTheme:vis-materialdesign.0.colors.charts.bar.hover","hoverBorderColor":"#mdwTheme:vis-materialdesign.0.colors.charts.bar.hover_border","showValues":"showValuesOn","valuesFontColor":"#mdwTheme:vis-materialdesign.0.colors.charts.value","valuesFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.value","valuesFontSize":"10","valuesPositionAnchor":"end","valuesPositionAlign":"top","valuesTextAlign":"center","yAxisPosition":"left","yAxisTitleColor":"#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_title","yAxisTitleFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.y_axis_title","yAxisTitleFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.y_axis_title","yAxisValueLabelColor":"#dddddd","yAxisValueFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.y_axis_values","yAxisValueFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.y_axis_values","yAxisValueDistanceToAxis":"10","yAxisShowAxis":"true","yAxisShowAxisLabels":"true","yAxisShowGridLines":"true","yAxisGridLinesColor":"#ffffff","yAxisShowTicks":"true","yAxisZeroLineColor":"#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_zeroline","xAxisPosition":"bottom","xAxisTicksSource":"auto","xAxisTitleColor":"#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_title","xAxisTitleFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.x_axis_title","xAxisTitleFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.x_axis_title","xAxisValueLabelColor":"#dddddd","xAxisValueFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.x_axis_values","xAxisValueFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.x_axis_values","xAxisValueDistanceToAxis":"0","xAxisShowAxis":"true","xAxisShowAxisLabels":"true","xAxisShowGridLines":"true","xAxisGridLinesColor":"#ffffff","xAxisShowTicks":"true","xAxisZeroLineColor":"#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_zeroline","xAxisMinRotation":"0","xAxisMaxRotation":"0","legendPosition":"right","legendFontColor":"#mdwTheme:vis-materialdesign.0.colors.charts.legend","legendFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.legend","legendFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.legend","legendPointStyle":"true","showTooltip":"true","tooltipBackgroundColor":"#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_background","tooltipShowColorBox":"true","tooltipTitleFontColor":"#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_title","tooltipTitleFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.tooltip_title","tooltipTitleFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.tooltip_title","tooltipBodyFontColor":"#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_text","tooltipBodyFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.tooltip_text","tooltipBodyFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.tooltip_text","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"chartPaddingBottom":"1","cardUse":false,"xAxisTitle":"","showLegend":false,"axisValueAppendText":"","axisLabelAutoSkip":false,"g_layoutForData_§0":false,"g_oids":false,"barWidth":"","valuesRotation":"-90","valuesPositionOffset":"","valuesMaxDecimals":"1","valuesMinDecimals":"1"},"style":{"left":"420px","top":"248px","width":"410px","height":"213px"},"widgetSet":"materialdesign"}]

[liv-in-sky]

@familienvater schaut doch gut aus !

[Homoran]

@liv-in-sky sagte in Diagramm mit festen Werten in VIS - nur wie?:

@familienvater schaut doch gut aus !

und ist auch ausreichend bunt

@Familienvater
:+1:

[Michaelnorge]

@familienvater Mensch wie geil!!!!
Leider kann ich null Javascript und hab keine Ahnung, wie ich das hier bei mir einbinden kann!!

Aber toll gemacht!!!

[Familienvater]

@michaelnorge
Hi,

OK, etwas mehr Ahnung von JavaScript habe ich dann vielleicht schon, aber die Profis mögen mich/Dich etwas in die richtige Richtung schubsen:
Einfach den JavaScript-Adapter installieren, dann bekommt man links ein neues "Icon" für JS Skripte, da erstellt man über das "+" ein neues JS-Script, und da kopiert man den Script-Code rein, kontrolliert ggf. noch mal die Datenpunkte die am Anfang definiert sind, speichert das ganze, und startet dann das Script.
Solange Du nur eine Tibber-Instanz hast, und die auf der "0" läuft, sollte eigentlich auch alles passen, und beim ersten Start wird in der Javascript.0-Instanz ein Ordner tibber und darin prices erstellt, und darin liegt dann der barChartData - Datenpunkt, und der wird für das Bar Chart als Datenquelle benutzt.
Aber mal ganz ehrlich: Was macht man mit ioBroker ohne Blockly/JavaScript, gerade wenn Du VIS nutzt?
Vielleicht kann man das Bar Chart sogar "hart" an die Datenpunkte vom Tibber-Adapter hängen, dann fehlt aber das in "1, 2, 3 usw. Stunden", da geht höchstens um 0 Uhr Heute ist immer der erste Balken, 1 Uhr immer der 2. usw.

Und zumindest, wenn man "Irgendwie" öfters, mit egal welcher Programmiersprache zu tun hat, der Einstieg in einfaches JavaScript + ioBroker ist gar nicht so schwer, aber man kann damit das Home wirklich "smarter" machen.

Christian

[Michaelnorge]

@familienvater Kleines Missverständnis: Ich nutze Blockly, ausschließlich Blockly. Seit Jahren! Aber vom eigentlichen Scripten verstehe ich nichts ;-)

Ich schau mir Deinen Script mal näher an, sobald es die Zeit zulässt.

Super Arbeit!

[theGrinch]

Script für den neueren tibberconnect Adapter angepasst:

Einfach das "home" reinkopieren in Zeile 6+7.

Spoiler

var myName = "tibber.createchartdata";
 
var logOn           = false;     // Skript Logausgabe ein- (true) / ausschalten (false). Fehler werden immer ausgegeben.
var forceCreation    = false;    // Default: false. true: Datenpunkte werden überschrieben (wenn z.B. Bezeichnungen geändert wurden)
 
var tibberPricesToday = "tibberconnect.0.Homes.*****.PricesToday.";        // mit . am Ende!
var tibberPricesTomorrow = "tibberconnect.0.Homes.*****.PricesTomorrow.";  // mit . am Ende!
 
var tibberStartsAt = "startsAt";
var tibberTotal = "total";
 
 
// Datenpunkte anlegen:
// -----------------------------------------------------------------------------
var idChartData = "tibber.prices.chartData";                      // Pfad und Name, unter dem in der Javascript-Instanz der Datenpunkte angelegt wird
createState(idChartData, '[{"label":"15","value":"25.2","dataColor":"#ffffff"},{"label":"16","value":"28.8","dataColor":"#ffffff"},{"label":"17","value":3"5.2","dataColor":"#ffffff"},{"label":"18","value":"33.2","dataColor":"#ffffff"},{"label":"19","value":"20.2","dataColor":"#ffffff"}]', forceCreation, {
     name: 'Chart-Data Price Forecast',
     desc: 'Chart-Data Price Forecast',
     type: 'string',
     role: 'value'
});
 
// Datenpunkte anlegen:
// -----------------------------------------------------------------------------
var idBarChartData = "tibber.prices.barChartData";                      // Pfad und Name, unter dem in der Javascript-Instanz der Datenpunkte angelegt wird
createState(idBarChartData, '[{"label":"15","value":"25.2","dataColor":"#ffffff"},{"label":"16","value":"28.8","dataColor":"#ffffff"},{"label":"17","value":3"5.2","dataColor":"#ffffff"},{"label":"18","value":"33.2","dataColor":"#ffffff"},{"label":"19","value":"20.2","dataColor":"#ffffff"}]', forceCreation, {
     name: 'Bar Chart-Data Price Forecast',
     desc: 'Bar Chart-Data Price Forecast',
     type: 'string',
     role: 'value'
});
 
createBarChartData();
 
// Cron-Job, zum Stundenwechsel
// Stundenwechsel, Ausführen immer um *:00:10
schedule('10 0 * * * *', function () {createBarChartData()});
 
function createBarChartData () {    
	if(logOn) console.log(myName + " Stundenwechsel");
    
    let barChart = [];
 
    var jetzt = new Date(Date.now());
    var aktStunde = jetzt.getHours();
    var unixTimestamp=new Date().getTime();
 
    // bis zu 18 Stunden in die Zukunft
    const offsets=[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13, 14, 15, 16, 17, 18];
 
    for (let offset of offsets)
    {
        // Template Objekt für BarChart erzeugen
        let itemData ={label:"", value:0.0, dataColor: "#c2c2c2", valueColor: "#dddddd"}; //, valueAppendix: "", valueColor: #ffffff"
 
        // Vorbereitung um Werte aus Tibber Adapter zu holen         
        var prefix="";
        aktStunde=jetzt.getHours()+offset;
        if (aktStunde>23)
        {
            aktStunde=aktStunde-24;
            prefix=tibberPricesTomorrow;
        }
        else
        {
            prefix=tibberPricesToday;
        }
 
        var strStunde = (aktStunde.toString()).slice(-2); //("0" + aktStunde.toString()).slice(-2);
        itemData['label']=strStunde;
 
        prefix=prefix+strStunde+'.';
 
        var aktPrice=getState(prefix+tibberTotal).val;
 
        // falls keine Daten vorliegen, weiter ohne diese ItemData an das Chart-Objekt anzuhängen
        if (aktPrice==null && aktStunde>=0)
            continue;
 
        // von 0.2345 € auf Cent mit einer Nachkomma-Stelle umrechnen
        itemData['value']=Math.round(aktPrice*1000)/10.0;
 
        // Je nach Preis den Balken einfärben
        if (aktPrice<0.30)
            itemData['dataColor']="green";
        else
        if (aktPrice<0.40)
            itemData['dataColor']="yellow";
        else
        if (aktPrice<0.50)
            itemData['dataColor']="orange";
        else
        if (aktPrice<0.60)
            itemData['dataColor']="red";
        else
            itemData['dataColor']="magenta";
 
        // Daten für diese Stunde dem Objekt zufügen
        barChart.push(itemData);
    }
 
    // fertiges Objekt in den Datenpunkt als JSON schreiben
    setState("javascript."+instance+"."+idBarChartData, JSON.stringify(barChart), true);
 
};
 
function createChartData () {    
	if(logOn) console.log(myName + " Stundenwechsel");
    
    let chart = {};
    let axisLabels =[];
    let values =[];
    let datalabels =[];
 
    var jetzt = new Date(Date.now());
    var aktStunde = jetzt.getHours();
    var unixTimestamp=new Date().getTime();
 
    const offsets=[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13, 14, 15, 16, 17, 18];
 
    // Spaltenbeschriftungen
 
    //chart.graphs[0].axisLables=axisLabels;
    chart.graphs=new Array();
    chart.graphs.push({});
    chart.graphs[0].color="green";
    chart.graphs[0].type="bar";
    chart.graphs[0].datalabel_rotation=-90;
    chart.graphs[0].datalabel_color="lightgreen";
    chart.graphs[0].datalabel_fontSize=10;
    chart.graphs[0].yAxis_title_text="cent";
    chart.graphs[0].yAxis_show=true;
    chart.graphs[0].legendText="Uhrzeit";
    chart.graphs[0].datalabel_show=true;
    chart.graphs[0].yAxis_minimumDigits=1;
    chart.graphs[0].yAxis_maximumDigits=1;
 
    for (let offset of offsets)
    {
        // Spaltenbeschriftungen
        aktStunde=jetzt.getHours()+offset;
        if (aktStunde>23)
            aktStunde=aktStunde-24;
        var strStunde = (aktStunde.toString()).slice(-2); //("0" + aktStunde.toString()).slice(-2);
        axisLabels.push(strStunde)
        //axisLabels.push(aktStunde);
               
        var prefix="";
        aktStunde=jetzt.getHours()+offset;
        if (aktStunde>23)
        {
            aktStunde=aktStunde-24;
            prefix=tibberPricesTomorrow+".";
        }
        else
        {
            prefix=tibberPricesToday+".";
        }
 
        strStunde = ("0" + aktStunde.toString()).slice(-2);
        prefix=prefix+strStunde+'.';
 
        //if(logOn) console.log(myName + " Stundenwechsel, akt Stunde "+strStunde+", prefix "+prefix);
        var aktPrice=getState(prefix+tibberTotal).val;
        //var aktStartAt=getState(prefix+tibberStartsAt).val;
        //if(logOn) console.log(myName + " aktPrice "+aktPrice+", aktStartAt "+aktStartAt);
        //let itemData ={t:0, y:0.0};
        //itemData['t']=unixTimestamp+3600*offset;
        //itemData['y']=aktPrice;
        values.push(Math.round(aktPrice*1000)/10.0);
        var cents=(Math.round(aktPrice*1000)/10.0).toString();
        datalabels.push(cents);
 
    }
    chart.graphs[0].data=values;
    chart.graphs[0].datalabel_override=datalabels;
    chart.data=values;
    chart.datalabel_override=datalabels;
    chart.axisLables=axisLabels;
 
    setState("javascript."+instance+"."+idChartData, JSON.stringify(chart));
 
};

[vowill]

Für alle, die den ECharts-Adapter bereits am Laufen haben, hier eine Blockly-Lösung für die grafische Darstellung der Preise heute und Preise Morgen:
Nachtrag 25.12.2023: Hier ein Foto des zugehörigen Pop-up-Views in vis:

• Der Tibber-Adapter legt seine Daten im Objektbaum unter ‚tibberlink.0.Homes.xxx.PricesToday‘ und ‚tibberlink.0.Homes.83xx.PricesTomorrow‘ ab. Dort gibt es jeweils einen JSON-Datenpunkt, in dem die Werte für den ganzen Tag gespeichert sind.

• Der ECharts-Adapter kann optional einen JSON-Datenpunkt einlesen und darstellen, wenn die Daten im Format
  [{„ts“: 1675887847000, „val“: 45}, {„ts“: 1675887848000, „val“: 77}, {„ts“: 1675887849000, „val“: 180} ]
  vorliegen (siehe https://github.com/ioBroker/ioBroker.echarts#readme).

Damit benötigt es ein Skript, das die beiden JSON-Datenpunkte aus Tibber in einen JSON-Datenpunkt für ECharts konvertiert.
Hier eine schnelle Skript-Lösung (mit Ablage des Ergebnisses im String-Datenpunkt ‚0_userdata.0.Stromversorgung.Tibber-Preise‘; der Wert 83xx im Skript ist vor dem Import durch die jeweilige Tibber-ID zu ersetzen):
[Nachtrag 01.12.2023: Das zugrunde liegende Blockly-Script konnte ich aufgrund seiner Größe hier nicht hochladen; ich stelle es auf Nachfrage aber gerne per Mail zur Verfügung. Im nachfolgenden Skript (hier das (Update vom 07.12.2024) wird noch zusätzlich der Datenpunkt ‚0_userdata.0.Stromversorgung.Tibber-Mittelwerte‘ befüllt, um im Chart auch Linien für die jeweiligen Tages-Mittelwerte einzublenden.
Im EChart muss dann lediglich als Quelle 'JSON' und ID '0_userdata.0.Stromversorgung.Tibber-Preise' angegeben werden; als Diagramm-Typ sollte 'Schritte' gewählt werden.]

Update 03.11.2025: Da Tibber die Daten auf einen 15-Minuten-Takt geändert hat, ändert sich auch das Skript. Update siehe weiter unten ab
Post #58.

[qwertz]

@familienvater
Danke dir für das Skript und Widget ! Nutze das mit dem euen Tibberlink Adapter.

Klappt Prima. Ich musste nur bei Zeile 144 das "0" + entfernen, damit auch die einstelligen Stunden ausgelesen werden.

[AllElectrified]

@vowill Danke für die tolle Anregung. Habe das in Blockly umgesetzt. Errechne mir zusätzlich noch bezogen auf einen definierten "Triggerpreis" ein JSON das alle Stunden unterhalb des Preises mit 1 und oberhalb mit 0 enthält und überlagere das im eChart. Dann kann man dynamisch im VIS den Triggerpreis über Tasten einstellen (Triggerpreiswert als Markierung im eChart überlagert) und sieht graphisch (grün), in welchen Stunden der Preis unterhalb des Triggers liegt und ein Zähler zeigt wieviel Stunden das insgesamt sind. Jetzt noch ein kleiner Script der in diesen Stunden die Wallbox aktiviert (nutze dafür dass "best price" feature von Tibberlink). Und fertig :blush:

Sieht bei mir im VIS dann so aus:

[lui1307]

@vowill Kannst Du mir bitte das zugrunde liegende Blockly-Script per Mail zusenden.

[vowill]

@lui1307
Gerne per privater Mail; siehe Chat.

[lui1307]

@vowill blank

[aleks-83]

Hi,

bei mir wird der JSON offenbar nicht richtig ins bar chart gelesen.
Was kann ich tun?

JSON string:

Spoiler

[{"total":0.2637,"energy":0.0581,"tax":0.2056,"startsAt":"2024-02-20T00:00:00.000+01:00","currency":"EUR","level":"NORMAL"},{"total":0.2592,"energy":0.0543,"tax":0.2049,"startsAt":"2024-02-20T01:00:00.000+01:00","currency":"EUR","level":"NORMAL"},{"total":0.2588,"energy":0.054,"tax":0.2048,"startsAt":"2024-02-20T02:00:00.000+01:00","currency":"EUR","level":"NORMAL"},{"total":0.2582,"energy":0.0535,"tax":0.2047,"startsAt":"2024-02-20T03:00:00.000+01:00","currency":"EUR","level":"NORMAL"},{"total":0.2576,"energy":0.053,"tax":0.2046,"startsAt":"2024-02-20T04:00:00.000+01:00","currency":"EUR","level":"NORMAL"},{"total":0.2598,"energy":0.0548,"tax":0.205,"startsAt":"2024-02-20T05:00:00.000+01:00","currency":"EUR","level":"NORMAL"},{"total":0.2785,"energy":0.0705,"tax":0.208,"startsAt":"2024-02-20T06:00:00.000+01:00","currency":"EUR","level":"NORMAL"},{"total":0.2998,"energy":0.0884,"tax":0.2114,"startsAt":"2024-02-20T07:00:00.000+01:00","currency":"EUR","level":"NORMAL"},{"total":0.3027,"energy":0.0909,"tax":0.2118,"startsAt":"2024-02-20T08:00:00.000+01:00","currency":"EUR","level":"NORMAL"},{"total":0.2881,"energy":0.0786,"tax":0.2095,"startsAt":"2024-02-20T09:00:00.000+01:00","currency":"EUR","level":"NORMAL"},{"total":0.2777,"energy":0.0698,"tax":0.2079,"startsAt":"2024-02-20T10:00:00.000+01:00","currency":"EUR","level":"NORMAL"},{"total":0.267,"energy":0.0609,"tax":0.2061,"startsAt":"2024-02-20T11:00:00.000+01:00","currency":"EUR","level":"NORMAL"},{"total":0.2583,"energy":0.0535,"tax":0.2048,"startsAt":"2024-02-20T12:00:00.000+01:00","currency":"EUR","level":"NORMAL"},{"total":0.2558,"energy":0.0514,"tax":0.2044,"startsAt":"2024-02-20T13:00:00.000+01:00","currency":"EUR","level":"NORMAL"},{"total":0.2562,"energy":0.0518,"tax":0.2044,"startsAt":"2024-02-20T14:00:00.000+01:00","currency":"EUR","level":"NORMAL"},{"total":0.2614,"energy":0.0562,"tax":0.2052,"startsAt":"2024-02-20T15:00:00.000+01:00","currency":"EUR","level":"NORMAL"},{"total":0.2696,"energy":0.0631,"tax":0.2065,"startsAt":"2024-02-20T16:00:00.000+01:00","currency":"EUR","level":"NORMAL"},{"total":0.2785,"energy":0.0705,"tax":0.208,"startsAt":"2024-02-20T17:00:00.000+01:00","currency":"EUR","level":"NORMAL"},{"total":0.2794,"energy":0.0712,"tax":0.2082,"startsAt":"2024-02-20T18:00:00.000+01:00","currency":"EUR","level":"NORMAL"},{"total":0.282,"energy":0.0735,"tax":0.2085,"startsAt":"2024-02-20T19:00:00.000+01:00","currency":"EUR","level":"NORMAL"},{"total":0.2761,"energy":0.0685,"tax":0.2076,"startsAt":"2024-02-20T20:00:00.000+01:00","currency":"EUR","level":"NORMAL"},{"total":0.2676,"energy":0.0613,"tax":0.2063,"startsAt":"2024-02-20T21:00:00.000+01:00","currency":"EUR","level":"NORMAL"},{"total":0.2622,"energy":0.0569,"tax":0.2053,"startsAt":"2024-02-20T22:00:00.000+01:00","currency":"EUR","level":"NORMAL"},{"total":0.2574,"energy":0.0528,"tax":0.2046,"startsAt":"2024-02-20T23:00:00.000+01:00","currency":"EUR","level":"NORMAL"}]

bar chart im vis:

Spoiler

bar chart widget:

Spoiler

[{"tpl":"tplVis-materialdesign-Chart-Bar","data":{"oid":"tibberlink.0.Homes.e9a4eb21-162a-45f3-a1b5-90fc54b2d566.PricesToday.json","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","chartDataMethod":"inputPerEditor","dataCount":"1","chartType":"vertical","backgroundColor":"#mdwTheme:vis-materialdesign.0.colors.charts.background","chartAreaBackgroundColor":"#mdwTheme:vis-materialdesign.0.colors.charts.background_chart","titleLayout":"#mdwTheme:vis-materialdesign.0.fontSizes.card.title","titleFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.card.title","colorBackground":"#mdwTheme:vis-materialdesign.0.colors.card.background","colorTitleSectionBackground":"#mdwTheme:vis-materialdesign.0.colors.card.background_title","colorTextSectionBackground":"#mdwTheme:vis-materialdesign.0.colors.card.background_body","colorTitle":"#mdwTheme:vis-materialdesign.0.colors.card.title","globalColor":"#mdwTheme:vis-materialdesign.0.colors.charts.global","hoverColor":"#mdwTheme:vis-materialdesign.0.colors.charts.bar.hover","hoverBorderColor":"#mdwTheme:vis-materialdesign.0.colors.charts.bar.hover_border","showValues":"showValuesOn","valuesFontColor":"#mdwTheme:vis-materialdesign.0.colors.charts.value","valuesFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.value","valuesFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.value","valuesPositionAnchor":"end","valuesPositionAlign":"top","valuesTextAlign":"center","yAxisPosition":"left","yAxisTitleColor":"#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_title","yAxisTitleFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.y_axis_title","yAxisTitleFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.y_axis_title","yAxisValueLabelColor":"#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_values","yAxisValueFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.y_axis_values","yAxisValueFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.y_axis_values","yAxisValueDistanceToAxis":"10","yAxisShowAxis":"true","yAxisShowAxisLabels":"true","yAxisShowGridLines":"true","yAxisGridLinesColor":"#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_gridlines","yAxisShowTicks":"true","yAxisZeroLineColor":"#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_zeroline","xAxisPosition":"bottom","xAxisTicksSource":"auto","xAxisTitleColor":"#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_title","xAxisTitleFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.x_axis_title","xAxisTitleFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.x_axis_title","xAxisValueLabelColor":"#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_values","xAxisValueFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.x_axis_values","xAxisValueFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.x_axis_values","xAxisValueDistanceToAxis":"0","xAxisShowAxis":"true","xAxisShowAxisLabels":"true","xAxisShowGridLines":"true","xAxisGridLinesColor":"#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_gridlines","xAxisShowTicks":"true","xAxisZeroLineColor":"#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_zeroline","xAxisMinRotation":"0","xAxisMaxRotation":"0","legendPosition":"right","legendFontColor":"#mdwTheme:vis-materialdesign.0.colors.charts.legend","legendFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.legend","legendFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.legend","legendPointStyle":"true","showTooltip":"true","tooltipBackgroundColor":"#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_background","tooltipShowColorBox":"true","tooltipTitleFontColor":"#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_title","tooltipTitleFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.tooltip_title","tooltipTitleFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.tooltip_title","tooltipBodyFontColor":"#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_text","tooltipBodyFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.tooltip_text","tooltipBodyFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.tooltip_text","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0},"style":{"left":"395px","top":"210px","width":"954px","height":"427px"},"widgetSet":"materialdesign"}]

[vowill]

@aleks-83 Hm, laut der Doku von ECharts hier ist nur ein Wert je Zeitpunkt zugelassen sowie keine 'start'-Festlegung.

[aleks-83]

Danke.
Aber ich bin ja gar nicht im eCharts Adapter.
Ich versuche das JSON per Widget ins bis zu bringen

[vowill]

@aleks-83 okay; mein Fehler.

[Beerle1968]

@vowill Könntest du mir das Blockly zukommen lassen