Daten spannend aufbereitet: Chartist.js erstellt responsive, animierte Diagramme mit SVG

Zahlen und Statistiken sind oft trocken und wenig anschaulich. Als Diagramme aufbereitet, gewinnen sie hingegen leicht weitaus mehr Aufmerksamkeit. Die JavaScript-Bibliothek „Chartist.js“ aus Zürich zaubert aus beliebig vielen Zahlenreihen verständliche Diagramme unterschiedlicher Art – unter anderem Balken-, Kurven- und Kreisdiagramme. Diese sehen nicht nur gut aus, sondern sind dazu noch responsiv und lassen sich mit Animationseffekten aufwerten.

Einfache Diagramme spielend einfach generiert

„Chartist.js“ ist ein Projekt des Schweizers Gion Kunz, welches er unter der DWTFPL bereit stellt. Die Langfassung dieser Abkürzung ist nicht öffentlich druckbar, deshalb nur soviel zur Lizenz: Benutzen Sie Chartist.js für was immer Sie wollen. Gion Kunz ist es wurscht ;-).

Der Start ist schnell erledigt: Zunächst müssen die JavaScript- und Stylesheet-Datei von „Chartist.js“ eingebunden werden. Während über JavaScript die Funktionalität und die Dateneingabe erfolgt, ist im Stylesheet das Aussehen der verschiedenen Diagrammarten hinterlegt. Anschließend wird per HTML ein Container im Body ausgezeichnet, der später mit dem Diagramm gefüllt werden soll. Der Container erhält zum Einen die Klasse „ct-chart“ für das Grundlayout. Darüber hinaus wird eine zweite Klasse vergeben, die das Seitenverhältnis des anzuzeigenden Diagramms vorgibt.

Neben einem quadratischen Seitenverhältnis („ct-square“) oder dem klassischen 16-zu-9- („ct-minor-seventh“) oder 3-zu-4-Verhältnis („ct-perfect-fourth“) steht auch der Goldene Schnitt („ct-golden-section“) zur Verfügung. Insgesamt kann aus 17 verschiedenen Seitenverhältnissen ausgewählt werden.

<div class="ct-chart ct-perfect-fourth"></div>

Im Beispiel wird ein „<div>“-Element mit dem Seitenverhältnis 3-zu-4 erstellt. Anschließend werden per JavaScript die Zahlenreihen sowie Bezeichnungen des Diagramms übergeben.

var daten = {
  labels: ["Berlin", "Hamburg", "München"],
  series: [3460725, 1786448, 1353186]
};

new Chartist.Pie(".ct-chart", daten);

Im Beispiel sollen die Bevölkerungszahlen der drei größten deutschen Städte als Kreis- beziehungsweise Tortendiagramm dargestellt werden. Dazu werden die Zahlenwerte und Bezeichnungen als Objektliteral einer Variable („daten“) übergeben. Die Bezeichnungen der einzelnen Zahlenwerte stehen im Array „label“, die Zahlen selbst im Array „series“.

Tortendiagramm

Anschließend wird per „Chartist.Pie()“ ein Tortendiagramm erzeugt. Zwei Parameter erwartet „Chartist.js“: die Klasse des „<div>“-Containers, in welches das Diagramm gezeichnet werden soll, sowie das Objektliteral „daten“ mit den zu zeichnenden Werten.

Gezeichnet wird das Diagramm als SVG-Grafik – und zwar über die gesamte Breite des Elternelementes. Die Höhe resultiert aus dem im Container angegebenen Seitenverhältnis.

Diagramme mit mehreren Zahlenreihen

Neben dem Tortendiagramm sind Kurven- und Balkendiagramme möglich. Diese können im Gegensatz zum Tortendiagramm mehrere Zahlenreihen darstellen. Daher ist es wichtig, dass jede Zahlenreihe – auch wenn es nur eine ist – als eigener Array dem „series“-Array übergeben wird. Ansonsten kann das Diagramm nicht dargestellt werden.

var daten = {
  labels: [1990, 2000, 2010],
  series: [
    [3433695, 3382169, 3460725],
    [1652363, 1715392, 1786448],
    [1229026, 1210223, 1353186]
  ]
};

new Chartist.Bar(".ct-chart", daten);

