CHARTIST.js - Graphen und Charts ohne Overhead

Graphen und Charts sind längst keine Domäne von Tabellenkalkulationen wie Excel mehr. Alle geläufigen Browser beherrschen die Darstellung von SVGs und können mit ein wenig Javascript aussagekräftige Grafiken live erstellen. Unser Favorit ist CHARTIST.JS

Eine aussagekräftige Grafik ist viel besser zu erfassen als eine schnöde Tabelle.  Früher muss man dafür zu Photoshop greifen und den Chart als Grafik einbinden. Was aber wenn die Daten dynamisch erzeugt oder live aktualisiert werden sollen?

Im Netz gibt es eine Fülle von Javascript Erweiterungen die Vor- und Nachteile haben.

  • Manche sind kommerziell oder blenden einen Link auf die Entwicklerseite ein
  • Manche sind 100te KB  groß und bestehen aus vielen Einzeldateien
  • Manche benötigen andere Fameworks wie JQuery oder Angular

SVG oder Scalable Vector Graphics ist mittlerweile DER Standard für Vektorgrafiken. Das XML - Format hat Ähnlichkeiten mit HTML und ließ sich daher gut in Browser integrieren. Zum Bearbeiten gibt es Programme wie Inkscape. Notfalls reicht aber auch ein Texteditor.

chartistWir haben und nach einiger Recherche für CHARTIST.JS entschieden

CHARTIST wirbt mit der Aussage 10KB (gepackt) keine Abhängigkeit. So ganz stimmt das nicht, da auch noch ein Stylesheet geladen werden muss aber verglichen mit z.B. der Google Library ist CHARTIST winzig. Umso erstaunlicher ist der Funktionsumfang und Komfort. Lediglich auf 3D Spielerei muss verzichtet werden.

Das Einbinden in von CHARTIST ist denkbar einfach. JS und CSS Datei laden und die Daten in ein Javascript Array ausgeben.
Danach fügt man ein DIV Element an.

<link rel="stylesheet" href="/chartist/dist/chartist.min.css">
<script src="/chartist/dist/chartist.min.js"

Der Aufruf ist fast immer gleich.

new Chartist.ART('#ID',DATA,OPTIONEN)

ART ist die Art des Gaphen z.B. .Pie (Torten), .Bar (Balken), .Line (Linien)

#ID Die Id oder der Selektor des div Containers

DATA das Array mit den Daten

OPTIONEN ein optionales Array mit Konfigurationsoptionen (Siehe Doku bei Chartist)


Ein Beispiel

var data = {
    labels: ["Äpfel","Birnen","Bananen"],
        series: [[23,46,12],[42,16,13],[12,18,6]]
};
 
new Chartist.Line('#chart1',data,{fullWidth: true, chartPadding: {right: 60}});
 

CHARTIST ist Open  Source mit einer MIT und "Do Whatever" Lizenz und lässt sich problemlos auch für kommerzielle Projekte verwenden.