Diagramme in die eigene Webseite einbinden

Dieser Artikel beschreibt, wie Sie eigene Diagramme auf der Webseite oder einem Blog veröffentlichen können. Es gibt verschiedene Bibliotheken und Software Produkte speiell für das Erstellen von Web-Diagrammen.

Es gibt verschiedene Möglichkeiten um Diagramme und Charts für eine Webseite oder Blog zu erstellen. Eine Vielzahl an Bibliotheken und Softwareprodukten für das Erstellen von Diagrammen steht dafür bereit.

Verschiedene Gründe sprechen dafür, Diagramme auf der eigenene Webseite zu verwenden. Insbesondere wenn Sie Daten un Zusammenhänge darstellen möchten, lohnt sich das Einsetzen von Schaubildern um die Benutzerfreundlichkeit zu verbessern. Beispielsweise können Sie mit Hilfe von Diagrammen Umfrage-Ergebnisse anschaulich darstellen. Falls Sie einen Finanz-Blog betreiben können Sie auch historische Preise anschaulich mit Hilfe von Diagrammen darstellen. Wenn Web-Diagramme gut gemacht sind, strahlen Sie Professionalität und Autorität aus was die Nutzerbindung verbessern kann und letztendlich zu mehr Erfolg führt.

Falls Sie ein Diagramm oder Schaubild in Ihrer Webseite einbinden möchten, haben Sie verschiedene Optionen:

  1. Verwendung von einer Chart-Bibliothek wie z.B. Chart.js
  2. Chart und Diagramm Erweiterungen für Content-Management-Systeme (CMS) wie z.B. für WordPress, Joomla oder Typo3
  3. Spezielle Software zum Erstellen von Diagrammen ohne Programmierkenntnisse
  4. Diagramme als Bild einfügen

Im Folgenden werden die verschiedenen Möglichkeiten genauer dargestellt und im Detail erklärt, wie damit Schaubilder für die Webseite erstellt werden können. Jede Option hat Vor- und Nachteile, auf die wir auch eingehen möchten. Insbesondere Echtzeit-Diagramme, deren Datengrundlage sich periodisch ändert, sind etwas aufwändiger zu realisieren.

Bibliotheken zum Erstellen von Schaubildern

Es gibt eine große Auswahl an JavaScript Bibliotheken, die verwendet werden können, um Diagramme auf Webseiten hinzuzufügen. Ein Nachteil dieser Bibliotheken ist, dass gewisse Zeit und Einarbeitung notwendig ist, um Diagramme zu erstellen. Ausführliche Dokumentationen und Beispiele stehen zur Verfügung, um damit selbständig Diagramme generieren. Im Folgenden werden Bibliotheken aufgeführt, die auf JavaScript basiert sind. Einge Lösungen sind quelloffen und können kostenlos verwendet werden, andere erfordern eine Bezahlung, bieten dafür aber zum Beispiel Support an.

Da es eine große Zahl an JavaScript Bibliotheken für das Erstellen von Diagrammen gibt, kann es herausfordernd sein, sich für eine Lösung zu entscheiden. Die folgenden Fragestellungen können bei einer Entscheidung helfen:

  • Sind Sie bereit für eine Lösung Geld auszugeben, insbesondere falls Sie Support benötigen?
  • Welchen Diagramm-Typ möchten Sie auf Ihrer Webseite hinzufügen? Werden diese Diagramm-Typen von der Bibliothek unterstützt?
  • Gefällt Ihnen das Aussehen der Diagramme einer Bibliothek besser als andere?
  • Benötigen Sie spezielle Funktionen bei Ihren Diagrammen?

Die folgende Auswahl an Chart-Bibliotheken beinhaltet die am meisten verwendeten und gängisten Lösungen für das Erstellen von Web-Diagrammen.

Chart.js

Chart.js ist eine quelloffene JavaScript-basierte Lösung, die es erlaubt HTML5 Schaubilder zu erstellen. Eine umfassende Dokumentation und eine Vielzahl an Beispiele vereinfacht den Einstieg in diese Bibliothek. Kenntnisse im Bereich JavaScript können den Einstieg mit der Chart.js API deutlich vereinfachen.

Highcharts

Highcharts ist eine weitere JavaScript Bibliothek für das Erstellen von Diagrammen und Infografiken für die eigene Webseite. Die Funktionalität und der Umfang ist ähnlich wie Chart.js. Der große Unterschied besteht darin, dass Highcharts nur für persönliche und nicht-kommerzielle Projekte kostenlos eingesetzt werden kann. Für kommerzielle Anwendungen wird eine Lizenz benötigt.

Google Charts

Google bietet ein eigenes Framework an, um Diagramme und Charts zu erstellen. Google Charts kann kostenlos verwendet werden und unterstützt aktuell bis zu 18 verschiedene Diagramm-Typen.

jqPlot

jqPlot ist ein Plugin für das jQuery Framework. Insbesondere falls Sie bereits jQuery auf Ihrer Webseite einsetzen, kann sich das Verwenden von jqPlot auszahlen. jqPlot ist open-source und unter der MIT oder GPL Lizenz einsetzbar.

D3.js

D3.js ist ein sehr umfangreiche Bibliothek für die Daten-Visualisierung im Internet mit sehr vielen Anwendungsfällen. Dabei werden nicht nur Diagramme sondern auch Infografiken wie z.B. Netzwerke oder Hierarchien unterstützt. Großartige Diagramme mit ansprechenden Animationen wurden bereits mit Hilfe von D3.js realisiert. Ein Blick in die D3.js Beispiele lohnt sich wirklich und kann Ihnen neue Impulse für das Erstellen von Diagrammen geben.

Erweiterungen und Plugins für das Erstellen von Web Diagrammen

Falls Sie für Ihre Webseite ein Baukasten-System einsetzten, können Sie eventuell auf Funktionalität zurückgreifen, mit der Sie Web-Diagramme erstellen können. Auch für Webseiten die mit Hilfe von Content-Management-Systemen (CMS), wie z.B. WordPress oder Joomla, realisiert werden, gibt es eine Vielzahl an Erweiterungen und Plugins für das Erstellen von Diagrammen.

Ein Nachteil von CMS-spezifischen Erweiterungen ist, dass diese Lösung eventuell nicht mehr funktioniert, falls Sie auf ein anderes CMS wechseln möchten. Dann müssten Sie prüfen, inwiefern die Schaubilder zu einer neuen Erweiterung migriert werden können, was letztendlich zu Mehraufwand führt.

No Coding Graph and Chart Solutions

There are also many solutions that allow you to build a chart in a special editor without any programming knowledge. You just need to copy the code into your website which simplifies the process and typically reduces the time that you need to publish a chart.

PrettyCharts

PrettyCharts offers a simple to use form to create a web chart and is based on Chart.js. Once you have configured your chart you can simply copy over the code and include it in your website. PrettyCharts also offers the possibility to automatically create a web chart from an image or HTML table.

PrettyCharts

Diagramm als Bild Einfügen

Die technisch einfachste Möglichkeit ein Diagramm auf der Webseite darzustellen, ist es, einen Screenshot von einem Diagramm zu erstellen und diesen dann als Bild einzufügen. Eine Vielzahl an Software kann verwendet werden, um das Schaubild zu erstellen, wie z.B. Microsoft Excel oder Libre Office Calc. Auch für das Erstellen von Screenshots gibt es viele Software-Produkte. Sie müssen dann lediglich das Bild auf Ihren Web Server laden und über HTML-Code oder einen WYSIWYG-Editor einfügen.

Diese Lösung hat jedoch einige Nachteile: Währen Bilder responsiv in die Webseite eingebunden werden können, gibt es für Diagramme die Möglichkeit, Achsen unabhängig voneinander zu skalieren, so dass der zur Verfügung stehende Platz auf dem Display besser ausgenutzt werden kann. Statische Bilder erlauben außerdem keine Interaktion mit dem Seitenbesucher. Benutzer können nicht in ein Diagramm zoomen oder Diagramm-Werte per Hover auslesen. Auch Diagramm-spezifische Animation können bei Bildern nicht realisiert werden. Ein großer Nachteil ist auch, dass bei einer Anpassung des Diagramms immer ein neuer Screenshot erzeugt und auf den Server geladen werden muss. Dynamische Diagramme, die sich automatisch erneuern können mit diesem Ansatz nicht dargestellt werden.

Dynamische Diagramme auf der Webseite einbinden

Die größte Herausforderung stellen in der Regel Schaubilder dar, bei denen sich die Daten periodisch ändern. Das Schaubild sollte automatisch mit den neuen Daten aktualisiert werden. Hier bieten gewisse Schaubild-Erweiterungen Lösungsansätze an, wie z.B. eine Verbindung zu einer Datenbank Tabelle. Sollte sich der Inhalt der Datenbank-Tabelle ändern, wird automatisch der Chart beim Laden der Seite neu aufgebaut. Falls Sie der Inhalt des Schaubilds ohne manuellen Refresh (F5) erneuern soll, können Technologien wie z.B. AJAX eingesetzt werden, um im Browser neue Daten vom Webserver zu laden und das Diagramm zu aktualisieren.

Bitte kontaktieren Sie uns falls Sie Unterstütztung beim Erstellen von Schaubildern für die eigene Webseite benötigen. Auch bei der Ausarbeitung von individuellen Diagramm-Lösungen und Realtime-Schaubildern stehen wir Ihnen gerne zur Verfügung.