Im Beispiel stellen wir die Bevölkerungszahlen der drei größten Städte für die Jahre 1990, 2000 und 2010 als Balkendiagramm dar. Dazu zeichnet „Chartist.js“ auf der X-Achse für jedes Jahr je drei Balken – einen Balken pro Stadt. Leider ist es nicht möglich, den einzelnen Balken eine Bezeichnung zuzuordnen, sodass aus dem Diagramm selbst nicht hervorgeht, welcher Balken für welche Stadt steht. Allerdings werden die einzelnen Balken pro Reihe automatisch unterschiedlich eingefärbt.

Balkendiagramm

Um aus dem Balkendiagramm ein Kurvendiagramm zu machen, muss lediglich aus „Chartist.Bar()“ der Aufruf „Chartist.Line()“ werden.

new Chartist.Line(".ct-chart", daten);

Im Beispiel werden die Daten dann als Kurvendiagramm gezeichnet.

Kurvendiagramm

Optionen für Diagramme

Je nach gewähltem Diagramm gibt es verschiedene Einstellungsmöglichkeiten, mit denen das Aussehen des Diagramm angepasst werden kann. Wer statt eines Seitenverhältnisses eine feste Größe für sein Diagramm möchte, kann diese angeben.

Alle Optionen werden wie auch die Diagrammdaten als Objektliteral einer Variablen übergeben.

var optionen = {
  width: "640px",
  height: "320px"
}

Anschließend übergibt man die Optionen dem „Chartist“-Objekt als dritten Parameter.

new Chartist.Line(".ct-chart", daten, optionen);

Die Einstellungsmöglichkeiten sind je nach Diagrammtyp unterschiedlich. So lassen sich bei Kurven- und Balkendiagrammen beispielsweise Maximalwerte für die Y-Achse angeben, sodass ein Diagramm innerhalb eines definierten Bereiches dargestellt wird.

var optionen = {
  low: 1000000,
  high: 4000000
}

Im Beispiel wird per „low“ und „high“ die dargestellte Spanne der Y-Achse so eingegrenzt, dass nur Werte zwischen einer und vier Millionen zu sehen sind.

Bei Tortendiagrammen gibt es die Möglichkeit, diese als Ring beziehungsweise Donut darzustellen.

var optionen = {
  donut: true,
  donutWidth: 50
}

Dazu wird der Parameter „donut“ auf „true“ gesetzt. Mit „donutWidth“ gibt man die Breite des Ringes angegeben. Statt einen ganzen Ring darzustellen, lässt sich auch nur ein Teilring zeigen. Sehr verbreitet ist die Darstellung eines Halbrings, wenn es um die Darstellung von Sitzverteilungen in Parlamenten geht.

var optionen = {
  donut: true,
  donutWidth: 50,
  startAngle: 270,
  total: 13200718
}

Dazu wird ein Startwinkel („startAngle“) für den Ring gewählt sowie die Größe („total“) der anzuzeigenden Daten. Ist der Wert für „total“ identisch mit der Summe der Zahlenreihe, werden die Daten als kompletter Ring dargestellt. Ist der Wert für „total“ doppelt so hoch wie die Summe der Zahlenreihe, werden die Daten als halber Ring dargestellt.

Halbring- beziehungsweise Donutdiagramm

Aussehen individualisieren

„Chartist.js“ vergibt für jede Kurve, jeden Balken und jedes Tortenstück automatisch eine Farbe. Wer sein Diagramm individuell einfärben will, kann für jedes Segment eine eigene Klasse definieren und so das Aussehen selbst beeinflussen.

var daten = {
  label: ["Berlin", "Hamburg", "München"],
  series: [
    {data: 3460725, className: "stadt1"},
    {data: 1786448, className: "stadt2"},
    {data: 1353186, className: "stadt3"}
  ]
};

Im Beispiel erhält jedes Segment eine eigene Klasse. Dazu weist man dem „series“-Array für jede Zahl einen eigenen Array mit je zwei Werten – „data“ für die Zahl und „className“ für die zu vergebene Klasse – zu.

Responsive Darstellung

