Symbolbild Dokumentation con4gis-Visualisation

Dashboard Icons

Icon Erklärung con4gis - Visualization

  • Grafikelemente erstellen und verwalten
  • Grafiken erstellen und verwalten

Daten für grafische Aufbereitung erfassen oder importieren

Beispiel Grafiken Backend-Modul
Zum Vergrößern Bild bitte anklicken

Backend-Module Grafiken

Zunächst benötigst Du con4gis-Visualization in Deinem Contao. Nach der Installation erscheinen im Backend in der linken Navigation unter "CON4GIS - Grafiken" die neuen Menüpunkte:

  • Grafiken
  • Grafikelemente

1. Grafikelemente anlegen

Beispielvorgaben in Abschnitten "Allgem. Einstellungen"
Zum Vergrößern Bild bitte anklicken

Grafikelemente sind sozusagen die Bausteine Deiner Grafik, hier ordnest Du einzelnen oder mehreren Elementen x- und y-Werte, einen Elementtyp, eine Farbe und weitere Eigenschaften zu.

In der Übersicht siehst Du alle angelegten Elemente und welcher Grafik sie zugeordnet sind.

Allgemeine Einstellungen

Als Erstes fügst Du ein neues Grafikelement hinzu und füllst die Felder „Bezeichnung“ für das Backend sowie „Titel“ für das Frontend aus. Anschließend kannst Du wählen, in welcher „Farbe“ das jeweilige Grafikelement im Frontend dargestellt werden soll, damit es sich perfekt in Deine Seite einfügt.

 

Beispielvorgaben in Abschnitten Typ & Datenherkunft" für Grafikelemente erstellen
Zum Vergrößern Bild bitte anklicken

Typ & Datenherkunft

Als Erstes wählst Du die den Elementtyp Deiner Daten. Zur Verfügung stehen Dir Linien-Diagramm, Kurven-Diagramm, Kuchen/Torten-Diagramm, Balken/Säulen-Diagramm, Ring/Donut, Manometer oder auch Gantt-Diagramm. In unseren Beispielen gehen wir genauer auf die einzelnen Typen ein.
Wichtig ist natürlich die „Herkunft“ der Daten zu definieren. Dir stehen dabei drei Möglichkeiten zur Verfügung „manuelle Eingabe“, als .csv-Datei und manuelle Eingabe von „Zeiträumen“ für ein Gantt-Diagramm.


Der Import einer .csv-Datei über den con4gis-Import Baustein wird im Schritt „Importdaten anlegen mit con4gis-Import“ beschrieben.

 

Beispielvorgaben in Abschnitten Datentransformation für Grafikelemente erstellen
Zum Vergrößern Bild bitte anklicken

Datentransformation

Im Bereich Datentransformation kannst Du Deine Daten anpassen. Du kannst mit der Checkbox „Identische X-Werte gruppieren“ alle auf einem Punkt liegenden X-Werte zusammenfassen. Im Feld „Min. Anzahl für Gruppierung“ können dann genaue Angaben gemacht werden, ab wie vielen identischen Werten Deine X-Werte gruppiert werden.

Da Du später auch die Möglichkeit hast eine zweite Y-Achse anzeigen zu lassen, kannst Du im Feld „Y-Achsen-Auswahl“ bestimmten auf welcher der beiden Y-Achsen die Werte dieser Grafik angezeigt werden sollen.

Experteneinstellungen

In den Experteneinstellungen lassen sich eigene Tooltips für das gerade erstellte Element anlegen. Hier sind sogar Insert-Tags möglich. Die Tooltips werden im Frontend per Mouseover am Element angezeigt.

Wie die Darstellung der Grafik im Frontend definiert wird erfährst Du im nächsten Artikel.

Darstellung der Grafik definieren

Allgemeine Einstellungen

Beispiel Allgemeine Einstellungen in Grafik definieren
Zum Vergrößern Bild bitte anklicken

Im Menüpunkt „Grafiken“ legen wir jetzt alle wesentlichen Einstellungen für die Darstellung der Grafik fest. Wir fügen über die gleichnamige Schaltfläche "eine neue Grafik hinzu“, geben ihr eine „Bezeichnung“, die nur fürs Backend relevant ist. Da wir im vorigen Schritt „Nominalwerte“ als „Charakter der x-Werte“ eingetragen haben, wählen wir diese hier ebenfalls aus. Alternativ können hier „Zeitwerte“ ausgewählt werden, diese sind wichtig, wenn ein Datum oder eine Zeitangabe als X-Wert verwendet wird.

