Analysen- und Diagramm-Blöcke

Diese Seite ist eine kurze Zusammenfassung aller dreizehn Diagramm- und KPI-Blöcke — jeder hat außerdem seine eigene, dedizierte Seite mit der vollständigen Feldliste und durchgearbeiteten Beispielen, verlinkt am Ende seines Abschnitts unten.

Dreizehn Diagramm- und KPI-Blöcke, um direkt in der E-Mail eine Datengeschichte zu erzählen — ein wöchentlicher Digest, eine Verkaufszusammenfassung, ein Bericht, den Ihre Empfänger nicht anklicken müssen, um ihn zu lesen. Sie leben im selben Inhalt-Abschnitt der Einfügen-Palette wie jeder andere Block; es gibt keine separate Kategorie „Analysen“.

Ein paar Dinge gelten für jedes Diagramm in dieser Familie, daher werden sie hier einmal genannt statt dreizehnmal unten:

Jedes Diagramm wird als einzelnes, serverseitig erzeugtes Bild gerendert — keine clientseitige Diagramm-Bibliothek, kein JavaScript — mit einer sichtbaren Datentabelle direkt daneben. Die Tabelle ist keine Fußnote oder nachträgliche Barrierefreiheits-Ergänzung: Es sind dieselben Zahlen wie im Bild, in reinem HTML, und sie macht das Diagramm in reinen Text-Clients, Postfächern mit blockierten Bildern und Screenreadern tatsächlich nutzbar. Sie ist nie optional.
Die Zahlen eines Diagramms werden zum Sende- oder Exportzeitpunkt fixiert — dieselbe „aktuell zum Sendezeitpunkt“-Konvention wie bei der Frist des Countdown-Timers oder dem Lagerbestands-Badge eines Produkt-Blocks, kein live aktualisiertes Widget. (Die eine Ausnahme: Ein an die eigenen Antwortergebnisse einer Kampagne gebundenes Diagramm liest zum Renderzeitpunkt live — siehe Diagramme an echte Daten binden.)
Niemals Diagramme mit zwei Achsen. Zwei Kennzahlen unterschiedlicher Skala sind zwei nebeneinanderstehende Diagramm-Blöcke, nicht ein Diagramm, das vorgibt, zwei Y-Achsen zu haben.

KPI-Kennzahlkarte

Eine große Zahl für eine Schlüsselkennzahl — Umsatz, Anmeldungen, was auch immer die E-Mail berichtet.

Felder: eine Beschriftung, ein Wert mit einem Format (einfache Zahl, Währung oder Prozent), ein optionaler vorheriger Wert, gegen den ein Δ angezeigt wird, und ein optionaler Sparkline-Verlauf.
Die Δ-Richtung (auf/ab/gleich) legen Sie selbst fest, sie wird nicht daraus abgeleitet, ob die Zahlen gestiegen sind — so behalten Sie die Kontrolle darüber, was als gute Nachricht zählt.
Der Sparkline-Verlauf ist ein kleines Trendbild; die Beschriftung/der Wert/das Δ darunter sind immer echter HTML-Text, nie davon abhängig, ob das Bild gerendert wird.

→ Vollständige Anleitung & Beispiele

Balkendiagramm

Vertikale oder horizontale Balken, bis zu 3 selbst erfasste Reihen.

Ab etwa 8 Kategorien lässt das Diagramm direkte Wertbeschriftungen auf jedem Balken weg zugunsten einer gemeinsamen Achse mit Gitterlinien — exakte Zahlen von einem Dutzend beschrifteter Balken abzulesen wird schon vorher unleserlich, daher übernimmt die Datentabelle als präzise Quelle.

→ Vollständige Anleitung & Beispiele

Linien-/Flächendiagramm

Dieselbe zeilenweise Erfassungsform wie das Balkendiagramm — Kategorien untereinander in den Zeilen, bis zu 3 Reihen nebeneinander — plus ein filled-Schalter für die Flächendiagramm-Variante.

