Chartist-Diagramme und JSON

Aufgabe 1: Temperatur- und Niederschlagsverläufe

Legen Sie in Ihrem Projekt eine neue HTML-Datei an. Binden Sie in die HTML-Datei die Dateien chartist.min.css und chartist.min.js ein. Diese können Sie unter den angegebenen Links mit Rechtsklick und Wahl von Ziel speichern unter... herunterladen. Produzieren Sie dann die beiden in Abb. 1 dargestellten unterschiedlichen Chartist-Diagramme. Die Dokumentation zu Chartist finden Sie unter Chartist - Getting started.

In Abb. 1 stellt das Liniendiagramm mit zwei Kurvenverläufen den Verlauf der Maximal- und Minimaltemperatur in Berlin über das Jahr dar, das Säulendiagramm den Verlauf der dortigen Niederschlagsmenge.

Die Diagramme besitzen die folgenden Kennwerte:

• Das Seitenverhältnis ist ct-minor-seventh.

• Liniendiagramme:
  Linienbreite 4px, Punkte quadratisch in schwarz mit Größe 6px. Die rote Linie repräsentiert den Verlauf der Maximaltemperatur, die grüne Linie den Verlauf der Minimaltemperatur.



• Balkendiagramm:
  Die Farbe der Balken ist CornflowerBlue

• Damit die Beschriftung der x-Achse vollständig am rechten Rand angezeigt wird, benutzen Sie die Option chartPadding:

  var options = {
    fullWidth: true, // usw.
    // ...
    chartPadding: {
      right: 40
    }
    // ...
  }

• Der Wertebereich auf der y-Achse kann entsprechend zu fullWidth mit den Optionen high und low festgelegt werden. Beispiel:

  high: 25,
  low: -5,

Weitere Möglichkeiten, die Beschriftung der y-Achse zu kontrollieren finden Sie in der Chartist - API Documentation im Abschnitt FIXED-SCALE-AXIS. Beim freien Skalieren einer Webseite im Webbrowser werden diese Angaben von Chartist bzw. dem Webbrowser allerdings nur im Rahmen der jeweiligen Möglichkeiten eingehalten. Wenn Sie Ihre Ergebnisseite im Browser skalieren, können die realen Achsenbeschriftungswerte also von denen in Abb. 1 abweichen.

Aufgabe 2: Diagramme kombinieren

Kombinieren Sie die Temperaturverlaufs- und Niederschlagskurven in einem Diagramm mit unterschiedlichen Kurvenarten. Lesen Sie hierzu den Abschnitt Series Overrides auf der Seite Chartist-Examples in der Chartist Dokumentation. Säulen- und Liniendiagramme lassen sich bislang nicht gleichzeitig in einem Diagramm verwenden. Dies ist nur möglich durch überlagerte <div>-Boxen, was zu visuell schwierig zu beherrschenden Überlagerungseffekten führt. Nutzen Sie darum im kombinierten Diagramm eine Rechteckkurve für den Verlauf der Niederschlagsmenge.

Aufgabe 3: Diagramm mit extern eingelesenen Daten

Implementieren Sie das Beispiel aus der Vorlesung eines durch externe JSON-Daten gesteuerten Chartist-Diagramms. Legen Sie hierzu die JSON-Datei mit dem Namen labelsAndTemp.json an und verarbeiten Sie die Daten in einer zugehörenden HTML-Datei, die u. a. den Code der Folie "Chartist-Diagramm mit JSON" enthält.

Modifizieren Sie die Daten in der JSON-Datei, sobald die Darstellung funktioniert, um zu sehen, wie sich die Darstellung dynamisch an die veränderten Daten anpasst.

Aufgabe 4: Persönliche Daten

Die persönlichen Daten einer Gruppe von Personen soll variabel als JSON-Datei gespeichert und mit Hilfe einer Webseite online angezeigt werden können.

Es liegen die Daten folgender Personen vor:

1. Legen Sie eine JSON-Datei für diese Daten an. Die Objektliterale sollen über die folgenden Eigenschaften verfügen: Vorname, Nachname, Wohnort und Merkmale. Merkmale ist ein Feld, in dem die Daten zu Alter, Größe und Gewicht zusammengefasst werden, in dieser Reihenfolge.

2. Schreiben Sie eine HTML-Datei, in der mittels JavaScript die Daten aus der JSON-Datei eingelesen und angezeigt werden.

   Fügen Sie zu diesem Zweck dem Body bzw. Körper Ihrer HTML-Datei ein <div>-Element mit der ID output hinzu:

   <div id="output"></div>

   Den Inhalt dieses Elements können Sie mit JavaScript durch Schreiben in die Eigenschaft innerHTML ändern. Greifen Sie hierfür mit Hilfe der ID wie folgt auf die Eigenschaft zu:

   document.getElementById("output").innerHTML = "Ausgabestring";

   Schreiben Sie eine Schleife, in der die Eigenschaften der geparsten JSON-Objekte nacheinander in den Ausgabestring geschrieben werden. Der Ausgabestring kann HTML-Tags beinhalten.

   Beispiel für einen in die Webseite geschriebenen Ausgabestring:

   Eingelesene Personendaten:
   
   Vorname: Anton
   Nachname: Ackermann
   Wohnort: Altenstadt
   Alter: 32, Größe: 1.91, Gewicht: 100
   
   Vorname: Brigitte
   Nachname: Beckmann
   Wohnort: Bernstadt
   Alter: 18, Größe: 1.66, Gewicht: 60
   
   Vorname: Daniela
   Nachname: Dannenmann
   Wohnort: Dornstadt
   Alter: 42, Größe: 1.78, Gewicht: 72
   
   Vorname: Hartmut
   Nachname: Hartmann
   Wohnort: Heroldstatt
   Alter: 20, Größe: 1.75, Gewicht: 66