In vielen Situationen kann es von Vorteil sein, Daten in einem ansprechenden Format zu präsentieren, das leicht zu verstehen ist. Mit grafischen Widgets für WordPress kannst du rohe Zahlen und Statistiken in eine ansprechende visuelle und informative Darstellung umwandeln. Meistens handelt es sich dabei um ein Plugin, mit dem du diese Daten in WordPress bearbeiten kannst.

In diesem Beitrag gehen wir auf grafische Widgets für WordPress ein, einschließlich der verschiedenen Arten, die du verwenden kannst, der Situationen, in denen du sie einsetzen kannst, und vieles mehr. In der zweiten Hälfte des Artikels stellen wir dir einige Plugins vor, die dir bei der Implementierung von grafischen Widgets helfen können, und zeigen dir, wie du sie für deine eigenen Bedürfnisse nutzen kannst.

Grafische Widgets in WordPress verstehen

Websites (auch solche, die WordPress verwenden) nutzen zwei Arten von Widgets: grafische und textbasierte. Typische Text-Widgets können fesselnd sein, aber grafische Widgets zeigen Informationen in einem ansprechenderen Format an.

Ein Liniendiagramm, das Daten für Katzen und zwei Deckenarten über die Zeiträume A bis N zeigt. Die Katzenlinie erreicht in Zeitraum F einen Höchstwert von etwa 8 Einheiten, bevor sie abfällt, während die Deckenlinien durchgehend niedrig und stabil bleiben.
Ein grafisches Widget für ein Liniendiagramm im Frontend einer Website

Diese Widgets haben dynamische Komponenten, die verschiedene visuelle Darstellungen wie Diagramme, Graphen, Karten und Fortschrittsbalken verwenden, um komplexe Informationen auf einen Blick zu vermitteln. So kannst du besser mit deinen Lesern kommunizieren, was ihnen wiederum hilft, deine Daten schnell zu verstehen und zu interpretieren. Das kann auch die Bindung deiner Nutzer/innen verbessern.

Es gibt zwar verschiedene Möglichkeiten, deine Daten zu präsentieren, aber grafische Widgets haben einige Elemente gemeinsam:

  • Sie zeigen die Daten auf dynamische Weise an.
  • Du kannst interaktive Elemente anbieten, die den Nutzern helfen, sich mit deinen Daten zu beschäftigen.
  • Unabhängig vom Design deiner Website kannst du deine Widgets an das Design anpassen.
  • Es gibt viele Fälle, in denen du Echtzeit-Updates für deine Daten anbieten kannst.

Bei grafischen Widgets geht es aber nicht nur darum, deiner Website ein visuelles Flair zu verleihen. Sie sind ein wichtiger Bestandteil der Visualisierung und Interaktion mit deinen Rohdaten.

Warum grafische Widgets deine Datenpräsentation vor Ort unterstützen können

Es gibt viele Vorteile, wenn du Grafiken verwendest, um eine Botschaft zu vermitteln. Generell sind visuelle Inhalte ein großes Geschäft und sehr wichtig für das Online-Marketing.

Für dich und deine Daten gibt es aber noch viele weitere Vorteile zu beachten:

  • Bessere Datenvisualisierung. Komplexe Datensätze können leichter zugänglich gemacht werden, so dass die Nutzer/innen Trends und Muster schnell erkennen können. Sie können auch die Art und Weise vereinfachen, wie du Informationen bereitstellst, indem du vielseitige, anpassbare und verständliche visuelle Formate verwendest.
  • Verbessertes Engagement der Nutzer. Interaktive Elemente bieten den Nutzern die Möglichkeit, ihre Verweildauer auf der Website zu erhöhen und die allgemeine Nutzeraktivität zu steigern.
  • Professionelle Ästhetik. Wenn du das Design richtig gestaltest, können Widgets die visuelle Attraktivität deiner Website erhöhen. Dieser ausgefeilte und professionelle Look kann deiner Datenpräsentation einen Vorteil verschaffen.

Visuelle Informationen sind oft besser als Text, was bedeutet, dass du wichtige Daten so präsentieren kannst, dass sie im Gedächtnis bleiben Deshalb ist es wichtig, dass du sie auf deiner Website richtig einsetzt.

Wann du grafische Widgets auf deiner WordPress-Website einsetzen solltest

Zu viel des Guten führt zu Wiederholungen und Übersättigung. Das bedeutet, dass du grafische Widgets mit Sorgfalt und Überlegung einsetzen solltest.

Die gute Nachricht ist, dass es viele Situationen gibt, in denen du grafische Widgets verwenden kannst. Am besten eignen sich Diagramme, wenn du komplexe Konzepte für deine Leserschaft vereinfachen musst. Es gibt aber auch andere Nischenfälle:

  • Bei der Präsentation komplexer Datensätze, wenn du große Datenmengen oder komplizierte Beziehungen zwischen Datenpunkten darstellen musst.
  • Aufzeigen von Trends im Zeitverlauf und Darstellung von Veränderungen oder Mustern in Daten über verschiedene Zeiträume hinweg. Du kannst sogar Ziele, Meilensteine oder Wachstumskennzahlen darstellen.
  • Vergleiche mehrere Variablen, um die Beziehungen oder Unterschiede zwischen verschiedenen Datenkategorien zu verdeutlichen.
  • Geografische Daten für bestimmte Orte darstellen oder wenn deine Daten einen räumlichen Kontext benötigen.

