Auf die Schnelle: Charts für TYPO3-Websites

Spätestens seit es Excel gibt gehört es zum guten Ton, Zahlen nicht einfach als Zahlen zu präsentieren, sondern in übersichtliche und visuell attraktive Diagramme zu verwandeln. Dieser Artikel befasst sich mit der Fragestellung, wie man solche Diagramme (engl. Charts) mit bescheidenem Aufwand auf eine TYPO3-Website bringt.

Variante 1: Excel & Co.

Wenn die Zahlen, die man visualisieren will, selten oder nie ändern, dann sollte man gar nicht erst in die Ferne schweifen: Mit Excel erzeugte Grafiken als Bild in die Website einzubauen ist nämlich allemal schneller als irgend eine Chart Engine in TYPO3 zu installieren und deren Handhabung zu erlernen. Nebst Excel liefert beispielsweise auch PowerPoint brauchbare Charts, und natürlich gibt es dank OpenOffice.org Alternativen mit Open-Source-Lizenz.

Variante 2: Google Chart API

imageAuch unsere zweite Variante ist nicht TYPO3-spezifisch: Für gelegentlich ändernde Zahlen bietet sich die Google Chart API an. Das Prinzip ist einfach: Man ruft über die URL http://chart.apis.google.com/chart Googles Chart-Engine auf und gibt alle Informationen über das gewünschte Diagramm im Query-String mit. Die obige Grafik beispielsweise kommt zurück, wenn Sie folgende URL aufrufen:

http://chart.apis.google.com/chart?
cht=p3&
chd=t:48.7,36.2,16.6,19.3&
chs=300×100&
chl=Migros|Coop|Denner|Manor|Volg&
chco=FFB900,DF3A00,535EDF,23BF90

Diese Lösung hat Vor- und Nachteile: Obige URL kann man in TYPO3 problemlos per Content-Element vom Typ HTML in eine Seite einbauen. Mit anderen Worten: Ohne ein Extension installieren zu müssen hat man auf diese Weise Diagramme erstellt, die über das TYPO3-Backend editierbar sind. Allerdings: Die obige URL zu erstellen bzw. zu manipulieren ist eine ziemlich technische Angelegenheit, die man normalen TYPO3-Redaktoren eher nicht zumuten möchte. Immerhin gibt es im Web zahlreiche Websites, wo man solche URLs über ein hübsches Interface erstellen kann (z.B. GCUI).

Variante 3: JPGraph

image Der dritte Weg führt über die Extension jpgraph, welche die gleichnamige Grafik-Library einbindet. Die erzeugten Diagramme wirken vielleicht etwas altbackener als bei Google, dafür ist man autonom und kann das Chart über ein übersichtliches Formular im TYPO3-Backend konfigurieren.

Für Standardanwendungen reicht diese Lösung. Man muss sich allerdings bewusst sein, dass diese Extension nur einen Bruchteil der Funktionalität der mächtigen Library erschliesst und dass lange nicht jede Option pro Chart-Typ im TYPO3-Backend angeboten wird. Bei gewissen Chart-Typen fehlen sogar ganz offensichtlich einzelne Parameter. jpgraph wird im TYPO3 Extension Repository als Alpha-Version geführt, und das sollte man durchaus ernst nehmen. Wenn man das Change Log der Extension studiert, wird man zudem feststellen, dass diese Extension nicht mehr wirklich aktiv weiterentwickelt wird.

SIMILE Timeplot: Aus Datenreihen Kurvendiagramme erzeugen

image

Mit SIMILE Timeplot kann man aus Datenreihen Kurvendiagramme erzeugen und diese direkt in die eigene Website einbinden. Das Vorgehen ist sehr ähnlich wie bei Google Maps: Etwas JavaScript reicht, um die Datenquelle zu spezifizieren und das Aussehen der Grafik zu definieren. Und weil die Grafik bei jedem Seitenaufruf neu gezeichnet wird, kann man auch Realtime-Daten darstellen – etwa Temperaturverläufe, Aktienkurse oder Umsatzzahlen.

image

Ähnliches kann man auch mit der Google Chart API (obige Abbildung) erreichen – Prinzip und Resultat sind allerdings unterschiedlich. Ein Google Chart wird allein durch den Aufruf einer URL mit einem mehr oder minder komplexen QueryString erzeugt, Timeplot erfordert JavaScript. Google Chart kann eine ganze Reihe unterschiedlicher Diagrammtypen generieren (z.B. Balken-, Torten- und Mengendiagramme), Timeplot ist auf Kurvendiagramme über einer Zeitachse limitiert. Google Chart liefert rein PNG-Grafiken ohne Interaktivität aus – Timeplot blendet beim Mouseover die aktuellen Daten ein und öffnet per Mausklick Infofenster mit weiterführenden Informationen. Und last but not least ist Timeplot Open Source (BSD Licence), während die Google Chart API zwar kostenlos, aber nur gemäss diesen Terms of Service genutzt werden darf.

css.php