Falls jemand Interesse hat hier mein Script für das Strompreischart. Das ganze ist noch ziemlich Hemdsärmelig in HTML und CSS zusammengeknüppelt. Es gibt da auch noch ein paar Baustellen für die ich aber gerade noch keine Lösungsidee habe.
- Negative Strompreise können nicht abgebildet werden. (kommt in der heutigen Zeit leider kaum noch vor).
- Was passiert mit dem Preis wenn der Balken kleiner als der Text wird? (Thema Overflow und Textfarbe)
- Das ganze ist von der Größe auf mein Smartphone angepasst. Keine Ahnung wie sich das auf einem großen Monitor verhält.
- und zu letzt: ich hab keinen Plan was ich da mache, mein Gebiet ist eher die grafische Umsetzung
<?php
//Tibber Grundpreis in Cent
$grundpreis = 14.96;
//Höchster Börsen-Stundenpreis
$hoechster_preis_boerse = GetValue(16765);
//Höchster Börsen-Stundenpreis inkl. Grundpreis
$hoechster_preis_gesamt = round($hoechster_preis_boerse + $grundpreis, 2);
//Preis aktuelle Stunde
$preis_jetzt = round(GetValue(29369) + $grundpreis, 2);
//Niedrigster Börsen-Stundenpreis inkl. Grundpreis
$preis_niedrig = round(GetValue(53244) + $grundpreis, 2);
//Tagesdurchschnitspreis
$preis_durchschnitt = round(GetValue(20311) + $grundpreis, 2);
// Die maximale Höhe des "teuersten" Balken in Diagramm
$max_hoehe = 200 / $hoechster_preis_gesamt;
$preise = [];
$höhen = [];
//Börsenpreise abrufen, Grundpreis addieren und runden
$preise[] = round(GetValue(51279)+$grundpreis,1);
$preise[] = round(GetValue(34984)+$grundpreis,1);
$preise[] = round(GetValue(18571)+$grundpreis,1);
$preise[] = round(GetValue(35287)+$grundpreis,1);
$preise[] = round(GetValue(36473)+$grundpreis,1);
$preise[] = round(GetValue(12963)+$grundpreis,1);
$preise[] = round(GetValue(53357)+$grundpreis,1);
$preise[] = round(GetValue(23747)+$grundpreis,1);
$preise[] = round(GetValue(45259)+$grundpreis,1);
$preise[] = round(GetValue(21172)+$grundpreis,1);
$preise[] = round(GetValue(55397)+$grundpreis,1);
$preise[] = round(GetValue(37603)+$grundpreis,1);
$preise[] = round(GetValue(49153)+$grundpreis,1);
$preise[] = round(GetValue(52410)+$grundpreis,1);
$preise[] = round(GetValue(44731)+$grundpreis,1);
$preise[] = round(GetValue(36587)+$grundpreis,1);
$preise[] = round(GetValue(50696)+$grundpreis,1);
$preise[] = round(GetValue(18298)+$grundpreis,1);
$preise[] = round(GetValue(33013)+$grundpreis,1);
$preise[] = round(GetValue(32200)+$grundpreis,1);
$preise[] = round(GetValue(44250)+$grundpreis,1);
$preise[] = round(GetValue(58142)+$grundpreis,1);
$preise[] = round(GetValue(25629)+$grundpreis,1);
$preise[] = round(GetValue(53186)+$grundpreis,1);
// Höhe der Balken berechnen
$höhen[] = round($preise[0] * $max_hoehe,0);
$höhen[] = round($preise[1] * $max_hoehe,0);
$höhen[] = round($preise[2] * $max_hoehe,0);
$höhen[] = round($preise[3] * $max_hoehe,0);
$höhen[] = round($preise[4] * $max_hoehe,0);
$höhen[] = round($preise[5] * $max_hoehe,0);
$höhen[] = round($preise[6] * $max_hoehe,0);
$höhen[] = round($preise[7] * $max_hoehe,0);
$höhen[] = round($preise[8] * $max_hoehe,0);
$höhen[] = round($preise[9] * $max_hoehe,0);
$höhen[] = round($preise[10] * $max_hoehe,0);
$höhen[] = round($preise[11] * $max_hoehe,0);
$höhen[] = round($preise[12] * $max_hoehe,0);
$höhen[] = round($preise[13] * $max_hoehe,0);
$höhen[] = round($preise[14] * $max_hoehe,0);
$höhen[] = round($preise[15] * $max_hoehe,0);
$höhen[] = round($preise[16] * $max_hoehe,0);
$höhen[] = round($preise[17] * $max_hoehe,0);
$höhen[] = round($preise[18] * $max_hoehe,0);
$höhen[] = round($preise[19] * $max_hoehe,0);
$höhen[] = round($preise[20] * $max_hoehe,0);
$höhen[] = round($preise[21] * $max_hoehe,0);
$höhen[] = round($preise[22] * $max_hoehe,0);
$höhen[] = round($preise[23] * $max_hoehe,0);
$html_tags = '';
for ($i = 0; $i < 24; $i++) {
$html_tags .= '<div class="diag_tag" style="height: ' . $höhen[$i] . 'px;">' . number_format($preise[$i], 1) . ' </div>';
}
$currentHour = (int) (new DateTime())->format('H');
$uhrzeit_class = '';
for ($i = 0; $i < 24; $i++) {
$uhrzeit_class .= '<div class="uhrzeit2';
if ($i == $currentHour) {
$uhrzeit_class .= ' current';
}
$uhrzeit_class .= '">' . $i . '</div>';
}
$htmlstrompreis = '
<style type="text/css">
.container_strom2,
.container_uhrzeiten2,
.container_preisdetails {
display: flex;
justify-content: center;
width: 100%;
background-color: #ffffff;
}
.container_strom2 {
align-items: flex-end;
height: 200px;
border: 1px solid #d2d2d2;
border-top: none;
}
.container_uhrzeiten2,
.container_preisdetails {
align-items: flex-start;
height: 10px;
}
.main2 {
width: 100%;
height: 143px;
background-color: #ffffff;
}
.diag_tag {
width: 100%;
margin-bottom: 1px;
margin-right: 5px;
float: left;
background-image: linear-gradient(to top, #28cdab 5px, #1ecda3 10px, #17cd9a 20px, #17cd90 35px, #1ccd86 55px, #45cb71 80px, #5fc85c 105px, #76c546 120px, #9cbd1f 135px, #bfb100 150px, #e0a300 165px, #ff9000 180px);
text-align: right;
font-size: 0.5em;
writing-mode: vertical-lr;
color: #ffffff;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.timeline {
display: flex;
flex-direction: row;
width: 100%;
font-size: 0.6em;
margin-left: 0px;
margin-bottom: 5px;
margin-top: 5px;
}
.uhrzeit2 {
width: 100%;
margin-right: 5px;
text-align: center;
padding: 0;
box-sizing: border-box;
}
.uhrzeit2.current {
background-color: grey;
color: white;
border-radius: 3px;
}
.preisdetails {
width: 100%;
height: 150px;
margin: 0;
float: left;
background-color: #ffffff;
font-size: 0.6em;
}
</style>
<div class="main2">
<div class="container_strom2">' . $html_tags . '</div>
<div class="timeline">' . $uhrzeit_class . '</div>
<div class="container_preisdetails">
<div class="preisdetails">Aktuell: '.$preis_jetzt.' ct<font style="color: green;"> ↓ '.$preis_niedrig.' ct</font><font style="color: red;"> ↑ '.$hoechster_preis_gesamt.' ct</font> Ø '.$preis_durchschnitt.' ct</div>
</div>
<script>
const currentHour = new Date().getHours();
const currentTimelineHour = document.querySelector(`.uhrzeit2:nth-child(${currentHour + 1})`);
currentTimelineHour.classList.add(\'current\');
</script>
';
//HTML in die Variable der HTML Box schreiben
Setvalue(55288, $htmlstrompreis);