Du kannst grafische Widgets sogar dort einsetzen, wo du die Interaktion der Nutzer/innen brauchst, z. B. für dynamische Berichte oder andere Dashboards. Ausschlaggebend ist, dass du entscheidest, ob die visuelle Darstellung deiner Daten das Verständnis und das Engagement der Nutzer/innen im Vergleich zu anderen Ansätzen verbessern kann.

Kurz gesagt: Wenn das visuelle Format deinen Daten Wert und Klarheit verleiht, sind sie wahrscheinlich gut für ein grafisches Widget geeignet.

Die verschiedenen Arten von grafischen Widgets für WordPress

Die Datenvisualisierung selbst gibt es in verschiedenen Formen, und jede Darstellungsart eignet sich für unterschiedliche Daten und Präsentationsanforderungen. Wir werden hier nicht auf jede Art der Datenpräsentation eingehen, aber es gibt ein paar typische und herausragende Optionen, die du beachten solltest.

Typische Diagramme wie Balkendiagramme, Kreisdiagramme, Liniendiagramme und Flächendiagramme sind immer eine gute Wahl für die Datenvisualisierung. Das sind die Grundpfeiler des Ansatzes:

Das Statistik-Dashboard von Wikipedia zeigt die Gesamtzahl der Seitenaufrufe der letzten zwei Jahre an. Über eine Suchleiste oben können Benutzer Themen oder Fragen durchsuchen. Der Hauptinhalt zeigt ein Balkendiagramm mit grünen Balken, die die monatlichen Seitenaufrufdaten darstellen. Die Optionen in der Seitenleiste umfassen verschiedene Metriken und Filter. Die Gesamtzahl der Seitenaufrufe beträgt 265 Milliarden.
Die Wikipedia-Seite zeigt ein Balkendiagramm für die Gesamtzahl der Seitenaufrufe

Streudiagramme sind etwas komplexer, aber sie zeigen die Beziehung zwischen zwei Variablen:

Ein Streudiagramm, das die Daten der Kinokassenberichte für Mai, Juni und Juli 2021 zeigt. Die x-Achse reicht von 0 bis 12, während die y-Achse von 0 bis 20 reicht. Farbige Punkte stellen Datenpunkte für jeden Monat dar, wobei über alle drei Monate hinweg ein allgemeiner Aufwärtstrend erkennbar ist.
Ein Streudiagramm für die Einspielergebnisse des British Film Institute (BFI)

Karten gibt es in verschiedenen Formen. Heat Maps sind eher für Nischenanwendungen geeignet, nutzen aber Farbverläufe, um die Intensität von Datensätzen darzustellen. Eine interaktive Weltkarte kann gut sein, wenn du Interaktivität auf der Basis von Orten brauchst:

Eine Weltkarte mit gelben Markierungen und Zahlen, die die Standorte von WordCamps in verschiedenen Ländern und Kontinenten anzeigen. Die Karte zeigt eine Konzentration von Markierungen in Nordamerika, Europa und Teilen Asiens.
Auf der WordCamp-Website sind alle Veranstaltungen auf der ganzen Welt auf einer interaktiven Karte eingezeichnet

Zähler und Fortschrittsbalken sind eher für Meilensteine geeignet. Hier wendest du dich Zahlenzählern zu, die dynamisch bis zu einem Endwert zählen. Kreisförmige Fortschrittsbalken können helfen, die prozentuale Fertigstellung zu zeigen. Du kannst dies auch mit einem linearen horizontalen oder vertikalen Balken tun:

Die GitHub-Repository-Seite für WordPress mit dem Abschnitt „Community Standards“. Die Checkliste zeigt an, dass das Projekt die Punkte Beschreibung, README, Verhaltenskodex und Lizenz abgeschlossen hat, wobei einige Punkte noch ausstehen, wie z. B. Richtlinien für Beiträge und Sicherheitsrichtlinien.
Der Einblick in die Community Standards auf der offiziellen WordPress GitHub Seite zeigt einen öffentlichen Fortschrittsbalken, der sich auf eine Liste von Aufgaben bezieht

Auch Bildergalerien, Leuchtkästen und Schieberegler können dir helfen, deine Daten in mehreren Folien, mit Überlagerungen oder fast wie eine Geschichte zu präsentieren. Hier können Zeitleistenvisualisierungen ins Spiel kommen, ebenso wie Prozessabläufe. Eine Art der Datenvisualisierung, die du häufig auf Fotografie-Tutorialseiten findest, ist der Vorher-Nachher-Vergleich

Zwei kontrastierende Stadtansichten werden vertikal dargestellt. Das obere Bild zeigt eine belebte Straße bei Tag mit Gebäuden und zahlreichen herunterhängenden Stromkabeln und Glühbirnen. Das untere Bild zeigt eine schwach beleuchtete, nasse Gasse bei Nacht mit Neonreklamen und Verkaufsautomaten in der Ferne.
Mit einem dynamischen und interaktiven Vorher/Nachher-Schieberegler kannst du die Unterschiede zwischen zwei ansonsten ähnlichen Bildern aufzeigen

