Willkommen zu unserem Gruppierten Balkendiagramm-Tutorial!

In diesem Tutorial zeigen wir dir, wie du einfach und schnell gruppierte Balkendiagramme mit unserem 23° Atlas Tool erstellen kannst.

Mit gruppierten Balkendiagrammen kannst du effektiv Daten visuell darstellen und komplexe Informationen auf einen Blick vermitteln. Du lernst in diesem Tutorial Schritt für Schritt, wie du diese Diagramme erstellst, bearbeitest und für eine präzise Datenanalyse nutzen kannst. Los gehts!

In diesem Tutorial werden wir das folgende gruppierte Balkendiagramm gemeinsam erstellen: 

Wie erstelle ich ein gruppiertes Balkendiagramm, was sind die ersten Schritte?

Nachdem du dich im Atlas eingeloggt hast, hast du zwei Möglichkeiten, ein gruppiertes Balkendiagramm zu erstellen:

1. Oben rechts hast du den Erstellen Button, das dich zu den nächsten Schritten weiterleitet.
2. Auf der linken Seitenleiste kommst du mit dem + Create Button ebenfalls zu den verschiedenen Visualisierungen und kannst hier die passende Option für dich auswählen.
3. CSV-Upload: Hierfür klickt man auf die drei Punkte oben rechts im Tabellenfenster. Das gewünschte CSV kann man nun entweder in das gestrichelte Kästchen Drag’n Drop.csv hineinziehen oder aber man erreicht durch einen Klick auf das gestrichelte Kästchen Drag’n Drop.csv den eigenen Filemanager, um die gewünschte CSV Datei über diesem Wege zu importieren.
4. Manuelle Dateneingabe: Die manuelle Dateneingabe funktioniert ähnlich wie bei Excel oder anderen Programmen. Texte und Zahlen können einfach in die Zellen geschrieben werden.
5. Copy/Paste: Natürlich können die Daten auch ganz einfach in die Datentabelle des gruppierten Balkendiagramms kopiert werden. Hier kannst du auch die Kopfzeile kopieren und einfügen.

Dateneditor

Nachdem du "Gruppiertes Balkendiagramm" ausgewählt hast, werden dir Beispiele angezeigt. Auf der rechten Seite wird dir der Dateneditor eingeblendet. Die linke Spalte ist die Label-Spalte und wird auf der Beschriftungsachse angezeigt. Die rechten 2 Spalten stellen die Wertespalten dar und beinhalten Zahlen, welche auf der Werteachse angezeigt werden. Der grundsätzliche Unterschied zu dem herrkömmlichen Balkendiagramm sind die Anzahl der Wertespalten.

Die Daten in der Vorlage kannst du mit deinen eigenen Daten ersetzen. Dafür hast du drei Möglichkeiten:

In unserem Beispiel laden wir eine CSV-Datei hoch. Nachdem du die Daten hochgeladen hast, wird die Grafik dementsprechend angepasst. Hier siehst du, wie sich das gruppierte Balkendiagramm verändert.

Oberhalb des Dateneditors siehst du zwei Eingabefelder. Hier kannst du die Spalten für die Werte- und Beschriftungs-Achse(n) zuweisen. Jedes Diagramm benötigt mindestens eine Beschriftungsspalte (Text oder Zeit) und eine Spalte mit zugehörigen Werten (Werte-Spalte).

Die Beschriftungs- und die Wertespalten sind frei wählbar. In einem gruppierten Balkendiagramm kannst du mehr als eine Wertespalte auswählen (mit Komma- oder Bindestrich getrennt). Das 23° Atlas Tool erkennt selber, welche Spalten Wertespalten sind.

Long und Wide Datenformat

Bei einem Wide Format siehst du mehrere Wertespalten einzeln. Bei einem Long Format werden alle Wertespalten zu einer Gruppe zusammengefasst, wodurch ein weiteres Eingabefeld eingeblendet wird für die Gruppe.

Spalten entfernen oder hinzufügen

