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...
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
[{"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"}]