So kannst du zwei Versionen eines Bildes mit einem dynamischen Schieberegler vergleichen, der sich über das Bild bewegt und die andere Version sichtbar macht. Für deine Anwendungsfälle wird er vielleicht nicht oft zum Einsatz kommen, aber bedenke: Für jede Visualisierungsart gibt es eine ideale Anwendung.

Wo du Grafik-Widgets einsetzen solltest (mit Beispielen)

Es kommt nicht nur darauf an, welche Art von Visualisierung du verwendest, sondern auch wie (und wo) du sie einsetzt. Das heißt, es gibt verschiedene Anwendungen, bei denen der Einsatz von grafischen Widgets von großem Nutzen ist.

Du wirst feststellen, dass es neben den typischen Anwendungsfällen auch Anwendungen gibt, die du oft siehst, aber nicht mit Datenvisualisierung in Verbindung bringst. In den nächsten Abschnitten werden wir einige dieser Anwendungen vorstellen.

Geschäftliche Anwendungen

Eine der beliebtesten Anwendungen von grafischen Widgets ist die Darstellung von Kennzahlen. Für Unternehmen ist das ein klarer Gewinn, wenn es darum geht, ihre Daten auf ansprechende Weise zu präsentieren. Ein Balkendiagramm ist mit den richtigen Achsenwerten leicht zu lesen und hilft dabei, die Umsatzentwicklung im Zeitverlauf zu visualisieren oder verschiedene Produkte oder Dienstleistungen zu vergleichen.

Target gehört zu den wahrscheinlich Millionen von Unternehmen, die dies nutzen, um das jährliche Umsatzwachstum darzustellen:

Infografik zur finanziellen Leistung von Target mit Gesamteinnahmen, Betriebsergebnis, Nettogewinn und verwässertem Gewinn je Aktie von 2018 bis 2023. Balkendiagramme zeigen das Wachstum im Jahresvergleich für alle Kennzahlen, wobei 2023 rot hervorgehoben ist. Für jede Kategorie werden Leistungsprozentsätze und die durchschnittliche jährliche Wachstumsrate über fünf Jahre angegeben.
Target verwendet Balkendiagramme, um die Leistung von Jahr zu Jahr über eine Reihe von Datenpunkten zu vergleichen

Das zeigt auch, wie diese einfachen Darstellungen die Beziehung zwischen verschiedenen Kennzahlen, wie z. B. den Kundenakquisitionskosten oder dem Lebenszeitwert, veranschaulichen können. Auch gestapelte Balkendiagramme können diese Art von Vergleich darstellen. WordPress verwendet diesen Ansatz im Plugin-Verzeichnis, um zu zeigen, welche Version eines Plugins die Nutzer/innen installieren:

Der erweiterte Bildschirm für ein WordPress-Plugin, der aktive Versionen, Downloads pro Tag als Diagramm und Plugin-Details anzeigt. Zu diesen Details gehören die Versionsnummer, aktive Installationen und Bewertungen. Das Plugin hat über vier Millionen aktive Installationen und eine Bewertung von 4,5 Sternen.
Das WordPress Plugin-Verzeichnis verwendet gestapelte Balkendiagramme, um zu zeigen, welche Versionen die Nutzer herunterladen

Kuchendiagramme und Donut-Diagramme eignen sich hervorragend, wenn ein Unternehmen Daten über seinen Kundenstamm darstellen möchte. Oft wird dieser nach Alter, Standort oder einem anderen relevanten Faktor segmentiert. Elementor verwendet eine coole und einzigartige Partikelvisualisierung, um die größten Nutzergruppen hervorzuheben:

Die Website von Elementor zeigt eine Partikelvisualisierung der Länder mit den meisten Nutzern in der Community. Drei farbige Kreise stellen die Vereinigten Staaten (größte), Deutschland (mittelgroß) und das Vereinigte Königreich (kleinste) dar. Dekorative, konstellationsähnliche Linien verbinden die Kreise.
Partikeleffekte können auch für die Datenvisualisierung verwendet werden. Elementor nutzt sie, um Informationen über seinen Nutzerstamm anzuzeigen

In anderen Fällen möchtest du vielleicht die Meilensteine deines Unternehmens oder den Fortschritt eines Projekts zeigen. Flourish nutzt eine Zeitleiste, um seine Geschichte darzustellen, was sich auf die Markentreue auswirken kann:

Eine Zeitachse, die die Entwicklung von Flourish, einem Datenvisualisierungstool, zeigt. Zu den wichtigsten Meilensteinen gehören die erste Idee im Jahr 2016, das Entwickler-SDK im Jahr 2017 und die Einführung des Flourish-Editors im Jahr 2018. Die Zeitachse zeigt auch die Schwierigkeiten mit dem Daten-Storytelling im Jahr 2016 und die Werbeaktionen für Journalisten im Jahr 2018.
Die Flourish-Website nutzt eine attraktive Zeitleiste, um die Geschichte des Unternehmens darzustellen

Der E-Commerce läuft parallel zu allgemeinen Geschäftsanwendungen, so dass alles, was hier steht, auch für einen Laden gelten könnte. Dennoch gibt es auch für diese Branche spezielle Möglichkeiten, Daten zu visualisieren.

E-Commerce-Kennzahlen