Das Hinzufügen und Entfernen von Spalten funktioniert über das Spaltenmenü. Man erreicht das Spaltenmenü entweder über einen Rechtsklick mit der Maus oder aber durch einen Klick auf das kleine Dreieck am oberen Ende der Spalten. Eine Spalte kannst du verschieben, indem du die gesamte Spalte markierst und diese in die gewünschte Richtung ziehst.

Reihenfolge der Spalteninhalte ändern

Per default werden die Daten so dargestellt, wie du sie hochlädst oder manuell eintippst. Natürlich kannst du dann die Spalte selber sortieren, indem du auf das Spaltenmenü klickst und auf Spalte sortieren aufsteigend oder Spalte sortieren absteigend klickst. Du kannst das auch mit einem Klick auf den Buchstaben machen, ohne das Spaltenmenü öffnen zu müssen. Die Grafik ändert sich je nach deiner bevorzugten Sortierung.

Daten in der Datentabelle filtern

Das filtern hilft dir dabei, wenn du nur eine bestimmte Altersgruppe, bestimmte Jahre oder Werte anzeigen möchtest. Im Spaltenmenü findest du die Auswahl Filter erstellen. In diesem Beispiel, stellen wir die unteren Zehn Dateneinträge dar.

Falls du einen Filter löschen möchtest, kannst du das wieder über das Spaltenmenü machen, indem du Filter entfernen auswählst.

Rohdaten transponieren

Am linken oberen Tabellenrand befindet sich der Transpose Button, mit dem du die gesamte Tabelle transponieren kannst. Achte hier darauf, dass das Transponieren auch schwieriger werden kann, wenn man mehrere Textspalten in den Rohdaten hat. Am besten, probierst du so lange, bis das Diagramm wie gewünscht ist. In unserem Beispiel kannst du erkennen, wie sich die Grafik verändert. Natürlich kannst du auch wieder zurück zu deiner ursprünglichen Visualisierung indem du den Transpose Button nochmal anklickst. 

Ich möchte einen Dropdown in meiner Visualisierung anzeigen: Wie geht das?

Man kann für jede Textspalte einen Filter (z.B. Dropdown) in ein Diagramm einfügen. Hierzu muss man einfach im Dateneditor auf das + Zeichen neben dem Hinweis Dropdown zu Statistik hinzufügen klicken.

Es öffnet sich nun ein Auswahlfenster, danach kann man die gewünschte Spalte auswählen. Nach dem Klick auf die gewünschte Spalte wird der Statistik ein Filter (Dropdown) hinzugefügt.

Gleichzeitig erscheint auch ein kleines schwarzes Feld oberhalb der Datentabelle, wo der Spaltenname steht. Den Filter siehst du dann direkt in der Grafik und kannst nun die für dich gewünschte Auswahl treffen.

Wie kann ich Filter in der Statistik ändern/anpassen?

Durch Klick auf das kleine schwarze Feld oberhalb der Datentabelle öffnet sich der Filter Editor. Hier kann man einstellen, welche Art von Filter angewendet werden soll, wie der Ausgangszustand des Filters sein soll und ob der Filter einen Titel haben soll.

Da ist plötzlich ein Dropdown in meiner Visualisierung: Was kann ich tun?

Je nachdem, wie die Daten aussehen, die du in einem Diagramm visualisieren möchtest, kann es sein, dass plötzlich ein Filter (Dropdown) über dem Diagramm erscheint. Ist das der Fall, erscheint gleichzeitig auch ein kleines schwarzes Feld oberhalb der Datentabelle.

Falls du das nicht möchtest, gibt es für dich diese Optionen:

1. Falls über einen Dropdown mehr als eine Wertespalte auswählbar ist, kannst du im Dateneditor beim Eingabefeld Werte alle Wertespalten, die nicht dargestellt werden sollen, einfach abwählen.
2. Falls du 2 Textspalten in deiner Grafik hast, von der eine als Filter in der Statistik verwendet wird, kannst du die Daten in der Datentabelle filtern. 

Neben dem Dateneditor findest du auch eine große Auswahl an Editoren, wie den Titel-Editor, den Farb-Editor und den Diagramm-Editor. Du findest sie unter dem Stift-Symbol.

