Interaktive Grafiken mit con4gis Visualization

von Nils Ulfers

In 5 Schritten zur interaktiven Grafik

Interaktiver Content bietet viele Vorteile und wird daher immer gerne genutzt. Gerade interaktive Grafiken und Diagramme können dem Nutzer helfen, komplexe Zusammenhänge einfacher zu verstehen. Zusätzlich verbringen die Nutzer mehr Zeit auf Deiner Seite. In der folgenden Schritt-für-Schritt-Anleitung erklären wir Dir, wie Du mithilfe von con4gis in 5 einfachen Schritten zur interaktiven Grafik auf Deiner Contao Website gelangst.

In unserem Visualization-Bundle hast Du die Auswahl zwischen verschiedenen Diagrammen und Grafiken:

verschiedene Diagramme und Grafiken

 

  • Liniendiagramm
  • Kurvendiagramm
  • Kreis-/Donutdiagramm
  • Manometer
  • einfaches Gantt-Diagramm

Schritt 1 - Installieren von con4gis-Visualization

con4gis-Visualization und alle anderen con4gis-Bundles kannst Du über den Contao-Manager oder via Composer installieren. Im Manager trage dazu einfach con4gis oder Visualization in das Suchfeld des Contao-Managers ein (Menüpunkt Entdecken). Via Composer: composer require con4gis/visualization

Schritt 2 - Vorbereitung und Funktionsweise

Nachdem Du con4gis-Visualization installiert hast, kannst Du die Erweiterung im Contao Backend über das Dashboard ansteuern. Mit dem Sternchen-Icon kannst Du Visualization direkt im linken Menü des Contao-Backends anzeigen lassen. Dort hast Du dann zwei neue Menüpunkte „Grafikelemente“ und „Grafiken“.

Im Menüpunkt Grafikelemente werden Deine Daten eingetragen, dort wählst Du auch aus, ob Dein Element ein Teil eines Manometers, Linien-, Kurven-, Kreis- oder Gantt-Diagramms sein soll. Grafikelemente fungieren sozusagen als Bausteine Deiner Grafik. Du ordnest einzelnen oder mehreren Elementen x- und y-Werte, einen Elementtyp, eine Farbe und weitere Eigenschaften zu.

Im Punkt Grafik fügst Du dann Deine Grafikelemente zu einer Grafik zusammen. Hier legst Du alle wesentlichen Einstellungen für die Darstellung der Grafik fest.

Schritt 3 - Ein Grafikelement erstellen

Wir starten mit den Grafikelementen und fügen ein neues Grafikelement hinzu. Als Beispiel starten wir mit einem Liniendiagramm. Dafür musst Du in den Einstellungen als Elementtyp "Linie" auswählen. Als Herkunft der Daten wählst Du Eingabe aus. Jetzt kannst Du hier Deine Werte selbst eingeben und über das Plus-Icon weitere Werte hinzufügen.

Du hast auch die Möglichkeit Daten über eine Tabelle zu laden, zusammen mit con4gis-Import kannst Du so auch CSV-Dateien ganz einfach in eine interaktive Grafik verwandeln.

Schritt 4 - Grafik erstellen

Nachdem Du die Daten eingepflegt hast, kannst Du nun die Grafik erstellen. Unter dem Menüpunkt Grafik legen wir eine neue Grafik an. Jetzt musst Du nur noch Dein zuvor angelegtes Grafikelement auswählen. Des Weiteren hast Du noch viele weitere Möglichkeiten wie zum Beispiel das Koordinatensystem anpassen oder einen / mehrere Wertebereiche definieren.

Schritt 5 - Einbindung im Frontend ... Man sehe und staune

Zur Einbindung Deiner Grafik im Frontend fügst Du dem gewünschten Artikel ein neues Inhaltselement hinzu. Als Elementtyp wählst Du unter “con4gis” “Grafik” aus. Im Grafik Dropdown-Menü kannst Du dann Deine zuvor angelegte Grafik auswählen.

 

Zurück