Bei Kaufentscheidungen geht es oft um ein paar Sekunden Bedenkzeit, deshalb ist es wichtig, den Kunden schnell die richtigen Informationen zu geben. Produktvergleiche mit Hilfe von Balkendiagrammen oder Radardiagrammen helfen dir, Merkmale oder Spezifikationen verschiedener Produkte zu vergleichen, aber das ist nur der Anfang.

SRFACE nutzt zum Beispiel einen interaktiven Style Guide, um die Spezifikationen seiner Neoprenanzüge zu erklären und den Look der einzelnen Varianten zu visualisieren:

Ein GIF für eine Produktseite für einen schwarzen Neoprenanzug für Frauen. Es zeigt ein Bild des Neoprenanzugs, Preisinformationen, Größen- und Dickenoptionen sowie Produktdetails wie Versand- und Garantieinformationen. Der Benutzer navigiert durch die Größen, Stile und Produktinformationen, die auf dem Bildschirm angezeigt werden.
Interaktive Styleguides können ein großer Vorteil für E-Commerce-Shops sein, da sie potenziellen Kunden ein intensiveres Erlebnis bieten

Ähnlich wie bei einer Geschäftsanwendung kannst du auch Diagramme und Grafiken verwenden, um den Besuchern Trends bei der Produktannahme zu vermitteln. Das WordPress Theme Directory macht das mit Balkendiagrammen:

Ein Balkendiagramm, das die täglichen Downloads eines WordPress-Themes im Laufe der Zeit anzeigt. Das Diagramm zeigt aktive Installationen von über einer Million. Die Downloadzahlen schwanken, mit mehreren Spitzenwerten von etwa 12.000 Downloads pro Tag, unterbrochen von Perioden geringerer Aktivität mit etwa 6.000 bis 8.000 Downloads pro Tag. Die x-Achse erstreckt sich von November 2023 bis Juli 2024.
Das WordPress Theme Directory enthält ein Balkendiagramm, das die Downloadzahlen für jedes Theme im Laufe der Zeit anzeigt

Du kannst grafische Widgets überall dort einbauen, wo du sonst Text verwenden würdest. Viele E-Commerce-Shops verwenden zum Beispiel einfachen, kontrastierenden Text für Bestandsberechnungen. Fortschrittsbalken könnten hier jedoch besser passen, da sie auch die Dringlichkeit eines Verkaufs erhöhen können.

Metrische Verfolgung in Echtzeit

Echtzeit-Visualisierungen sind spannend, weil du die Entwicklung der verfolgten Kennzahl live sehen kannst . Wohltätigkeitsorganisationen und Non-Profit-Organisationen nutzen diese Art von grafischen Widgets häufig.

GoFundMe ist die größte Crowdfunding-Plattform der Welt, und jeder Spendensammler erhält ein Thermometer oder einen Fortschrittsbalken, der sich füllt, wenn ein Ziel näher rückt:

Eine GoFundMe-Spendenseite für ein Mädchen-Softballteam der Little League. Die Seite zeigt ein Mannschaftsfoto von jungen Mädchen in Uniformen, die ein Banner der Central Little League Softball Champions halten. Die Spendenaktion hat 2.450 US-Dollar von einem Ziel von 12.000 US-Dollar eingebracht, um dem Team zu helfen, an der Little League World Series teilzunehmen.
Die beliebte Crowdfunding-Plattform GoFundMe nutzt Fortschrittsbalken und Thermometer, um zu zeigen, wie nah eine Spendensammlung vor dem Abschluss steht

Animierte Zähler oder Infografiken können dabei helfen, die Wirkung deiner Produkte und Dienstleistungen in Echtzeit darzustellen. Auf der Hauptwebsite von WordPress.org gibt es zum Beispiel eine eigene Seite, die die Anzahl der Downloads der Kernplattform anzeigt und jede Minute aktualisiert wird:

Eine dunkle Webseite, die die Anzahl der WordPress 6.6-Downloads anzeigt, nämlich 44.316.991. Die Seite enthält oben Navigationslinks für Releases, Nightly, Counter und Source. Nach einigen Sekunden erhöht sich die Zahl, was eine Echtzeitaktualisierung der Anzahl der Downloads anzeigt.
Der Download-Zähler von WordPress.org wird jede Minute mit der aktuellen Gesamtzahl aktualisiert

Kinsta verwendet sogar ein Balkendiagramm, mit dem du die Betriebszeit deiner Website für unsere verschiedenen Dienste überwachen kannst:

Ein Bericht über die Betriebszeit von der Kinsta-Statusseite, der eine Betriebszeit von 100 Prozent für die Hauptseite von Kinsta.com und das Affiliate-Dashboard über einen Zeitraum von 90 Tagen anzeigt. Das MyKinsta-Dashboard hat eine Betriebszeit von 99,89 Prozent mit einigen kurzen Ausfällen, die durch rote und gelbe Balken angezeigt werden.
Auf der Kinsta-Statusseite findest du ein Diagramm, das alle längeren Ausfallzeiten anzeigt

Diese Strategie der „Live“-Updates kann auch andere praktische Anwendungen haben als nur Effekthascherei und Effekthascherei. In manchen Fällen brauchst du aktuelle Informationen über bestimmte Kennzahlen.

Interne Analysen

