Tutorial: Statistische Daten mit HTML5/JavaScript und INQStats visualisieren

In diesem Tutorial wird gezeigt, wie man in kurzer Zeit mittels HTML5/JavaScript selbst eine einfache Web-Applikation erstellen kann, um Daten zu visualisieren. Unser Ziel ist es, die Entwicklung der Internetnutzung in den Ländern Österreich, Deutschland und den USA von 1995 bis 2014 nachzuvollziehen und als Linien-Diagramm darzustellen. Um direkt am Code arbeiten zu können gibt es hier ein JSFiddle, wir werden uns im Laufe des Tutorial immer wieder darauf beziehen.

inqstats_jsfiddle


Schritt 1: Grundprinzipien der INQStats-API

Jedes Diagramm ist nur so gut wie die dahinter liegenden Daten. Um automatisiert Daten zu erhalten und diese direkt in unsere HTML5/JavaScript-Applikation einbauen zu können, nutzen wir eine API namens INQStats. INQStats bezieht Daten von verschiedenen Internationalen Organisationen (wie etwa UN-Data, Worldbank, WHO, etc.) und stellt diese über ein einheitliches Interface zur Verfügung. INQStats kann über ein REST-Interface angesprochen werden, dh. es genügt ein simpler HTTP GET request und wir erhalten als Antwort ein oder mehrere JSON-Objekte, die wir weiterverwenden können. Dazu sind folgende Parameter notwendig:

api_key: Dies ist ein Zahlencode, der zur Authentifizierung benutzt wird. Bei jedem Aufruf muss dieser Parameter mit übergeben werden. Ein solcher Code kann hier kostenlos erstellt werden, dazu ist nur die Angabe von Namen, Mailadresse und Zweck notwendig.

countries: Eine mit Kommas getrennt Liste an (2-stelligen) Länder-Codes für die Daten abgerufen werden sollen (zB at = Österreich, us = USA, de = Deutschland, etc.). Eine vollständige Liste an Codes gibt es hier.

data: Ein Schlüssel der angibt, welche Daten abgerufen werden. Eine Liste an möglichen Schlüsseln gibt es hier (zB population = retourniert die Einwohnerzahl, size = retourniert die Fläche eines Landes)

years: Eine Liste an Jahresangaben für die die Daten abgerufen werden sollen. Es kann entweder nur ein einziges Jahr angegeben werden (zB years=2014), eine mit Kommas getrennte Liste (zB years=2012,2013,2014) oder ein mittels Doppelpunkt gekennzeichnetes Intervall (zB years=1995:2015 –  Dies ruft alle Datensätze von 1995 bis 2015 auf, sofern verfügbar).

addRegion: Wenn dieser optionale Parameter auf true gesetzt ist, wird der Kontinent auf dem sich das Land befindet mitgeliefert. Es gibt die folgenden Regionen: North America, Middle America, South America, Europe, Africa, Asia, Oceania.

lang: Dieser optionale Paramter gibt an, in welche Sprache die Ländernamen in der Antwort zurückgegeben werden sollen (zB lang=de für Deutsch). Standardsprache ist Englisch.

Angenommen, wir wollen die Einwohneranzahl von Deutschland und Österreich zwischen den Jahren 2013 und 2014 vergleichen. In diesem Fall können wir folgende URI verwenden (Achtung: api_key mit eigenem Schlüssel ersetzen!)

Als Antwort erhalten wir folgendes:

[{
“countryCode”: “at”,
“countryName”: “Austria”,
“population”: [
{
“year”: “2014”,
“data”: “8545908”
},
{
“year”: “2013”,
“data”: “8479375”
}
]},
{
“countryCode”: “de”,
“countryName”: “Germany”,
“population”: [
{
“year”: “2014”,
“data”: “80970732”
},
{
“year”: “2013”,
“data”: “82132753”
}
]}]

Es handelt sich dabei um ein Array in dem sich zwei Objekte befinden: Ein Österreich- und ein Deutschland-Objekt. Dieses beinhalten wiederum ein Array “population” in dem sich die einzelnen Datenpunkte bestehend aus Jahr und Datensatz befinden.

Schritt 2: JavaScript-Funktion um Daten automatisch zu erhalten
Wir erstellen nun eine Funktion, die einen Datenschlüssel sowie ein Start- und ein Endjahr übernimmt und die erhaltenen Datensätze auf der Konsole ausgibt. Um unseren Code möglichst einfach zu halten, nutzen wir dazu die AJAX-Funktion der jQuery library:

$.ajax({
url: ‘http://inqstatsapi.inqubu.com?api_key=HIERSCHLÜSSELEINFÜGEN&data=internetusers_percent&countries=at,de,us&    years=1995:2014’,
complete: function(response) {
// Hierher kommt der Code wenn der Aufruf der URL erfolgreich war.
console.log(response.responseText);
}, error: function(e) {
// Hierher kommt der Code, wenn es beim Aufruf einen Fehler gab.
console.log(“Error”);
}
});

Damit dieser Code funktioniert, müssen wir eine aktuelle jQuery library in den <head> Bereich unseres HTML-Dokuments hinzufügen, zB so:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<title>Internetusers – INQStats Tutorial</title>
https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js
</head>
<body>
</body>
</html>


Hier gibt es auch ein JSFiddle
das den Aufruf zeigt. Die Konsole öffnet man übrigens in Firefox (v40) via Menü Extras > Web-Entwickler > Web-Konsole. In Chrome (v51) unter dem Menü > Weitere Tools > Entwicklertools.

Damit wir die erhaltenen Daten auch verwenden können, müssen wir das Format anpassen. Unsere Chart-Library (dazu gleich mehr) erwartet pro Land ein Array, in dem sich alle Werte für einen gewissen Zeitraum befinden. Fehlt für ein Jahr ein Datensatz, muss dies als null im Array hinzugefügt werden. In Zeile 20 in unserem JSFiddle iterieren wir über alle Länder, die wir aufgerufen haben (at,de,us) und in der for-Schleife in Zeile 23 gehen wir die Jahre 1995 bis 2014 Schritt für Schritt durch und prüfen in Zeile 26, ob für das betreffende Jahr ein Datensatz vorliegt. Falls ja, fügen wir ihn in Zeile 27 zu einem Array hinzu. Falls nein, fügen wir in Zeile 32 den null-Wert dem Array hinzu. In Zeile 35 aggregieren wir noch alle Informationen die wie für ein Land haben (zB der Name des Landes, die Farbe die für dieses Land in der Chart erscheinen soll) und unter dem Parameter “data” hängen wir das gerade erstellte Array an. In Zeile 38 schließlich rufen wir eine Funktion auf, die unsere Datensätze zeichnet.

Schritt 3: Daten visualisieren
Bis jetzt haben wir nur Daten gesammelt und aufbereitet, Zeit für den besten Teil, die Visualisierung! Dazu benötigen wir zunächst ein <canvas>, das quasi als “Zeichenbrett” für unsere Chart dient. Für die Visualisierung verwenden wir eine Library namens Chart.js. Der Vorteil an Chart.js ist, dass sich sehr einfach mit wenigen Zeilen Code stabile Charts bauen lassen. Auch diese Bibliothek müssen wir in unserem <head> Bereich hinzufügen, der Link dazu ist folgender: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js

Eine Chart mit Chart.js zu erstellen ist sehr simpel, das Template dazu sieht wie folgt aus:

var ctx = document.getElementById(“inqstatsChart”).getContext(“2d”);
var chart = new Chart(ctx, {
type: ‘line’,
data: {
labels: labels,
datasets: datasets
}
});

Zuerst referenzieren wir unser <canvas> und speichern die Referenz in einer Variable ctx. Danach erstellen wir eine neue Chart via new Chart und übergeben unseren Canvas-Verweis als ersten Parameter und ein Objekt bestehend aus dem Typ (line für ein Liniendiagramm, bar für ein Balkendiagramm), den labels (die Bezeichnung für die Y-Achse) sowie die datasets (die Datenpunkte der Y-Achse)

Zurück zu unserem umfassenden JSFiddle-Beispiel: In Zeile 51 bis 53 bauen wir unsere X-Achse indem wir einfach die Jahre 1995 bis 2014 in ein labels-Array schreiben. Unsere Y-Achse haben wir bereits gebaut, sie befindet sich im Array datasets, das wir in Zeile 58 zuweisen. In Zeile 65 folgt noch eine Option, dass für unsere Y-Achse auch eine Bezeichnung angezeigt wird, das war’s. Wenn wir jetzt unsere Funktion aufrufen, erhalten wir eine bildschirmfüllende Chart, die uns die Entwicklung der Internetuser in den Jahren 1995 bis 2014 anzeigt!

Fragen, Kritik und Anregungen können gerne als Kommentar gepostet werden!

One thought on “Tutorial: Statistische Daten mit HTML5/JavaScript und INQStats visualisieren

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: