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.
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:
Jedoch bringt dieses Vorgehen auch gewisse Nachteile mit sich:
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 |
|
|
Kostenlos / 55 GBP pro Jahr für PRO |
wpDataTables |
|
|
Kostenlos / 44 GBP für 1 Jahr |
M Chart |
|
Kostenlos |
Der Vorteil von diesen WordPress Erweiterungen besteht darin, dass Sie interaktive Diagramme ohne Programmierkenntnisse erstellen können.
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 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.
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.
Mit der folgenden Anleitung können Sie einfach ein PrettyCharts Diagramm in Ihre WordPress Webseite einfügen:
Verwenden Sie unsere Software um einfach ein Diagramm für Ihre Webseite zu erstellen.