Die Leistungsüberwachung hat ein breites Spektrum. Es kann eine Strategie zur Messung von KPIs an vorderster Front sein oder eine personalisierte Übersicht über eine bestimmte Kennzahl. Google Analytics ist ein gutes Beispiel dafür, wie man eine Fülle von Daten einer Nischenseite auf fesselnde Art und Weise darstellen kann:

Das Google Analytics-Dashboard zeigt Echtzeit-Website-Traffic-Daten an. Die Benutzeroberfläche zeigt eine Weltkarte mit den Standorten der Benutzer, die Anzahl der aktiven Benutzer und Diagramme der Benutzeraktivität im Zeitverlauf an. In den Seitenleisten werden verschiedene Berichtskategorien und Kennzahlen wie Benutzerquellen und Seitenaufrufe angezeigt.
Google Analytics packt viele verschiedene Arten der Datenvisualisierung auf eine Seite

Die Google Lighthouse Auditing App DeploymentHawk verwendet eine Reihe von verschiedenen Diagrammen, Grafiken, Zählern und mehr, um die Zahlen zu analysieren und die Ergebnisse eines Berichts zu visualisieren:

Das DeploymentHawk-Dashboard zeigt Leistungskennzahlen der Website an, darunter Bewertungen für Leistung (96), Barrierefreiheit (96), Best Practices (95) und SEO (100). Weitere Leistungskennzahlen wie „First Contentful Paint“ und „Largest Contentful Paint“ werden ebenfalls angezeigt.
Die DeploymentHawk-App nimmt Google Lighthouse-Daten auf und stellt sie mit benutzerdefinierten Diagrammen, Grafiken und Zählern dar

Das Kinsta Application Performance Monitoring (APM) Tool und das MyKinsta Dashboard nutzen ebenfalls viele verschiedene Arten der Datenvisualisierung, je nachdem, welche Metriken du sehen möchtest:

Die MyKinsta-Dashboard-Oberfläche. Sie zeigt verschiedene Metriken und Diagramme an, darunter Ressourcennutzung, Bandbreite, Besuche und CDN-Nutzung für WordPress-Websites. In der linken Seitenleiste werden Navigationsoptionen für verschiedene Hosting-Dienste angezeigt.
Das MyKinsta-Dashboard zeigt verschiedene Diagramme und Grafiken, die auf den Daten der Website basieren

Gamification kann immer dann hilfreich sein, wenn du bestimmte Ziele erreichen musst. Todoist macht das mit einfachen Balken- und Liniendiagrammen und seinem Karma-Punktesystem:

Das Todoist-Dashboard zeigt 4744 abgeschlossene Aufgaben an. Eine kreisförmige Fortschrittsanzeige zeigt das wöchentliche Ziel von 26/30 abgeschlossenen Aufgaben an. Zu den weiteren Messwerten gehören Informationen zu Serien und ein Balkendiagramm, das die Erledigung von Aufgaben in den letzten 4 Wochen vergleicht.
Die Todoist-App nutzt Gamification-Techniken, um sicherzustellen, dass du deine Aufgaben so effizient wie möglich erledigst

Schließlich veröffentlichen einige gemeinnützige Organisationen ihre internen Ergebnisse. Dadurch entsteht ein einzigartiger Zwiespalt zwischen der Präsentation in der Öffentlichkeit und der Nutzung von Daten als internes Barometer. Die Gates Foundation zum Beispiel wendet ihre interne Philosophie und Vision auf die Zukunft an und schafft damit ein hervorragendes Beispiel für prädiktive Statistiken:

Ein Diagramm, das die Möglichkeit zeigt, Millionen von Menschenleben durch Innovation und Barrierefreiheit zu retten. Das gestapelte Flächendiagramm prognostiziert 2 Millionen gerettete Leben bis 2030 und 6,4 Millionen bis 2040, aufgeschlüsselt nach Regionen: Subsahara-Afrika, Südasien und andere LMICs.
Die Gates Foundation nutzt einzigartige Balkendiagramme, um ihre Philosophie und ihr Handeln voranzutreiben

Mit dieser Flexibilität bei der Art der Visualisierung und der Anwendung kannst du dir auch die Anpassungsfähigkeit von grafischen Widgets zunutze machen. Der Rest dieses Beitrags wird dir zeigen, wie du das in WordPress tun kannst.

Plugins, die dir helfen, grafische Widgets für WordPress anzuzeigen

Um grafische Widgets für WordPress zu implementieren, brauchst du natürlich ein Plugin. In den nächsten Abschnitten stellen wir dir einige der besten Optionen vor – in keiner bestimmten Reihenfolge.

1. Visualizer: Diagramme und Graphen

Der Visualizer von ThemeIsle ist eine solide Wahl unter den kostenlosen grafischen Widget-Plugins. Er unterstützt eine Vielzahl von Diagrammtypen und ist einfach zu bedienen, wie auch die anderen Themes und Plugins.

Das WordPress.org-Kopfzeilenbanner für das Visualizer-Plugin. Das Bild zeigt verschiedene Diagrammtypen und Datenvisualisierungen und hebt Funktionen wie 14+ Diagramme, Shortcodes, Diagrammanimationen und Live-Bearbeitungsfunktionen hervor.
Das Header-Bild des Visualizer-Plugins von WordPress.org

