nicht angemeldet
Hallo Leute, ich traue mich fast nicht diese Frage zu stellen😱 Zum Problem: Ich habe eine HTML-Seite, in der ich Eingabe-Felder habe die mit POST an den FLASK-Server übergeben werden. Dort werden mit den Eingaben Daten in einer MariaDB gesucht und wieder zurückgegeben. Weier unten findet Ihr den HTML-Code. Zuerst aber zum Aufbau und Ablauf der Seite und was funktioniert:
-
Von Zeile 13 - 49 ermittle ich per JS zwei Datumswerte aus dem aktuellen Datum und übergebe diese per document.getElementById.... an die Eingabefelder im darauffolgenden <form> - >/form> Aus dem Form werde n die Daten per submit übergeben. Funktioniert!
-
Zurück vom Server erhalte ich 4 Listen.
- Liste energie_date - Ist eine mehrdimensionale Liste, welche dann 105 - 134 an google chart übergeben wird. Dort wird dann eine entsprechende Grafik ausgegeben. Funktioniert!
- Das folgende bekomme ich NICHT hin !?!? 2. 3 weitere Listen, aus denen ich VOR/oberhalb der Google Grafik einzelne Werte ausgeben möchte. vertraege, zaehler, summen
Von 73 - 98 lese ich den Listeninhalt von vertraege und weise die Inhalte sprechender Variablen zu Wenn ich JS-Debugger (F12) mir die Inhalte der Variablen anschaue, sind diese richtig gefüllt! Von 94 - 101 versuche ich nun beispielhaft den Wert der Variablen 'lieferant' VOR der Grafik ab <div id='linechart_material'></div> auszugeben.
Mir steht wohl gewaltig einer auf der Leitung!!!!!
Kann mir jemand auf die Sprünge helfen. HTML und JS sind nun ganz und gar nicht meine Stärken😪
Anbei nun mein HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Energieverbrauch mit Google Charts darstellen">
<title>Google Chart parametriert durch flask</title>
<style>
div linechart_material { height: 20em; }
form { margin-bottom: 2em; }
</style>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="module">
/*
Funktion um Tage von einem Datum abzuziehen oder zu addieren
days kann deshalb positiv oder negativ sein
*/
const days2add = -1;
const eineNull = "0";
let monat = "";
let heute = new Date();
let jahr = heute.getFullYear();
let monat_1 = (heute.getMonth() + 1);
if (monat_1 < 10) {
monat = eineNull + monat_1;
}
else {
monat = monat_1;
}
let tag = "";
let tag_l = (heute.getDate() + days2add);
if (tag_l < 10) {
tag = eineNull + tag_l;
}
else {
tag = tag_l;
}
let day_new = jahr + "-" + monat + "-" + tag;
document.getElementById("day_from").value = day_new;
document.getElementById("day_to").value = day_new;
</script
</head>
<body>
<h1>Energieverbrauch</h1>
<form action="{{ url_for('energieshow') }}" method="POST">
<input type="checkbox" id="energie_art_1" name="energie_art_strom" value="strom", checked="checked">
<label for="energie_art_1"> Strom</label><br>
<input type="checkbox" id="energie_art_2" name="energie_art_gas" value="gas">
<label for="energie_art_2"> Gas</label><br>
<input type="checkbox" id="energie_art_3" name="energie_art_wasser" value="wasser">
<label for="energie_art_3"> Wasser</label><br><br>
<label for="date">Von :</label>
<input type="date" id="day_from" name="day_from" />
<input type="time" id="time_from" name="time_from" value="00:00" /><br>
<label for="date">Bis :</label>
<input type="date" id="day_to" name="day_to" />
<input type="time" id="time_to" name="time_to" value="23:59" /><br>
<input type="submit" value="Anzeigen"/>
</form>
<div id='daten_zur_grafik'></div>
<script>
let zaehlerstand = 123456.0
let netto_preis = 123.456
let brutto_preis = 123.456
{% for vertrag in vertraege %}
von_datum_vertrag = {{vertrag[0]}}
bis_datum_vertrag = {{vertrag[1]}}
energie_art = {{vertrag[2]}}
mess_art = {{vertrag[3]}}
lieferant = {{vertrag[4]}}
vertrags_nr = {{vertrag[5]}}
netto_preis = {{vertrag[6]}}
brutto_preis = {{vertrag[7]}}
preis_einh = {{vertrag[8]}}
mass_einh = {{vertrag[9]}}
{% endfor %}
document.write(lieferant);
document.getElementById('lieferant').innerHTML = lieferant;
</script>
<h2>Vertragsdaten zum ausgewählten Zeitraum</h2>
<p> Lieferant <span id="lieferant"></span>.</p>
<div id='linechart_material'></div>
<script>
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
let data = new google.visualization.DataTable() ;
data.addColumn('string', 'Zeitraum') ;
data.addColumn('number', 'Verbrauch "{{energie_type}}"') ;
data.addRows([
{% for hh_v_b, value, dd_von, dd_bis in energie_data -%}
["{{hh_v_b}}", {{ value }}]{%- if not loop.last -%},{% endif %}
{% endfor %}
]);
var options = {
'width': 1400,
'height': 500,
'title': 'Energieverbrauch vom {{day_from_str}} {{time_from_str}} bis {{day_to_str}} {{time_to_str}}',
'subtitle': 'in Umdrehungen Ferraris-Scheibe je Zeitspanne'
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>
</body>
</html>
😪
Gunnar Bittersmann
Rolf B