Der Titeleditor

Hier kannst du Titel, Untertitel, Quellenangabe und Beschreibungen bearbeiten und anpassen.

Um eigene Schriften bei 23° für dich verfügbar zu machen, kontaktiere einfach den 23° Support unter [email protected].

Einstellen von Abständen des Textfeldes

Natürlich kann man den Abstand eines Textfeldes nach Oben/Unten und nach Rechts/Links ändern. Das macht man über die Padding- und Margin-Einstellungen dieses Textfeldes.

Padding

Unter Padding versteht man den Innenabstand eines Elements, in diesem Fall des Text Elements. Das ist der Zwischenraum zwischen dem Inhalt eines Elements und der Elementgrenze. Dieser Zwischenraum kann individuell für alle vier Seiten bzw. Richtungen des Elements gewählt werden.

Margin

Der Wert Margin wird zum Positionieren des Elementes genutzt. Es handelt sich hierbei um den Außenabstand. Dieser befindet sich außerhalb des eigentlichen Elements. So kann der Abstand zu anderen Elementen oder zu den Seitenrändern festgelegt werden. Auch dieser ist für alle vier Seiten bzw. Richtungen einzeln einstellbar.

Einstellungen speichern für die nächste Grafik (Entwurfsvorlagen)

Wenn man ein Textelement aufklappt, um es zu editieren, erscheint bei diesem Element rechts oben ein A. Dieses enthält globale Texteinstellungen für dieses Textfeld, die für die Erstellung von Templates notwendig sind. Was immer hier eingestellt ist, kann in eine Entwurfsvorlage für diesen Diagrammtypen übernommen werden. Gleiches gilt auch für die Abstände des Textfeldes (Padding/ Margin). Weitere Informationen zum Erstellen und Anwenden von Entwurfsvorlagen (Templates) findest du in diesem Tutorial.

Tooltips sind Anmerkungen und Hinweise zu einem Diagramm oder einer Karte, die erscheinen, sobald man auf einen bestimmten Punkt in einer Grafik klickt oder den Mauszeiger über einen bestimmten Punkt bewegt.

Den Tooltip-Editor findest du unter dem Diagrammeditor mit dem Textfeld-Button. Dort kannst du deine Tooltips bearbeiten und anpassen.

Inhalte von Tooltips anpassen

Tooltips sind vergleichbar mit allen anderen Textfeldern. Neben den bekannten Optionen (Schriftart ändern) können auch hier Datenfelder aus der Tabelle eingefügt oder Links gesetzt werden. 

Tooltips sind so voreingestellt, dass Name und zugehöriger Wert des Balkens, den man klickt, angezeigt werden. Zu sehen sind initial also die beiden Datenfelder Label und Value, die sich auf die zugewiesene Spalte mit den Bezeichnungen (Label-Spalte) und die zugehörige Spalte mit den Werten (Werte-Spalte) beziehen.

In unserem Tooltip wollen wir die Spalte Unterschied darstellen. Dazu müssen wir zuerst die Wertespalte in eine Textspalte umwandeln, damit wir diese dann in den Tooltip einfügen können. Außerdem stellen wir in diesem Beispiel Hover Tooltips dar - die Auswahl ist dir alleine überlassen.

Neben den bekannten Optionen, wie Schriftart ändern und Schriftgröße anpassen, können auch Datenfelder aus der Tabelle eingefügt oder Links gesetzt werden. Über die Datenfeld-Eingabe können Texte eingefügt oder bestimmte Zellen aus der Tabelle dargestellt werden, auch mit einer Verknüpfung an Bedingungen. Das kannst du einfach machen, indem du auf das das Symbol Datenfeld einfügen klickst.Weitere Informationen zum Einfügen von Grafiken findest du in diesem Kurs.

Die Darstellung von Tooltips anpassen