Es bietet vier verschiedene Diagrammtypen, einen Dateneditor mit einer kalkulationsähnlichen Oberfläche und viele Anpassungsmöglichkeiten. Das Plugin lässt sich auch mit Google Charts (und anderen Google-APIs) integrieren. Obwohl dieses Plugin alle Funktionen bietet, musst du für die Premium-Version (199 $ pro Jahr) bezahlen, um mehr Diagramm- und Bearbeitungstypen zu erhalten.

Die kostenlose Version ist jedoch für die meisten Nutzer/innen geeignet, vor allem für einfache, aber wunderschöne Datenvisualisierungen.

2. Data Tables Generator von Supsystic

Auf den ersten Blick scheint der Data Tables Generator nicht in diese Liste der grafischen Widget-Plugins für WordPress zu passen. Schließlich kannst du, wie der Name schon sagt, nur Text-Datentabellen erstellen. Das gilt für die kostenlose Version, aber die Premium-Version enthält viel mehr Funktionen, darunter Diagramme und Grafiken.

Das Header-Bild des Data Tables Generator-Plugins von WordPress.org. Es gibt eine Reihe von Symbolen und Oberflächenelementen, die Funktionen eines Datenverwaltungssystems darstellen, darunter Datentypen, Formeln, Suchfunktionen, Sortier- und Tabellenerstellungswerkzeuge.
Das Header-Bild des Data Tables Generator Plugins von WordPress.org

Die gute Nachricht ist, dass deine Kreationen von Anfang an fantastisch aussehen können. Du hast alle möglichen Visualisierungsoptionen, wie z. B. Balken- und Liniendiagramme, Donut-Diagramme, Blasendiagramme und mehr. Wir finden auch, dass die Sortier- und Filteroptionen führend sind.

Das bedeutet, dass das Plugin hervorragend für Websites geeignet ist, die ein hohes Maß an Interaktivität benötigen, vor allem, wenn sie auch Datentabellen und weitere visuelle Datendarstellungen benötigen.

Trotzdem gibt es in der kostenlosen Version keine Diagramme oder Grafiken. Mit einer lebenslangen Lizenz für $89 ist der Data Tables Generator jedoch ein Schnäppchen für die gebotenen Funktionen.

3. amCharts: Diagramme und Karten

Das amCharts-Plugin ist insofern einzigartig, als es sich mit einem externen Content Delivery Network (CDN) verbindet, um seine Bibliothek bereitzustellen. Das Plugin hilft dir also nur dabei, die JavaScript-Bibliotheken mit WordPress zu verbinden, anstatt die Diagramme direkt zu erstellen.

Das amCharts-Plugin-Header-Bild von WordPress.org. Es zeigt eine weiße Sinuswelle, die auf graue vertikale Balkendiagramme vor einem violetten Hintergrund mit Farbverlauf gelegt ist. Im Vordergrund ist eine schwarze Silhouette einer bergigen oder hügeligen Landschaft zu sehen, die mit den Diagrammelementen einen Schichteffekt erzeugt.
Das amCharts-Header-Bild von WordPress.org

Der Funktionsumfang von amCharts ist sehr umfangreich und bietet ein hohes Maß an Anpassungsmöglichkeiten. Allerdings musst du die amCharts-Schnittstelle verwenden, um deine grafischen Widgets zu erstellen, was bedeutet, dass du zwischen zwei Plattformen wechseln musst.

Wenn du eine Vielzahl von Diagrammtypen brauchst und mit der Schnittstelle eines Drittanbieters zufrieden bist, könnte amCharts für dich geeignet sein. Allerdings gibt es keine kostenlose Stufe für den Zugriff auf Diagramme und Grafiken, du brauchst also eine Premium-Lizenz, die ab 80 US-Dollar pro Jahr erhältlich ist.

4. Graphina – Elementor-Diagramme und -Grafiken

Wenn du Elementor nutzt, hast du bereits einige grafische Widget-Optionen innerhalb des Page Builders. Graphina erweitert diese jedoch um eine Vielzahl hochwertiger Diagramme, Grafiken und anderer Visualisierungsarten.

Das Header-Bild des Graphina-Plugins von WordPress.org. Das Banner zeigt farbenfrohe Beispiele für Radialdiagramme, Liniendiagramme und andere Datenvisualisierungen auf einem dunklen Hintergrund.
Das Graphina-Header-Bild von WordPress.org

Dieses Plugin bietet die größte Anzahl an Diagrammtypen und -designs in einem kostenlosen grafischen Widget-Plugin und verfügt über eine tiefe Integration mit Elementor und Divi. Außerdem bietet es einige der umfangreichsten Anpassungsoptionen, die ein Plugin überhaupt bieten kann, ganz zu schweigen von einem kostenlosen Plugin.

Es scheint unglaublich, aber die Premium-Version erweitert den Funktionsumfang noch weiter und macht Graphina zum umfangreichsten grafischen Widget-Plugin für WordPress. Natürlich brauchst du Elementor (oder Divi), um den Funktionsumfang zu nutzen, was ein Hindernis sein könnte. Für 49$ könnte es sich aber lohnen, zu einem dieser beliebten Seitenerstellungsprogramme zu wechseln.

5. wpDataTables

