Willkommen zu unserem Kreisdiagramm-Tutorial!

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

Mit Kreisdiagrammen kannst du vor allem prozentuale Anteile klar veranschaulichen. Du lernst in diesem Tutorial Schritt für Schritt, wie du diese Diagramme erstellst, bearbeitest und für eine präzise Datenanalyse nutzt. Los geht’s!

In diesem Tutorial werden wir das folgende Kreisdiagramm gemeinsam erstellen: 

Wie erstelle ich ein Kreisdiagramm?

Nachdem du dich im Atlas eingeloggt hast, hast du zwei Möglichkeiten, ein Kreisdiagramm 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 Kreisdiagramms kopiert werden. Hier kannst du auch die Kopfzeile kopieren und einfügen. 

Dateneditor

Nachdem du "Kreisdiagramm" 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 rechte Spalte stellt die Wertespalte dar und beinhaltet Zahlen, welche auf der Werteachse angezeigt werden.

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

In unserem Beispiel kopieren und fügen wir die Daten in den Dateneditor ein. Nachdem du die Daten hochgeladen hast, wird die Grafik dementsprechend angepasst. Hier siehst du, wie sich das Kreisdiagramm 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. Je nach Grafiktyp, können mehrere Wertespalten ausgewählt werden (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. Der Grund hierfür ist sehr einfach: Ein Kreisdiagramm kann nur eine Textspalte mit zugehörigen Werten darstellen. Sobald man zwei Textspalten oder zwei Wertespalten (oder beides) in die Tabelle beim Dateneditor einfügt, geht der 23° Atlas davon aus, dass du diese Daten dennoch in einem Kreisdiagramm darstellen möchtest. Um dir das zu ermöglichen, fügt der Atlas automatisch die benötigten Dropdown-Filter der Statistik hinzu.

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 contact@23degrees.io.

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 Kreissektors, 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 einem Tooltip kann man auch andere Visualisierungen anzeigen und diese sogar mit dem Kreisdiagramm verknüpfen.

Neben den bekannten Optionen, wie Schirftart ä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 Kreisdiagramme 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 Abschnitte 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 Abschnitte in der gleichen Farbe einfärben

Viele Wege führen nach Rom. Alle Sektoren in der gleichen Farbe einfärben, kann man auf 2 Arten erreichen, sowohl über das Einfärben der Kreissektoren nach den Abschnittnamen (Labels), oder über das Einfärben der Sektoren nach deren Werte (Values).

Wählt man unter Feld auswählen den Listeneintrag Labels aus, um über die Spalte mit den Bezeichnungen der Sektoren einzufärben, kann man allen Abschnittnamen 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.

Alternativ kann man unter Feld auswählen auch den Listeneintrag Werte auswählen, um über die Spalte mit den Werten der Abschnitte einzufärben. Durch Klick auf Einfärbig kann man allen Kreissektoren ein- und dieselbe Farbe zuweisen.

Bestimmte Kreissektoren hervorheben

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

Sollte man mehr als eine Wertespalte im Kreisdiagramm anzeigen (mit einer Auswahl über einen Dropdown), kann man auch die Abschnitte je nach angezeigter Wertespalte einfärben.

Sektoren je nach ihren Werten unterschiedlich einfärben

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

Man kann nun aus mehreren Optionen wählen.

Einfärbig

Wenn man diese Einstellung auswählt, kann man jedem Abschnitt 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 Kreisdiagramm kann man so beispielsweise alle Abschnitte, die größer als ein beliebiger Schwellenwert sind, rot einfärben.

Kontinuierlich

Bei der kontinuierlichen Einfärbung werden ausgehend von den Werten der Sektoren 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 Sektoren folgt immer den Daten, die in der Datentabelle im Dateneditor hinterlegt sind. Es gibt grundsätzlich zwei Möglichkeiten, die Reihenfolge der Abschnitte zu ändern. 

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 Kreisdiagramm 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 (Abschnittbezeichnungen) gemeinsam mit Werten darstellen kann, bieten sich viele unterschiedliche Möglichkeiten, Texte in Kreisdiagrammen zu positionieren. 

Kontrastfarbe

Anders als in anderen Textfeldern, kann für die Werte (bzw. Texte im Allgemeinen) im Kreisdiagramm eine Kontrastfarbe eingestellt werden. Das macht Sinn, wenn man Werte innerhalb unterschiedlich eingefärbter Abschnitte 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 Abschnitt zugehörige Werte) voreingestellt und es werden Werte in den Abschnitten 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 Kreisdiagramm angezeigten Werte können nun angepasst werden. Wichtig: Diese Art der Formatierung ändert nur das Ausgabeformat der Werte in den Abschnitten, 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 Abschnitte (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”?

Häufig möchte man auch Werte in einem Diagramm anzeigen, die nicht für die Darstellung des Diagramms (Abschnitte, Linen usw.) dargestellt werden. Das geht sehr einfach. 

Man muss hierfür einfach im Daten-Editor die entsprechende Spalte (vermutlich eine Wertspalte, 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.

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 Kreisdiagramme 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 office@23degrees.io 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.