Diagramme sind äußerst hilfreich, um alle möglichen Daten zu visualisieren und damit verständlicher zu machen. Für Joomla werden diverse Erweiterungen in diesem Bereich angeboten. Sehr vielversprechend kommt das kostenlose Plugin Aimy Charts daher, welches ganz sicher eine Review verdient hat.
Joomla Erweiterung für Diagramme!
Aimy Charts ist ein Plugin für Joomla 3.x und kostenfrei erhältlich. Mit der Extension lassen sich unterschiedlichste Daten visuell ansprechend darstellen. Dieser Testbericht soll zeigen, was möglich ist.
Dabei bietet Aimy Charts folgende HTML5 Diagramm-Typen:
- Tortendiagramm
- Ringdiagramm
- Balkendiagramm
- Liniendiagramm
Nach dem Download, welcher glücklicherweise ganz ohne Anmeldung oder Registrierung möglich ist, erfolgt die Installation im Joomla Backend unter Erweiterungen -> Erweiterungen -> Paketdatei hochladen, auf dem üblichen Wege.
Obwohl diese Erweiterung durchaus bei Joomla.org im Extensionsbereich angeboten wird, ist sie leider nicht über das Feature "Aus Webkatalog installieren" auffindbar. Dies ist uns in diversen Tests bereits häufiger aufgefallen. Um gute und kostenfreie Erweiterungen zu finden, sollte man sich also nicht unbedingt auf diese Joomla-Möglichkeit verlassen.
Hier wurde nun Version 3.4.1 erfolgreich installiert. Die angebotenen Dokumente ermöglichen einen leichten Einstieg in die Extension.
Gleich nach der Installation kann über Schaltflächen das Handbuch direkt online gelesen, oder als PDF heruntergeladen werden. Leider nur in englischer Sprache.
Natürlich empfiehlt es sich jetzt, den linken Button für die Aktivierung und Konfiguration des Plugins zu betätigen. Oder man geht den Umweg über Erweiterungen -> Plugins.
Daraufhin öffnet sich das entsprechende Fenster für die Einstellungen.
Wie man sieht, ist hier nicht viel zu beachten. Im ersten Schritt werden die standardmäßige Breite und Höhe für die generierten Diagramme in Pixelwerten eingetragen. Hier werden einfach nur Zahlen eingetragen, ohne "px".
Ein animiertes Diagramm kann sehr ansprechend wirken. Und natürlich soll diese Option hier im Test aktiviert sein.
Wurde der Status noch auf "Aktiviert" gesetzt, ist die Grundkonfiguration auch schon erledigt und das Fenster kann über den Button "Speichern & Schließen" verlassen werden.
Übrigens verwendet Aimy Charts die JavaScript-Bibliothek Chart.js von Nick Downie. Neben JavaScript kommt hier reines HTML5 zum Einsatz. Somit kann trotz ansprechender Animation völlig auf das inzwischen ungern verwendete Flash verzichtet werden.
Wie bei Joomla-Plugins üblich, arbeitet auch Aimy Charts mit speziellen Tags, welche zb. über Inhalt -> Beiträge -> Neuer Beitrag, innerhalb eines neuen Artikels verwendet werden können.
Den Anfang soll ein Tortendiagramm machen, welches Datenbereiche bekanntermaßen wie einzelne Kuchenstücke repräsentiert. An passender Stelle im Text wird also das spezielle öffnende und schließende Tag eingetragen. Für das Tortendiagramm wären das folgende Einträge:
{AimyChartsPie} {/AimyChartsPie}
Innerhalb dieser beiden Tags müssen jetzt zwingend ein Entity Name und ein numerischer Wert definiert werden. Der Name wird später auch angezeigt, wenn man mit der Maus über das entsprechende Diagrammfeld fährt.
Optional kann zusätzlich noch ein Farbcode verwendet werden. Wird kein Farbcode angegeben, verwendet das Plugin automatisch einen Standardwert für jedes Feld. Jeder dieser Tags muss dabei undbedingt in einer eigenen Zeile stehen, nicht hintereinander. Außerdem muss für jedes Datenfeld mit Ausnahme der Farben, ein Semikolon verwendet werden.
Das könnte je nach verwendetem Editor in Joomla zum Problem werden, weil hier eventuell nach dem Speichern immer alles in eine Zeile gepackt wird. Hier ist es oft hilfreich, in Joomla unter Benutzer -> Benutzer und einem Klick auf den Namen des Benutzers, unter dem Reiter "Basiseinstellungen", den Editor auf "Editor - Keine" zu stellen.
Nach dem Speichern können dann vernünftig im Beitrag beliebig viele Diagramme eingepflegt werden. Der Code für das erste Beispiel mit Tortendiagramm könnte zb. so aussehen:
<h3>Ein Tortendiagramm!</h3>
<p>Erstes Beispiel mit Tieren:</p>
<p>{AimyChartsPie}
Hund; 35; #88A417
Katze; 40; #211B41
Maus; 20; #DD8F00
{/AimyChartsPie}</p>
Dabei erhält man dann folgende visuelle Darstellung:
Es lassen sich also beliebige Namen vergeben. Dahinter folgen Werte, welche natürlich für die Ausmaße der Tortenstücke verantwortlich sind. Diese Angaben können sowohl Prozentwerte, als auch sonstige numerische Werte repräsentieren. Ganz, wie es einem beliebt und anscheinend muss es nicht in 100% aufgehen. Trotzdem entsteht keine Lücke bei der Darstellung. Schließlich folgt ein im Web üblicher hexadezimaler Farbwert, welcher auch in der Kurzschreibweise verwendet werden kann. Also zb. #000 für Schwarz.
Farben können auch komplett weggelassen werden. Dann präsentiert sich das Diagramm in einem dunklen Grau, was nicht wirklich schön aussieht. Die relativ einfache und kurze, aber wirkungsvolle Animation, startet bei jedem neuen Seitenaufruf.
Dies war jetzt das einfachste Beispiel für ein Diagramm. Eine weitere Möglichkeit ist das Ringdiagramm, welches im Prinzip auf die selbe Art definiert wird. Lediglich das Tag ändert sich wie folgt:
{AimyChartsDoughnut} {/AimyChartsDoughnut}
Also einfach die englische Bezeichnung für ein Ringdiagramm. Der Code würde zb. so aussehen:
<h3>Ein Ringdiagramm!</h3>
<p>Zweites Beispiel mit Browsern</p>
<p>{AimyChartsDoughnut}
Firefox; 65; CadetBlue
Internet Explorer; 30; Chartreuse
Google Chrome; 5; #DD8F00
{/AimyChartsDoughnut}</p>
Wie hier ersichtlich ist, muss es nicht unbedingt ein hexadezimaler Farbcode sein. Wer die Bezeichnungen kennt, kann hier auch direkt den passenden Namen für eine Farbe verwenden. Und auch die Angabe von RGB-Farben inklusive Alphakanal für die Transparenz, zb. rgb(0,0,255,0.5) ist möglich. Das Ringdiagramm sieht dann so aus:
Solange die Maus nicht über einem Feld steht, wird auch nichts angezeigt. Aber das Plugin Aimy Charts kann noch viel mehr.
Sehr häufig werden Balkendiagramme benötigt. Natürlich geht auch das, wenn es auch etwas komplizierter ist. Das liegt einfach an den unterschiedlichen weiteren Möglichkeiten, um Daten zu repräsentieren.
Das notwendige Tag für ein Balkendiagramm ist denkbar einfach zu merken:
{AimyChartsBar} {/AimyChartsBar}
Für das Balkendiagramm muss jetzt zusätzlich ein Block Name ganz zu Anfang innerhalb der Tags für die X-Achse definiert werden. Die Y-Achse wird durch den bisher schon verwendeten numerischen Wert eingestellt. Der Rest bleibt wie gehabt, wobei es noch eine Besonderheit gibt. Aber erst mal ein möglicher Codeabschnitt:
<h3>Ein Balkendiagramm!</h3>
<p>Drittes Beispiel mit Autos:</p>
<p>{AimyChartsBar}
Verkauf 2014; Mercedes; 44; Silver
Verkauf 2014; BMW; 26; SteelBlue
Verkauf 2014; VW; 30; Crimson
Verkauf 2015; Mercedes; 34;
Verkauf 2015; BMW; 16;
Verkauf 2015; VW; 50;
{/AimyChartsBar}</p>
Die Datenfelder beginnen also mit dem Block Name. Hier "Verkauf 2014". Dann folgt wieder der Entity Name, der numerische Wert und die Farbe.
Da hier ein Vergleich mit dem Vorjahr stattfinden soll, werden die ersten drei Zeilen einfach wiederholt und die Bezeichnung des Block Name entsprechend angepasst. Farbangaben sind dann nicht mehr nötig. Es werden automatisch die bereits definierten Farben übernommen. Gibt man bewusst nochmal eine andere Farbe an, wird auch die zuerst definierte Farbe überschrieben. Macht also keinen Sinn. Das Balken-Diagramm sieht dann so aus:
Soll kein Vergleich stattfinden, kann man natürlich auch nur mit den ersten drei Zeilen arbeiten. Dann erscheinen eben auch nur drei Balken. Und es lassen sich auch weitere Zeilen hinzufügen, zb. für neun Balken, wenn drei Jahre verglichen werden sollen. Hier sind also jede Menge Kombinationen denkbar.
Damit sind der Möglichkeiten aber noch nicht genug. Als Blockname können auch die Produkte, wie hier die Autos verwendet werden. Dann könnte der Code folgendermaßen geschrieben werden:
<h3>Ein weiteres Balkendiagramm!</h3>
<p>Viertes Beispiel mit Autos:</p>
<p>{AimyChartsBar}
Mercedes; Verkauf 2014; 44; SeaGreen
Mercedes; Verkauf 2015; 49; YellowGreen
BMW; Verkauf 2014; 26;
BMW; Verkauf 2015; 31;
VW; Verkauf 2014; 30;
VW; Verkauf 2015; 20;
{/AimyChartsBar}</p>
Hier werden für jedes Auto zwei Balken erzeugt. Entsprechend werden auch nur einmal die Farben für Verkauf 2014 und Verkauf 2015 angegeben. Dabei kommt folgendes Ergebnis zustande:
Soll nur ein Balken pro Auto angezeigt werden, wird zb. nur Verkauf 2014 und eine Farbe definiert. So sind wirklich viele Möglichkeiten gegeben, um Daten in unterschiedlichster Weise darzustellen.
Aber auch jetzt ist dieses Plugin noch nicht am Ende. Es gibt auch noch Liniendiagramme. Dafür wird folgender Tag verwendet:
{AimyChartsLine} {/AimyChartsLine}
Die Vorgehensweise für diese Diagrammart ist abgesehen vom Tag völlig identisch mit dem Balkendiagramm.
<h3>Ein Liniendiagramm!</h3>
<p>Fünftes Beispiel mit Autos:</p>
<p>{AimyChartsLine}
Verkauf 2014; Mercedes; 44; SeaGreen
Verkauf 2014; BMW; 26; YellowGreen
Verkauf 2014; VW; 30; Crimson
Verkauf 2015; Mercedes; 34;
Verkauf 2015; BMW; 16;
Verkauf 2015; VW; 50;
{/AimyChartsLine}</p>
Daraus entsteht jetzt folgendes:
Damit lassen sich hervorragend Daten über zeitliche Abstände präsentieren. Würden hier mehr als die beiden Block Names verwendet, würde sich die Kurve entsprechend krümmen.
Jedes dieser generierten Diagramme befindet sich innerhalb eines Div-Containers, welche stets die Klasse "AimyCharts" haben. Zusätzlich ist eine weitere Klasse zugewiesen, welche der Bezeichnung des verwendeten Tags entspricht.
Desweiteren enthält jedes Diagramm noch eine eindeutige ID beginnend mit 1. Jedes weitere Diagramm enthält die nächsthöhere Nummer. Somit kann jedes Diagramm via CSS nochmal individuell gestaltet werden. Ein Beispiel für den CSS-Selektor wäre zb. div.AimyCharts AimyChartsPie #AimyChart1
Das Joomla Plugin Aimy Charts lässt kaum Wünsche offen und hat bei allen Tests sehr gut funktioniert. Schön wäre es, wenn auch ohne Hovern mit der Maus, Bezeichnungen für Produkte usw. besser zur Geltung kommen würden. Die Extension ist damit sehr wertvoll und mächtig, wenn auch nicht ganz perfekt. Aber Potential für Verbesserungen gibt es ja immer.
Insgesamt ist Aimy Charts wirklich sehr empfehlenswert.
Hier geht es zum Aimy Charts - Download.
Für den Download der kostenlosen Erweiterung ist keine Anmeldung bzw. Registrierung notwendig. Außerdem bietet die Seite auch eine sehr gute und umfangreiche englische Dokumentation, sowie ein Video-Tutorial.