Ähnlich wie Data Tables Generator konzentriert sich wpDataTables nicht primär auf Diagramme und Grafiken. Du kannst sie aber mit dem Plugin erstellen, und die Ergebnisse sind hochwertig. Websites, die mit großen, komplexen Datensätzen arbeiten, sollten einen Blick auf dieses Plugin werfen.

Das wpDataTables-Plugin-Header-Bild von WordPress.org. Das Banner hat einen dunkelblauen Hintergrund mit dem Plugin-Logo und dem Text „The Best Tables & Charts WordPress Table Plugin“. Beispieltabellen, Diagramme und Preispläne werden schwebend auf der rechten Seite des Bildes angezeigt.
Das wpDataTables Header-Bild von WordPress.org

Wie zu erwarten, gibt es hier mehr Möglichkeiten, Tabellen zu erstellen, aber durch die Integration mit Google Charts und Charts.js stehen dir 15 verschiedene Visualisierungsarten zur Verfügung. Die Software kann mit großen Datenmengen umgehen, und die Optionen für den Import von Quellen sind fantastisch. Du kannst Daten aus Excel, XML, CSV-Dateien, JSON und sogar PHP-Arrays importieren, wenn du über Entwicklungserfahrung verfügst.

Da der Schwerpunkt jedoch auf Diagrammen liegt, ist es nicht so einfach, diese mit wpDataTables zu erstellen. Diese Lernkurve und die vielen Funktionen, die sich hinter der Premium-Edition (ab 39 US-Dollar pro Jahr) verbergen, könnten dich dazu bewegen, dich woanders umzusehen.

6. Ninja Charts

Das letzte Plugin auf unserer Liste ist komplett kostenlos und hat keine Premium-Stufe. Ninja Charts könnte die richtige Lösung für dich sein, wenn du neu im Bereich der Datenvisualisierung bist, bietet aber die Funktionalität, um mit den Besten mitzuhalten.

Das Header-Bild des Ninja-Charts-Plugins von WordPress.org. Es zeigt einen Geschäftsmann, der auf geometrischen Formen sitzt und ein Tablet benutzt, das mit Symbolen verbunden ist, die Tabellen, Diagramme und Analysen darstellen. Auf der rechten Seite sind ein ansteigendes Balkendiagramm und Dashboard-Elemente zu sehen.
Das Ninja Charts Header-Bild von WordPress.org

Ninja Charts bietet eine große Auswahl an Diagrammtypen und gibt dir die Möglichkeit, sie an deine Bedürfnisse anzupassen. Die Benutzeroberfläche ist einfach zu bedienen und es bietet eine enge Integration mit einem anderen Plugin desselben Entwicklers, Ninja Tables.

Dennoch gibt es auch hier Einschränkungen. Andere Nutzer beschweren sich über das Fehlen grundlegender Funktionen wie z. B. der Datenaggregation. Der Preis ist jedoch unschlagbar und wir glauben, dass das Plugin mit seinen Möglichkeiten für viele verschiedene Websites geeignet ist.

So fügst du mit dem Visualizer-Plugin grafische Widgets für WordPress hinzu

Lass uns kurz durchgehen, wie du ein grafisches Widget zu deiner WordPress-Website hinzufügst. Wir werden Visualizer verwenden, da es uns so gut gefallen hat, dass wir es zu unserem Favoriten gemacht haben.

Dies ist jedoch kein Visualizer-Tutorial. Daher können die Schritte, die wir hier ausführen, von denen deiner gewählten Lösung abweichen. Installiere und aktiviere das Plugin deiner Wahl und erstelle ein neues Diagramm oder eine Grafik.

In Visualizer erhalten wir diese Option bei der Installation:

Der Startassistent des Visualizer-Plug-ins. Er zeigt Optionen zur Auswahl verschiedener Diagrammtypen wie Kreis-/Ringdiagramm, Balkendiagramm und Liniendiagramm an. Die Benutzeroberfläche enthält oben eine Fortschrittsanzeige und unten die Schaltflächen „Speichern“ und „Weiter“.
Der Startassistent des Visualizer-Plugins

Höchstwahrscheinlich gibt es irgendwo im Verwaltungsbereich des Plugins eine Schaltfläche Neues Diagramm hinzufügen:

Das WordPress-Admin-Dashboard zeigt die Visualizer-Bibliotheksschnittstelle an. Oben befindet sich eine rot hervorgehobene Schaltfläche „Neu hinzufügen“. Darunter befinden sich Dropdown-Filter für Typen, Bibliotheken, Daten und Quellen. Der Hauptinhaltsbereich zeigt den Anfang eines Liniendiagramms mit der Bezeichnung #216, wobei eine blaue Linie die Daten von Cats darstellt.
Hinzufügen eines neuen Diagramms mit dem Visualizer-Plugin in WordPress

Sobald du auf die Schaltfläche klickst und deinen Diagrammtyp auswählst, musst du deine Daten eingeben. Die kostenlose Version von Visualizer unterstützt nur die manuelle Bearbeitung, aber dein Plugin könnte Integrationen und Importoptionen für eine Vielzahl von Tools anbieten:

