Diagramme in WordPress Webseite einfügen

Dieser Beitrag wurde erstellt um Betreiber von WordPress Seiten dabei zu helfen, Charts oder Diagramme in die Webseite einzubinden. WordPress ist eines der beliebtesten Content-Management-Systemen (CMS). Insbesondere für kleinere Webseiten, Firmenwebseiten oder Blogs wird die kostenlose Software gerne eingesetzt.

Wenn Sie eine WordPress Webseite besitzen oder betreuen, können Diagramme oder Charts dabei helfen, Daten effizienter mit Ihren Seitenbesuchern zu kommunizieren und präsentieren. Im Folgenden möchten wir verschiedene Möglichkeiten zum Einbinden von Diagrammen auf WordPress Seiten vorstellen.

Diagramm als Screenshot oder Bild einfügen

Vermutlich haben Sie sich bereits damit befasst, dass es möglich ist, ein Diagramm als Bild auf der WordPress Seite einzubinden. Dies ist aus technischer Sicht sehr einfach umzusetzen. Allgemein gehen Sie dazu wie folgt vor: Zunächst verwenden Sie eine Tabellenkalkulations-Software wie z.B. Excel oder LibreOffice um die Daten für das Diagramm zu hinterlegen:

Als nächstes verwenden Sie einfach die Diagramm-Funktion der Tabellenkalkuklation wie z.B. den LibreOffice Chart Wizzard. Das Diagramm-Tool erlaubt es Ihnen einen geeigneten Diagramm-Typen zu wählen, den Datenbereich auszuwählen und den Chart Ihren Bedürfnissen anzupassen. Das Diagramm könnte dann Beispielsweise wie das folgende Säulendiagramm aussehen:

Sobald Sie das Diagramm nach Ihren Wünschen erstellt haben, können Sie eine andere Software verwenden wie z.B. das Snipping Tool von Microsoft um einen Screenshot zu erstellen. Die Datei mit dem Screenshot können Sie dann als png or jpg Datei abspeichern.

Im letzten Schritt müssen Sie jetzt nur noch das Bild in Ihrer WordPress Webseite einfügen. Das Vorgehen ist genau dasselbe wie für beliebige Bilder auf Ihrer Webseite: Im Administrationsbereich Ihrer WordPress Seite wählen Sie einfach den Blog-Artikel bzw. die Seite aus, auf der Sie das Diagramm einbinden möchten. Im Editor können Sie dann ein Bild hinzufügen und dieses lokal auf Ihrem PC auswählen. Das Bild wird dann auf Ihrem Webserve automatisch abgelegt und via HTML in Ihrer WordPress Seite eingebunden, wie im folgenden Beispiel dargestellt:

Das Einbinden eines Diagramms als Bild-Datei hat verschiedene Vorteile:

Keine extra Kosten oder Gebühren
Technisch einfach umzusetzen

Jedoch bringt dieses Vorgehen auch gewisse Nachteile mit sich:

Diagramme sind statisch
Diagramme sind nicht interaktiv

WordPress Erweiterungen für Diagramme

WordPress bietet eine Vielzahl an Erweiterungen und Plugins an, um Diagramme auf der WordPress Seite zu erstellen. In der folgenden Tabelle möchte ich drei Erweiterungen näher vorstellen:

Name	Unterstütze Diagramm-Arten	Daten-Quellen	Preis
Visualizer	Tabelle, Kreisdiagramm, Liniendiagramm, Flächendiagramm, Karte, Säulen- und Balkendiagramm, Punktdiagramm 6 zusätzliche Typen in der PRO-Version	CSV JSON	Kostenlos / 55 GBP pro Jahr für PRO
wpDataTables	Liniendiagramm, Säulendiagramm, Balkendiagramm, Kreisdiagramm, Histogramm, Punktdiagramm, Flächendiagramm, Candlestick Chart, Gauge-Diagramm	Excel CSV Google Spreadsheet SQL Query XML JSON	Kostenlos / 44 GBP für 1 Jahr
M Chart	8 Diagramm-Arten werden unterstützt		Kostenlos

Der Vorteil von diesen WordPress Erweiterungen besteht darin, dass Sie interaktive Diagramme ohne Programmierkenntnisse erstellen können.

WordPress-Diagramm mit Visualizer erstellen

Visualizer ist eine der beliebtesten WordPress Erweiterungen um Diagramme zu erstellen. Nach der Installation der Visualizer Erweiterung finden Sie einen zusätzlichen Menü-Punkt mit "Visualizer" im Adminbereich der WordPress-Installation. Dort finden Sie die Möglichkeit ein neues Diagramm zu erstellen. Zunächst müssen Sie die Bibliothek auswählen, mit der das Diagramm erstellt werden soll. Die Optionen sind aktuall Google Charts, DataTable oder ChartJS. Sie können dann den Diagrammtyp wählen und die Datenquelle festlegen. Aktuell werden csv und json Dateien unterstützt, die Sie entweder auf Ihrem lokalen Datenträger auswählen oder per URL angeben können. Der Zugriff auf Datenbanken via SQL ist nur in der bezahlten Version verfügbar. Das Diagramm kann im Anschluss weiter konfiguriert werden.

Sobald das Diagramm Ihren Vorstellungen entspricht, können Sie es einfach auf der gewünschten WordPress Seite oder dem WordPress Blog-Beitrag einfügen.

Ein WordPress Diagramm mit wpDataTables erstellen

Ein weiteres, beliebtes WordPress-Plugin für Diagramme ist wpDataTables. Nach der Installation dieser WordPress-Erweiterung haben Sie im Administrationsbereich Ihrer Seite einen neuen Menüpunkt "wpDataTables". Wenn Sie darüber ein neues Diagramm erstellen müssen Sie zunächst einen Namen für das Diagramm angeben und die gewünschte Bibliothek zum Erstellen des Schaubildes auswählen. Aktuell ist in der freien Version nur Google Charts verfügbar. In der bezahlten Version können Diagramme auch mit HighCharts oder Chart.js erstellt werden. Als nächstes können Sie den Diagramm-Typen auswählen und die Datenquelle festlegen. Ähnlich wie beim Visualizer Plugin können Sie bei Ihren WordPress Beiträgen und Seiten dann den erstellten wpDataTabels Chart einfügen.

Ein WordPress Diagramm mit M Chart erstellen

Nach der Installation der M Chart Erweiterung finden Sie im Adminbereich Ihrer WordPress Installation einen zusätzlichen Menüpunkt namens "Charts" wo Sie einfach neue Schaubilder erstellen können.

PrettyCharts Diagramm in WordPress einfügen

Mit der folgenden Anleitung können Sie einfach ein PrettyCharts Diagramm in Ihre WordPress Webseite einfügen:

Erstellen Sie mit PrettyCharts ein Diagramm, das Ihren Anforderungen und Vorstellungen entspricht.
Kopieren Sie den Quellcode und fügen Sie diesen in Ihrer WordPress Seite oder Blog Post ein. Verwenden Sie bitte den Code-Modus Ihres WordPress Editors.