Endlich: Graphen
Langsam rückt das Ziel näher und endlich kommt eine bunte Linie auf den Bildschirm. Alle Daten können nun auf den Rechner der Besuchenden gebracht werden, es fehlt nur noch die Anzeige der Graphen.
Auch hier muss das Rad nicht neu erfunden werden. Es ist sicherlich eine schöne Übung ein paar Striche auf den Bildschirm zu zeichnen, besser als mit chartjs wird es vermutlich nicht, daher empfehle ich den Download der Software auf deinen Server.
Für dieses Beispiel ist etwas Verständnis von Promises [1, 2, 3] nötig. Falls dir dieses Verständnis noch fehlt, solltest du wissen, dass jede Bearbeitung innerhalb des .then()-Blocks erfolgen muss – der Graph wird also innerhalb dieses Block vollständig gezeichnet. Die Daten können nicht über eine return-Anweisung an eine andere Funktion weitergegeben werden.
/**
* Funktion lädt historische CoViD Daten für die übergebene geographische Entität und zeigt einen Graph für den Canvas mit den Klassen "marker covid historic" an.
* @param {string} ags Amtlicher Gemeindeschlüssel einer Entität für welche historische CoViD-Daten abgerufen werden sollen.
* @param {string} csssel CSS selector für canvas
*/
function loadCovidDataRkiHistoric(ags, csssel) {
fetch("/dateiname.php?QueryType=" + encodeURIComponent("RKIHistoric") + "&QueryData=" + ags).then(j => j.json()).then(j => {
let dat = j.map(e => e.AnzFallErkrankung);
let lbl = j.map(f => new Date(f.Datum).toLocaleString("de-DE", {day: "numeric", month: "numeric", year: "numeric"}));
const chartdata = {
labels: lbl,
datasets: [{
label: "Anzahl Erkrankungen",
data: dat,
borderColor: '#FF0000',
}]
};
covchart = new Chart(document.querySelector(csssel).getContext("2d"),
{ type: "line",
label: "Erkrankungen, neu",
data: chartdata,
}
)
}
);
}Zuerst wird das json-Dokument per fetch abgeholt. Die Quelle für das Dokument ist die PHP-Datei, die vorhin erstellt wurde. Die Angaben in fetch musst du daher gegebenenfalls anpassen.
Anschließend wird das Dokument in Javascript-Objekte umgewandelt. Mit array.map werden zwei neue Arrays erzeugt mit den Neuerkrankungen (dat) und dem jeweiligen Tagesdatum (lbl). Die Neuerkrankungen sollen gezeichnet werden und die Tagesdaten sollen als zeitliche Beschriftung dienen.
Hierzu musst du wissen, dass chartjs in seinen Daten für jeden Datenpunkt eine Beschriftung erwartet. Datenpunkte und Beschriftungen müssen einfache Javascript-Arrays mit der gleichen Länge sein.
Darüberhinaus kann man den Datenreihen noch Farben zuweisen und ähnliche Dinge. Abschließend wird der komplette Datensatz (hier chartdata) einem neuen Chart zugewiesen, dieses erhält auch noch eine Überschrift, es wird ein Liniendiagram festgelegt und danach kümmert sich chartjs automatisch um Zeichnung und Layout.
Mittels dieser HTML-Elemente können die Skripte nun eingefügt und die Graphen angezeigt werden. Hier folgen NRW und Bayern:
Alle Daten stammen von ESRI und dem RKI. Die graphische Darstellung stammt von artfisch.de.