Die Datenbearbeitungsoberfläche für Visualizer. Auf der linken Seite befindet sich ein Textbereich mit durch Kommas getrennten Werten, während auf der rechten Seite Optionen zum Importieren von Daten aus verschiedenen Quellen wie Dateien, URLs und Datenbanken angeboten werden.
Bearbeiten des Datensatzes für ein Diagramm innerhalb des Visualizer-Plugins

Als Nächstes solltest du dir die Anpassungsoptionen ansehen, die dir zur Verfügung stehen. Visualizer bietet diese im Bildschirm zur Diagrammerstellung an. Du kannst alle möglichen Aspekte einstellen, z. B. die Position des Titels, Achsenbeschriftungen, Gitternetzlinien, Größe und Platzierung des Diagramms und vieles mehr:

Die Registerkarte „Visualizer-Einstellungen“, die eine Liniendiagramm-Oberfläche mit drei Datenreihen mit den Bezeichnungen „Katzen“, „Decke 1“ und „Decke 2“ anzeigt. Auf der rechten Seite werden die Optionen zum Anpassen der allgemeinen Einstellungen angezeigt, einschließlich eines Dropdown-Menüs zum Festlegen der Position des Diagrammtitels.
Designanpassungen in Visualizer vornehmen

Der letzte Schritt ist das Einbinden deines Diagramms auf deiner Website. Viele Plugins verwenden dafür Shortcodes, was bedeutet, dass du sie einfach kopieren und in deinen gewünschten Beitrag oder deine Seite einfügen kannst:

Ein Teil der Visualizer-Plugin-Oberfläche, der die Diagrammeinstellungen und einen Shortcode anzeigt. Der Shortcode wird in einem Textfeld mit einer daneben befindlichen Schaltfläche „Kopieren“ angezeigt. Darunter befinden sich Registerkarten für Quelle, Einstellungen und Hilfe, mit erweiterbaren Abschnitten für Allgemeine Einstellungen und Einstellungen für die horizontale Achse, die sichtbar sind.
Ein Shortcode für ein Visualizer-Diagramm

Visualizer stellt dafür auch einen Block zur Verfügung, was praktisch ist und dem modernen WordPress-Design entspricht.

Typische Praktiken für die Anzeige deiner grafischen Widgets

Es ist wichtig, bei der Darstellung deiner Diagramme und Grafiken einige Aspekte zu beachten. Kurz gesagt: Behandle sie wie wichtige und aussagekräftige Inhalte und achte darauf, wie viele Widgets du anzeigst. Wenn du mehr ins Detail gehen willst, solltest du die folgenden Punkte beachten:

  • Platzierung. Deine Widgets sollten sich in deinen Content Flow einfügen, ähnlich wie deine Bilder und Videos. Grafische Widgets bewegen sich oft auf der Grenze zwischen Medien und Inhalt.
  • Ladegeschwindigkeit. Achte darauf, dass du die Leistung deiner Website überprüfst, nachdem du Widgets hinzugefügt hast. Einige können die Leistung deiner Website beeinträchtigen.
  • Zugänglichkeit. Auch wenn du visuelle Daten anbietest, solltest du darauf achten, dass sie einen passenden Alt-Text enthalten und über die Tastatur navigierbar sind. So können alle Nutzer/innen deine Widgets nutzen, unabhängig von ihren Sehfähigkeiten.

Wenn es um die Leistung geht, solltest du das nicht außer Acht lassen. Es gibt viele Faktoren, die sich auf die Geschwindigkeit deiner Website auswirken können, was angesichts der Belastung durch die zusätzlichen Grafiken auch sinnvoll ist. Wir raten dir, wenn möglich SVGs zu verwenden. Sie sind bei einfachen Diagrammen und Symbolen leistungsfähiger als Rasterbilder und besser skalierbar.

Auch Lazy Loading und Caching können hier helfen, denn beide schränken das Laden deiner Diagramme auf unterschiedliche Weise ein. Wenn du Daten aus externen Quellen abrufst, achte darauf, dass du effiziente Verbindungen wählst, um die Anzahl der HTTP-Anfragen zu minimieren. Am besten ist es, die Daten auf dem Server deiner Website zu hosten, auch wenn du auf diese Entscheidung keinen Einfluss hast.

Zusammenfassung

Mit grafischen Widgets für WordPress kannst du deine typischen Textdaten auf deiner Website visualisieren. Diese Methode der Datenpräsentation und -visualisierung kann komplexe Informationen in ein verständlicheres Format umwandeln. Du kannst diese Daten mit Diagrammen, Grafiken, interaktiven Karten und vielem mehr darstellen.

Das richtige Plugin für diese Aufgabe ist entscheidend, und wir behandeln in diesem Beitrag eine Menge davon. Visualizer ist eine gute Option, ebenso wie Graphina. Welches Tool das richtige ist, hängt jedoch von deinen eigenen Bedürfnissen ab. Es kann zweifelsohne einen großen, positiven Einfluss auf deine Website und ihr Engagement haben.

Sind grafische Widgets für WordPress wichtig genug für dich, um sie einzusetzen? Wir würden uns freuen, wenn du uns deine Meinung in den Kommentaren mitteilst!

Jeremy Holcombe Kinsta

Content & Marketing Editor bei Kinsta, WordPress Web Developer und Content Writer. Außerhalb von WordPress genieße ich den Strand, Golf und Filme. Außerdem habe ich Probleme mit großen Menschen ;).