Punktmarkierungen auf jedem Datenwert werden ab etwa 20 Punkten ausgedünnt, damit die Linie nicht zu einer durchgehenden Punktreihe wird; die gezeichnete Linie, die gemeinsame Achse und die Datentabelle tragen den Trend darüber hinaus weiter.

→ Vollständige Anleitung & Beispiele

Kreis-/Donut-Diagramm

Ein Wert pro Kategorie, gezeichnet als Kreis oder (im Donut-Modus) als Ring mit einer optionalen zentrierten Beschriftung für eine KPI-artige Zahl in der Mitte.

Ab 8 Segmenten werden die kleinsten zu einem einzigen „Sonstige“-Segment zusammengefasst, statt dass das Diagramm unleserlich dünn wird — Legende und Datentabelle zeigen beide dieselbe Zusammenfassung.

→ Vollständige Anleitung & Beispiele

Streu-/Blasendiagramm

X/Y-Punkte, mit einer optionalen series-Spalte, um Punkte in mehrere Farben zu gruppieren, und einer optionalen size-Spalte, um daraus ein Blasendiagramm zu machen.

Die Reihen-Identität ergibt sich aus dem, was Sie in die Series-Spalte eintippen — lassen Sie sie leer, teilt sich jeder Punkt den eigenen Titel des Blocks als seine eine Reihe.

→ Vollständige Anleitung & Beispiele

Histogramm

Bündelt eine Spalte roher Werte automatisch in Bereiche — geben Sie einzelne Zahlen ein, keine vorgezählten Buckets, und die Bündelung übernimmt der Block für Sie.

Sie legen ungefähr fest, wie viele Bins angestrebt werden; sind alle von Ihnen eingegebenen Werte identisch, fällt es auf einen einzigen Bin zusammen, statt neunzehn leere zu zeichnen.

→ Vollständige Anleitung & Beispiele

Heatmap

Ein Raster aus Zeilen × Spalten mit Werten, schattiert auf einer fortlaufenden Farbskala von hell bis dunkel.

Zellen zeigen ihren exakten Wert nur als Text, solange das Raster klein genug bleibt, um es auf einen Blick zu lesen — darüber hinaus trägt die Farbskala selbst (plus die stets sichtbare Datentabelle) die Zahlen, statt Text in winzige Zellen zu quetschen. Eine tatsächlich fehlende Kombination (überhaupt keine Zeile für dieses Zeilen-/Spalten-Paar) wird als eigenes, deutliches „keine Daten“-Grau gerendert, statt wie eine Null auszusehen.

→ Vollständige Anleitung & Beispiele

Trichter

Geordnete Stufenwerte — Besuche → Anmeldungen → Käufe, diese Art von Abfolge —, jede als Prozentsatz der ersten Stufe angezeigt.

Da die Bedeutung eines Trichters vollständig von der Reihenfolge abhängt, in der Sie die Stufen eingegeben haben, gibt es kein Zusammenfassen einer Überlaufstufe in einen „Sonstige“-Bucket, wie es Kreis-/Treemap-Diagramme tun — eine Stufe über der Obergrenze wird einfach nicht gezeichnet. Die Datentabelle ergänzt sowohl „Prozent der ersten Stufe“ als auch „Prozent der vorherigen Stufe“ (den schrittweisen Abfall), was das Bild allein nicht zeigt.

→ Vollständige Anleitung & Beispiele

Wasserfall

Ein Diagramm mit laufender Summe — Startwert, dann eine Abfolge von Zuwachs-/Rückgangs-Balken, optional zwischendurch oder am Ende auf einem selbst erfassten „Gesamt“-Balken landend.