Tooltips können sehr unterschiedlich aussehen. Ihre Darstellung kann sogar in ein und demselben Diagramm variieren, je nachdem ob eine Anzeige auf einem mobilen Endgerät (wenig Platz) oder an einem Desktop Computer (viel Platz) stattfindet. Die Darstellungsmöglichkeiten können unter Stil (auswählbar über dem Texteingabefeld) eingestellt werden und können grundsätzlich als kleines Popup, als Seitenleiste oder Fullscreen eingestellt werden.

Tooltip-Einstellungen speichern für die nächste Grafik (Entwurfsvorlagen)

Alle Darstellungsoptionen (Stil, Schriftart, Hintergrund, leere Zellen) können in eine Entwurfsvorlage für diesen Diagrammtypen übernommen werden. Weitere Informationen zum Erstellen und Anwenden von Entwurfsvorlagen (Templates) findest du in diesem Tutorial.

Wie bekomme ich Werte, die nicht im Diagramm dargestellt werden, in ein Tooltip?

Häufig möchte man auch Werte in einem Tooltip anzeigen, die nicht bereits im Diagramm dargestellt werden. Das geht sehr einfach. Man muss hierfür einfach im Dateneditor die entsprechende Spalte (vermutlich eine Wertespalte, in der Zahlen aufgeführt sind) in eine Textspalte ändern. Sobald man das geändert hat, stehen die gewünschten Zahlen als Text (also nicht mehr formatierbar) zur Verfügung und können in jedem Textfeld einfach angezeigt werden.

Man kann gruppierte Balkendiagramme sehr unterschiedlich einfärben. Unter dem Farb-Editor hast du die Möglichkeit dein Diagramm visuell ansprechend zu gestalten. Diesen findest du hinter dem Pinsel Button.

Die Einfärbung kann entweder nach den Namen, die die Balken haben, nach den zugehörigen Werten oder auch nach den Wertespalten (falls es mehr als eine Wertespalte gibt) erfolgen. Die Option hast du bei Feld auswählen ganz oben.

Alle Balken in der gleichen Farbe einfärben

Viele Wege führen nach Rom. Alle Balken in der gleichen Farbe einfärben, kann man auf 2 Arten erreichen, sowohl über das Einfärben der Balken nach den Balkennamen (Labels), oder über das Einfärben der Balken nach deren Werte (Values). Dann kannst du Einfärbig auswählen und die passende Farbe wählen.

Wählt man unter Feld auswählen den Listeneintrag Labels aus, um über die Spalte mit den Bezeichnungen der Balken einzufärben, kann man allen Balkennamen die gleiche Farbe zuweisen. Wem das zu anstrengend ist, der kann auch mit einem Klick auf den Mülleimer sämtliche Farbzuweisungen löschen, sodass nur noch nach der Standardfarbe eingefärbt wird.

Bestimmte Balken hervorheben

Will man nur bestimmte Balken hervorheben, wählt man unter Feld auswählen den Listeneintrag Labels aus, um über die Spalte mit den Bezeichnungen der Balken einzufärben.

Im dem Fall mit einem gruppierten Balkendiagramm, kann man auch die Balken je nach angezeigter Wertespalte einfärben.

Balken je nach ihren Werten unterschiedlich einfärben

Will man Balken in Abhängigkeit ihrer Werte einfärben, wählt man unter Feld auswählen den Listeneintrag Werte aus, um über die Spalte mit den Balkenwerten einzufärben. 

Man kann nun aus mehreren Optionen wählen.

Einfärbig

Wenn man diese Einstellung auswählt, kann man jedem Balken genau eine Farbe geben, unabhängig von den Werten.

Gradient

Wählt man Gradient aus, werden für die Einfärbung die zu Grunde liegenden Werte normiert (von 0 bis 100). Die Einfärbung ist fließend. Die Schwellen der Einfärbung können manuell variiert werden.

Intervall

Bei der Intervall-Einfärbung, weist man bestimmten Wert-Intervallen Farben zu. In einem gruppierten Balkendiagramm kann man so beispielsweise alle Balken, die größer als ein beliebiger Schwellenwert sind, rot einfärben.

Kontinuierlich