Jetzt können wir das von uns zuvor erstellte Grafikelement auswählen. Es besteht die Option für eine Grafik mehrere Grafikelemente einzubinden, um zum Beispiel ein Säulendiagramm mit einem Kurvendiagramm zu verbinden oder die einzelnen „Tortenstücke“ (Grafikelemente) als komplettes Tortendiagramm darzustellen.

Wertebereiche

Beispiel Einstellungen im Abschnitt Wertebereich in Grafik definieren
Zum Vergrößern Bild bitte anklicken

In diesem Abschnitt kannst Du verschiedene Wertebereiche einstellen, die dann in Frontend per Klick wählbar sind. Hierfür wählen wir eine Bezeichnung und zwei Werte auf der X-Achse, die die Grenzen bilden. Anschließend müssen wir noch eine Beschriftung für den „Button für alle Werte“ wählen, nur wenn dieser gefüllt ist, werden die Buttons eingeblendet. Optional können wir auch die Positionen der Button über die beiden „Position der Buttons“ Select-Menüs auswählen.

Gibt es eine große Datenmenge und wir haben den Wertebereich eingeschränkt, so können wir mit der Checkbox „Daten laden, die außerhalb definierter Wertebereich liegen“ nur die Daten laden, die auch im eingeschränkten Bereich gezeigt werden.
Im letzten Feld kannst Du die Nachkommastellen des Wertebereichs anpassen. Es werden nur dann Nachkommastellen angezeigt, wenn Deine Werte auf der X-Achse auch Nachkommastellen besitzen. Nullen werden hier nicht als Nachkommastellen berücksichtigt, ist eine Zahl Deines Wertebereichs zum Beispiel „1“ wird auch nur diese Zahl ausgegeben und nicht „1,000“.

Koordinatensystem

Beispiel Einstellungen im Abschnitt Koordinaten in Grafik definieren
Zum Vergrößern Bild bitte anklicken

Hier können alle wichtigen Einstellungen bezüglich des Koordinatensystems definiert werden. Du kannst zum Beispiel die X-und/oder Y-Achse ein-und ausblenden, die Achsen vertauschen oder die Y-Achse invertieren. Hier hast du auch die Möglichkeit die zweite Y-Achse einzublenden, falls du in den Grafikelementen Informationen dazu hinterlegt hast.

Wasserzeichen

Beispiel Einstellungen im Abschnitt Wasserzeichen in Grafik definieren
Zum Vergrößern Bild bitte anklicken

Hier kannst Du Deiner Grafik ein Wasserzeichen hinzufügen, welches dann im Frontend angezeigt wird. Außerdem hast Du noch die Möglichkeit Angaben zur Größe, Position und Bildtransparenz des Wasserzeichens zu machen.

Experteneinstellungen

Beispiel Einstellungen im Abschnitt Experteneinstellungen in Grafik definieren
Zum Vergrößern Bild bitte anklicken

In den Experteneinstellungen hast Du viele Möglichkeiten Deine Grafik noch ansprechender und interaktiver zu gestalten.

Die Checkbox „Zoom aktivieren“ ermöglicht Dir im Frontend mit dem Scrollrad in die Grafik hineinzuzoomen. Auch die Legende lässt sich per Checkbox ein und ausblenden.
Im Feld „CSS Klasse“ kannst Du eine zusätzliche CSS Klasse setzen, um Deine Grafik individuell zu stylen. Als Beispiel haben wir für Gantt-Diagramme die Klasse „c4g-gantt“ vorbereitet.
Mit der Checkbox „Minigrafik darstellen“ kannst Du Dir unter Deiner Grafik eine Miniatur-Version anzeigen lassen, die Du als Navigation der eigentlichen Grafik nutzen kannst. Anschließend kannst Du die Höhe der Minigrafik festlegen und entscheiden, ob Du die X-Achse in der Minigrafik ausblenden möchtest.

Auch Gitterlinien lassen sich für die X- und Y-Achse einfach per Checkbox ein- und ausblenden.

Beispiel Einbinden der Grafik in einen Artikel
Zum Vergrößern Bild bitte anklicken

2. Grafik im Artikel einbinden

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.

Fragen zu con4gis-Visualization?

Sehr gerne. Der direkte "Draht" zu den Entwicklern führt über unser Supportforum zum Visualization-Bundle.