Zuwachs-/Rückgangs-/Gesamt-Balken verwenden immer dieselben drei reservierten Farben, sodass ein Wasserfalldiagramm über jede E-Mail hinweg konsistent bleibt, statt davon abzuhängen, welche Farben Sie zuletzt gewählt haben. Wie beim Trichter wird ein Überlaufbalken verworfen statt zusammengefasst, da die Mathematik der laufenden Summe von der erfassten Reihenfolge abhängt.

→ Vollständige Anleitung & Beispiele

Tachometer

Eine einzelne Kennzahl, dargestellt gegen von Ihnen definierte Gut-/Warnung-/Kritisch-Schwellenbänder — eine nadelartige Skala, kein zeilenbasiertes Diagramm.

Der einzige Block dieser Familie ohne Datentabelle darunter, aus demselben Grund wie bei der KPI-Kennzahlkarte: Der Wert und sein Status sind bereits echter HTML-Text neben dem Bild, keine in einem Bild eingeschlossenen Zahlen.

→ Vollständige Anleitung & Beispiele

Netzdiagramm

Ein Mehrachsen-Vergleich — bis zu 3 Reihen, dargestellt über gemeinsame Achsen, nützlich, um Kategorien über mehrere Dimensionen gleichzeitig zu vergleichen (z. B. ein Produkt bewertet nach Preis/Qualität/Geschwindigkeit/Support).

Braucht mindestens 3 Achsen, um überhaupt als Polygon gezeichnet zu werden — weniger zeigt denselben „mehr Daten hinzufügen“-Platzhalter, den auch ein leeres Diagramm bekommt. Anders als der Rest der Familie ist dies sowohl eine Unter- als auch eine Obergrenze (begrenzt auf 8 Achsen).

→ Vollständige Anleitung & Beispiele

Treemap

Proportionale Kacheln, deren Größe sich nach dem Wert richtet, angeordnet, um ein Rechteck zu füllen (ein „squarified“ genanntes Layout) statt der Winkel eines Kreisdiagramms — dieselbe Ein-Wert-pro-Kategorie-Erfassungsform wie das Kreisdiagramm, nur eine andere Form, um den Anteil an einem Ganzen zu vergleichen.

Folgt derselben Zusammenfassungsregel ab 8 Segmenten wie das Kreisdiagramm, da beide dieselbe zugrunde liegende Datenaufbereitung teilen.

→ Vollständige Anleitung & Beispiele

Sankey-Diagramm

Proportionaler Fluss zwischen benannten Knoten — Von-, Zu- und Wert-Zeilen, z. B. Traffic-Quelle → Landingpage → Conversion.

Knoten werden nicht direkt erfasst; sie ergeben sich aus den Beschriftungen, die sich über Ihre Von-/Zu-Zeilen wiederholen, und ihre Position von links nach rechts wird automatisch aus der Flussrichtung ermittelt.
Über der Knoten- oder Verbindungsgrenze hinaus wird ein Überlaufknoten verworfen, nicht zusammengefasst — zwei unterschiedliche Fluss-Endpunkte zu einem zusammenzuführen würde falsch darstellen, was das Diagramm zeigt, anders als das „Sonstige“-Segment eines Kreisdiagramms. Die Datentabelle listet trotzdem jede von Ihnen erfasste Zeile auf, unabhängig davon, ob sie es ins gezeichnete Diagramm geschafft hat, sodass nichts, was Sie eingegeben haben, stillschweigend aus der Ansicht verschwindet.

→ Vollständige Anleitung & Beispiele

Anbindung an echte Daten

KPI-Kennzahlkarte, Balkendiagramm, Liniendiagramm und Kreisdiagramm — und nur diese vier — können an eine verbundene Datenquelle oder die eigenen Antwortergebnisse einer vergangenen Kampagne gebunden werden, statt an Zahlen, die Sie von Hand eingeben. Es gibt außerdem einen Dashboard-Projektstart per Klick, der eine KPI-Zeile und ein Balkendiagramm zusammen vorbereitet. Siehe Diagramme an echte Daten binden für das Wie.