Bei der kontinuierlichen Einfärbung werden ausgehend von den Werten der Balken des Diagramms Quantile berechnet. Eine Einfärbung auf Basis dieser Quantile erzeugt eine rundere Farbgebung, als die Gradient- oder die Quantil-Einfärbung. Diese ist allerdings nicht so sensitiv, falls es Ausreißer in den Daten gibt.

Auswählen und Ändern der Farbpalette

Die zur Verfügung stehenden Farben sieht man unter Farbpalette definieren. Durch Klick auf diese Farbpalette kann diese beliebig erweitert und verändert werden. Auch kann man einmal erstellte Farbpaletten speichern, damit man später wieder leicht Zugriff auf die Farben hat. Weitere Informationen zum Verwenden des Farbeditors findest du in diesem Tutorial.

Die Reihenfolge der Balken folgt immer den Daten, die in der Datentabelle im Dateneditor hinterlegt sind. Es gibt grundsätzlich zwei Möglichkeiten, die Reihenfolge der Balken zu ändern. Bedenke bitte hierbei, dass beide Werte Values, also beide Balken für einen Value verschoben werden können, oder die Reihenfolge der 2 Balken pro Label geändert werden kann.

1. Man kann jederzeit die Daten händisch so umschreiben, dass die Reihenfolge passt. Das macht vor allem bei kleinen Datensätzen Sinn.
2. Im Spaltenmenü des Tabelleneditors findet man die Möglichkeit, die gesamte Tabelle nach einer gewünschten Richtung zu sortieren (aufsteigend, absteigend). Man kann auch über mehrere Spalten sortieren, z.B. erst nach der ersten Spalte und dann nach der zweiten Spalte. Das Diagramm ändert sich in der Folge immer entsprechend der Sortierung.

Im Diagramm-Editor kannst du an der Visualisierung arbeiten. Unter anderem kannst du hier die Legende, die Werte im Diagramm, Animationen und weitere Einstellungen im Zusammenhang mit deiner Grafik anpassen.

Legendeneinstellungen anpassen

Hier kann die Legende bearbeitet und je nach eigenen Wünschen angepasst werden. Hier kannst Du unter anderem entweder eine Legende anzeigen oder sie aus deiner Visualisierung weglassen.

Werte im Diagramm

Man kann die Werte in einem gruppierten Balkendiagramm sehr unterschiedlich positionieren. Unter dem Menüpunkt Werte im Diagramm finden sich hierfür 6 Auswahlfelder. Am besten, man klickt sich durch die Optionen durch. Da man in den Textfeldern auch Labels (Balkenbezeichnungen) gemeinsam mit Werten darstellen kann, bieten sich viele unterschiedliche Möglichkeiten, Texte in gruppierten Balkendiagrammen zu positionieren. 

Kontrastfarbe

Anders als in anderen Textfeldern, kann für die Werte (bzw. Texte im Allgemeinen) im gruppierten Balkendiagramm eine Kontrastfarbe eingestellt werden. Das macht Sinn, wenn man Werte innerhalb unterschiedlich eingefärbter Balken positionieren möchte, aber in jedem Fall Lesbarkeit sichergestellt sein soll. 

Die Kontrastfarbe und auch den Faktor, an dem sie übernommen werden soll, kann man hinter dem A einstellen, welches rechts oberhalb des Texteditors zu finden ist. Hier kann man auch globale Texteinstellungen für dieses Textfeld setzen, die für die Erstellung von Templates notwendig sind. Was immer hier eingestellt ist, kann in eine Entwurfsvorlage für diesen Diagrammtypen übernommen werden.

Zahlen formatieren

Zu Beginn ist immer das Datenfeld Value (dem Balken zugehörige Werte) voreingestellt und es werden Werte in den Balken angezeigt. Normalerweise muss man diese Werte nicht formatieren. Sollte dies aber aus Gründen der Lesbarkeit notwendig sein, kann man dies auf zwei Arten tun:

1. Wenn man auf den Daten-Editor wechselt, kann durch Klick auf das x² Symbol in der Wertespalte auf den Format-Editor zugegriffen werden. Hier kann man sehr schnell und einfach auf unterschiedlichste Arten Runden oder Nachkommastellen anpassen. Wenn man hierüber Werte formatiert, wird dies überall übernommen (also auch in Tooltips oder falls man Werte in anderen Textfeldern anzeigt).
2. Durch ein Markieren des Feldes Value im Text-Editor aktiviert sich der Format-Editor an dieser Stelle. Dieser kann nun durch Klick auf das x² geöffnet werden und die im gruppierten Balkendiagramm angezeigten Werte können nun angepasst werden. Wichtig: Diese Art der Formatierung ändert nur das Ausgabeformat der Werte in den Balken, nicht aber an anderen Stellen, wie z.B. den Tooltips.

Nur bestimmte Werte anzeigen oder hervorheben

Es ist möglich, nur bestimmte Werte anzuzeigen oder bestimmte Werte hervorzuheben. Hierfür gibt es unterhalb des Text-Editors die Auswahl + Bestimmte Werte anpassen. Durch Klick öffnet sich ein Auswahlfeld, aus dem man gewünschte Balken (und ihre Werte) aktivieren kann, um sie in der Folge in einem eigenen Texteingabefeld zu formatieren.

Wie bekomme ich Werte, die nicht als Diagramm dargestellt werden, über ein Textfeld “in die Grafik”?

Wie bereits in Kapitel 5 erläutert wurde und die Spalte Unterschied in das Tooltip eingefügt worden ist, muss man hierfür einfach im Daten-Editor die entsprechende Spalte (in unserem Fall Spalte B, Unterschied) in eine Textspalte ändern. Sobald man das geändert hat, stehen die gewünschten Zahlen als Text (also nicht mehr formatierbar) zur Verfügung und können in jedem Textfeld einfach angezeigt werden.

Im Diagramm-Editor kann man das Aussehen und Verhalten von Beschriftungs- und Werte-Achsen anpassen. 

Beschriftungsachse

Die Beschriftungsachse besteht aus zwei Bereichen, dem Textfeld (samt customize Option) sowie den Erweiterten Einstellungen.

Textfeld

Neben den bekannten Optionen (Schriftart ändern) können auch hier Datenfelder aus der Tabelle eingefügt oder Links gesetzt werden. 

Die Textfelder der Beschriftungsachse sind so voreingestellt, dass die Namen der dargestellten Balken angezeigt werden (Label, bezieht sich auf die in den Daten zugewiesene Spalte mit den Bezeichnungen Label-Spalte).

Erweiterte Einstellungen

Unter den erweiterten Einstellungen kann man einen Achsentitel vergeben sowie weitere Einstellungen über die Zeilenumbrüche und die maximale Breite treffen.

Einstellungen speichern für die nächste Grafik (Entwurfsvorlagen)

Wenn man das Textelement aufklappt, um es zu editieren, erscheint bei diesem Element rechts oben ein A. Alle Einstellungen, die hier getroffen werden, können in eine Entwurfsvorlage für diesen Diagrammtypen übernommen werden. Auch alle Einstellungen hinter den Erweiterten Einstellungen können in eine Entwurfsvorlage für diesen Diagrammtypen übernommen werden. Weitere Informationen zum Erstellen und Anwenden von Entwurfsvorlagen (Templates) findest du in diesem Tutorial.

Werteachse

Die Werteachse ist vergleichsweise simpel gehalten. Man kann den Wertebereich der Achse nach seinen Wünschen anpassen, indem man unter Wertebereich festlegen auf die Voreinstellung sichtbare Werte verwenden klickt. Hier kann man dann festlegen, ob sich die Achse anhand aller im Datensatz verfügbarer Daten ein Mal skalieren soll, ob sie sich nur an die im Diagramm tatsächlich sichtbaren Werte anpassen soll oder ob sie komplett benutzerdefiniert (Eingabemöglichkeit von - bis) sein soll.

Hilfslinien

Anzeige und Stil der Hilfslinien können selbst eingestellt werden. Auch kann man benutzerdefinierte Hilfslinien setzen, um bestimmte Werte hervorzuheben. 

Wie kann ich verhindern, dass sich die Werteachse verändert, wenn ich in meinem gruppierten Balkendiagramm einen Filter verwende?

Wenn man möchte, dass auch bei User-Interaktionen mit dem gruppierten Balkendiagramm die Werteachse konstant bleibt, muss man Alle Tabellenwerte auswählen einstellen.

Zahlen formatieren

Sobald man das Menü aufklappt erscheint oben rechts ein x², sowie ein A. Hinter dem x² findet man die Möglichkeit, die auf der Werteachse angezeigten Werte zu formatieren. Auch ist es möglich, über Suffixe und Präfixe zusätzlichen Text einzugeben (zum Beispiel Maßeinheiten). Bitte merke dir: du kannst die Zahlen nur dann formatieren, wenn die Werteachse eingeschalten ist.

Vorschau ansehen 

Du kannst deine fertige Statistik, bevor du sie auf einer Website veröffentlichst, in einer Vorschau testen. 

Hierfür befindet sich unterhalb einer Visualisierung ein Größen-Editor, der es erlaubt, sich anzuschauen, wie die Statistik auf unterschiedlichen Endgeräten (Smartphone, Tablet, Desktop PC) bei einer Einbindung aussehen wird. Hinter Custom befinden sich weitere Größenvoreinstellungen für unterschiedlichste Ausspielwege. Es gibt außerdem auch die Möglichkeit, eigene Höhen und Breiten festzulegen, um komplett passgenau zu arbeiten.

Höhe einer eingebundenen Statistik anpassen

Im Statistik-Editor unter dem Menüpunkt Embed kann man einstellen, wie hoch und breit eine Statistik auf unterschiedlichen Endgeräten (Smartphone, Tablet, Desktop PC) dargestellt werden soll. Hierfür kann man im Embed-Editor einstellen, ab welcher Breite die Statistik in einem bestimmten Breite-zu-Höhe-Verhältnis dargestellt werden soll. Grundsätzlich gilt: 

• Seitenverhältnis ist = 1 - eine Statistik ist so breit wie hoch
• Seitenverhältnis ist < 1 - eine Statistik ist höher als breit
• Seitenverhältnis ist > 1 - eine Statistik ist breiter als hoch 
• Schriftskalierung ist = 1 - die Schriften in einer Statistik ändern sich nicht
• Schriftskalierung ist < 1 - die Schriften in einer Statistik werden um diesen Faktor verkleinert
• Schriftskalierung ist > 1 - die Schriften in einer Statistik werden um diesen Faktor vergrößert. 

Zusätzlich kann man auch einstellen, ab welcher Breite (in px) sich das Verhältnis (Höhe zu Breite) wie gewünscht ändern soll. Das kann man auf der linken Seite im Feld Width tun.

Schriftskalierung für Statistiken ändern 

Im Statistik-Editor unter dem Menüpunkt Embed, kann man auch einstellen, ob die Schrift auf unterschiedlichen Endgeräten (Smartphone, Tablet, Desktop PC) größer oder kleiner werden soll. Hierfür kann man im Embed-Editor einstellen, um welchen Faktor die Größe der Schriften in einer Statistik sich ändern soll, wenn diese in einer bestimmten Breite ausgespielt wird. Grundsätzlich gilt: 

Pro- und Enterprise-Nutzer können in Presseaussendungen oder durch das Teilen von Links zur Statistik Inhalte zur Weiterverwendung anbieten.

Hinter dem Menüpunkt Settings kann man daher unter Veröffentlichungsrechte einstellen, ob andere diese Statistik und die zu Grunde liegenden Daten einfach weiterverwenden dürfen oder nicht.

Die Weiterverwendungsoptionen umfassen das Einbinden von Statistiken auf Webseiten (<> Embed), das Herunterladen der Statistik als PNG oder JPEG, sowie das Herunterladen der Rohdaten als Excel, CSV oder JSON Datei.

Wichtig: Unterhalb einer Visualisierung befindet sich ein Größeneditor, der es erlaubt, sich anzuschauen, wie die Statistik auf unterschiedlichen Endgeräten (Smartphone, Tablet, Desktop PC) bei einer Einbindung aussehen wird.

Die beim Speichern einer Statistik eingestellte Größe wird mitgespeichert und jedem, der die Statistik im 23° Atlas betrachtet, initial voreingestellt.

Wie jede andere Grafik können gruppierte Balkendiagramme auf Webseiten eingebunden werden, als PNG/JPEG exportiert oder die Daten in strukturierter Form als Excel, CSV oder JSON heruntergeladen werden.

Diagramm auf der Website einbinden

Statistiken können per iFrame ganz einfach in Webseiten eingebunden werden. Wir bieten hierzu unterschiedliche Varianten an.

Embed Script

Das Embed Script bietet die Möglichkeit, Statistiken mit unserem Höhencontroller einzubinden. Dadurch lassen sich die Breakpoints direkt über unsere Applikation einstellen. Wenn im Nachhinein die Breakpoints angepasst werden, muss das Embed Script nicht ausgetauscht werden, da auch nach Einbindung die aktualisierten Einstellungen übernommen werden.  

iFrame

Die Statistiken lassen sich auch klassisch via iFrame einbinden. Hier werden jedoch nur Fallback inline Styles mitgeliefert. Daher wird der Höhencontroller nicht mit ausgeliefert und der User muss sich selbst um die richtige Höhenanpassung bei unterschiedlichen Breiten kümmern.  

Slug / API

Hier wird nur der eindeutige Identifikator der Statistik ausgegeben. Diese Variante ist bei Usern beliebt, die unser Wordpress Plugin nutzen oder die ihr CMS so angepasst haben, dass nur der Slug zur Einbindung nötig ist. 

Wordpress Plugin

Bitte kontaktieren Sie uns unter [email protected] um Zugang zu unserem Wordpress-Plugin zu erhalten.

PNG/JPEG/SVG herunterladen

Bildgröße ansehen & festlegen

Man kann eine Grafik/ Karte in unterschiedlichsten Größen als PNG/JPEG/SVG/PDF exportieren. 

Hierfür befindet sich unterhalb einer Visualisierung ein Größeneditor, der es erlaubt, sich anzuschauen, wie die Statistik in unterschiedlichen Größen (Smartphone, Tablet, Desktop PC) aussieht. Hinter Custom befinden sich weitere Größenvoreinstellungen für unterschiedlichste Ausspielwege (Social Media Post, Präsentation etc.). Es gibt außerdem auch die Möglichkeit, eigene Höhen und Breiten festzulegen, um komplett passgenau zu arbeiten.

Bild herunterladen 

Nachdem man die gewünschte Größe eingestellt hat, kann man die Grafik nun herunterladen. Durch Klick auf den Pfeil gelangt man zur Formatauswahl (PNG, JPEG, SVG, PDF) und kann das gewünschte Format einfach auswählen. Das Herunterladen von Grafiken kann auch mal etwas länger dauern, da es just in time für User:Innen erstellt wird.

Die Schriften werden größer oder kleiner, wenn ich die Bildgröße verändere: Was kann ich tun?

Es kann passieren, dass die Schriftgröße mit der Breite des gewünschten Bildformats mitwächst oder schrumpft. Sollte das der Fall sein, kann man ganz einfach im Statistik-Editor unter dem Menüpunkt Embed einstellen, ob die Schrift in unterschiedlichen Ausspielbreiten (z.B. Smartphone, Tablet, Desktop PC) größer oder kleiner werden soll. Hierfür kann man im Embed-Editor einstellen, um welchen Faktor die Größe der Schriften in einer Statistik sich ändern soll, wenn diese in einer bestimmten Breite ausgespielt wird. Grundsätzlich gilt: 

• Schriftskalierung ist = 1 - die Schriften in einer Statistik ändern sich nicht
• Schriftskalierung ist < 1 - die Schriften in einer Statistik werden um diesen Faktor verkleinert
• Schriftskalierung ist > 1 - die Schriften in einer Statistik werden um diesen Faktor vergrößert. 

Um also eine Schriftskalierung zu verhindern, setzt man einfach alle Werte auf 1.