Wer auf feste Breiten- und Höhenangaben für ein Diagramm verzichtet, hat schon mal eine gute Basis für eine responsive Darstellung, da sich das Diagramm immer an die Breite des Elternelementes anpasst. Dabei wird das Diagramm nicht statisch verkleinert. Die Linienstärke bei Kurvendiagrammen bleibt immer gleich. Auch die Schriftgröße wird beibehalten. Die Anzahl der dargestellten Werte auf der Y-Achse reduziert sich bei kleinerer Darstellung, so dass Linien nie zu dünn und Schriften nie zu klein werden.

Doch nicht immer ist das ausreichend. Gerade bei komplexen Diagrammen kann eine zu kleine Darstellung schon mal dazu führen, dass die Diagramme nicht mehr gut erkennbar sind.

Daher bietet „Chartist.js“ spezielle Einstellungen, die man mit Media Queries versieht und die je nach Größe von Browserfenster beziehungsweise Display oder nach Geräteorientierung aufgerufen werden.

var optionen_responsiv = [
  ["screen and (max-width: 640px)", {
    showLine: false,
    showArea: true
  }]
]

new Chartist.Line(".ct-chart", daten, optionen, optionen_responsiv);

Im Beispiel werden bei einer Auflösung von 640 Pixel und weniger die Linien eines Kurvendiagrammes ausgeblendet. Stattdessen wird die Fläche der Kurve dargestellt. Es können beliebig viele Media Queries mit entsprechenden Optionen gesetzt werden. So lässt sich das Aussehen für verschiedene Auflösungen und Geräteorientierungen anpassen.

Diagramme animieren

Mit der „animate()“-Methode kann man Diagramme recht einfach animieren. So ist es möglich, die Balken eines Diagramms von Null ausgehend in die entsprechende Höhe animieren zu lassen. Dazu wird per „draw“-Event eine Funktion aufgerufen, sobald das Diagramm bereitsteht.

new Chartist.Bar(".ct-chart", daten).on("draw", function(balken) {
  balken.element.animate({
    y2: {
      begin: 0,
      dur: 500,
      from: balken.y1,
      to: balken.y2
    }
  })
});

Im Beispiel werden einer Funktion per „balken“ die einzelnen Balken des Diagramms übergeben. Diese sind über das SVG-Element „<line>“ definiert. Animiert werden soll die Höhe der Balken. Die Höhe ist in der Eigenschaft „y2“ des „<line>“-Elementes festgelegt.

Über die Option „beginn“ lässt sich ein zeitlicher Versatz definieren, bevor die Animation begonnen werden soll. Der Parameter „dur“ gibt die Länge der Animation in Millisekunden vor. Die Optionen „from“ und „to“ geben die Werte zu Beginn und zum Ende der Navigation an. Zu Beginn soll „<line>“ eine Höhe von Null haben. Dies wird erreicht, indem die Eigenschaften „y1“ und „y2“ identische Werte haben.

So lassen sich sehr individuelle Animationen erstellen, da alle SVG-Elemente und -Attribute eines Diagramms manipuliert werden können. Man muss sich zuvor einfach mal den SVG-Quelltext anschauen, aus dem das Diagramm besteht.

Browsersupport und Links zum Beitrag

„Chartist.js“ wird von allen gängigen Browsern unterstützt. Der Internet Explorer ist mit Einschränkungen ab Version 9 dabei. Eine Support-Tabelle informiert sehr detailliert über die verschiedenen Browser.

Die Bibliothek bietet eine ganze Reihe guter und nützlicher Einstellungsmöglichkeiten und ist vor allem für die Verwendung auf modernen Browsern in Mobilgeräten geeignet. Hier und da sind einige Dinge verbesserungs- und ausbaufähig – was ja noch kommen kann. Insgesamt aber ist „Chartist.js“ eine sehr gute Lösung für die Darstellung zeitgemäßer und schicker Diagramme. Dass sie vollkommen kostenlos ist und zu jedem legalen Zweck verwendet werden kann, schmälert ihre Attraktivität sicherlich ebenfalls nicht…

Für einfachere Bedarfslagen kann auch Googles Chart API interessant sein, die sich Kollege Florian Sander für Dr. Web näher angesehen hat. Vitaly Friedman befasste sich mit Tools zur Diagrammerstellung im Allgemeinen.

(dpe)