Online - Charttools - flexible Charts im SVG-Format für Webseiten

Einführung

Ziele

Bei der Gestaltung von Webseiten kommt es immer wieder vor, dass man Zahlen nicht nur trocken und schnöde im Text einbetten möchte, sondern diese durch eine Visualisierung für den Besucher der Website leichter verständlich darstellen will. Man findet eine Vielzahl von Anwendungen im Internet, mit deren Hilfe man das bewerkstelligen kann. Die meisten von ihnen basieren auf JavaScript. Das bedeutet oft aber auch, dass man sich als eventuell in solchen Dingen nicht sehr erfahrenerer Nutzer in den spezifischen Syntax und Aufbau einer JavaScript-Bibliothek einarbeiten muss.

Ich stelle hier eine kleine Sammlung von Werkzeugen vor, mit deren Hilfe man Chartgrafiken erzeugen und speichern oder noch besser direkt in eine Webseite einbinden kann. Dazu sind keinerlei JavaScript-Kenntnisse erforderlich, denn die Übergabe der zu visualisierenden Daten sowie sämtliche Anweisungen zur grafischen Gestaltung der Chartbilder erfolgt bereits beim Aufruf des Programms.

Es müssen also keine Dateien auf dem eigenen Computer oder auf dem eigenen Webspace installiert werden.

Basis

Die hier vorgestellten Chartwerkzeuge basieren auf der freien PHP-Bibliothek SVGGraph, die man hier herunter laden kann. Die aktuelle Version von SVGGraph ist 2.26.

Charttypen von SVGGraph

SVGGraph unterstützt eine große Anzahl von Charttypen (zurzeit 37). Diese lassen sich zu verschiedenen Gruppen zusammenfassen.

Balkengrafiken

Senkrechte Balkengrafiken (4)
  • BarGraph
  • StackedBarGraph
  • GroupedBarGraph
  • StackedGroupedBarGraph
Balkengrafiken mit gemischtem Typ (2)
  • BarAndLineGraph
  • StackedBarAndLineGraph
Histogram
  • Histogram
3D Balkengrafiken (8)
  • Bar3DGraph
  • CylinderGraph
  • StackedBar3DGraph
  • StackedCylinderGraph
  • GroupedBar3DGraph
  • GroupedCylinderGraph
  • StackedGroupedBar3DGraph
  • StackedGroupedCylinderGraph
Waagerechte Balkengrafiken (4)
  • HorizontalBarGraph
  • HorizontalStackedBarGraph
  • HorizontalGroupedBarGraph
  • PopulationPyramid

Liniengrafiken (3)

  • LineGraph
  • MultiLineGraph
  • StackedLineGraph

Der gemischte Typen BarAndLineGraph und StackedBarAndLineGraph wurden oben schon erwähnt.

Scattergrafiken (2)

  • ScatterGraph
  • MultiScatterGraph

Radargrafiken (2)

  • RadarGraph
  • MultiRadarGraph

Tortengrafiken (8)

  • PieGraph
  • Pie3DGraph
  • DonutGraph
  • SemiDonutGraph
  • PolarAreaGraph
  • PolarArea3DGraph
  • ExplodedPieGraph
  • ExplodedPie3DGraph

Weitere Charttypen (5)

  • FloatingBarGraph
  • HorizontalFloatingBarGraph
  • BubbleGraph
  • BoxAndWhiskerGraph
  • EmptyGraph
  • ArrayGraph (seit Version 3.3)

Subgraphs

Seit SVGGraph 3.1 ist es möglich, Grafiken zu verschachteln, d.h. eine Grafik kann Untergrafiken haben.

Die einzelnen Tools

Es gibt vier Tools:

  • vbarchart - erzeugt vertikale Balkengrafiken, die PHP-Version ist vbar.php.
  • hbarchart - erzeugt horizontale Balkengrafiken, die PHP-Version ist hbar.php
  • piechart - erzeugt sogenannte Tortengrafiken, die PHP-Version ist pie.php.
  • linechart - erzeugt Liniengrafiken, die PHP-Version ist line.php.

Grundlagen der Verwendung

Die einfache Anzeige erfolgt mit:

<img src="/vbar.php?Autos=30&Busse=25&LkW=45" title="Verkehrsmittel">

Damit kann man sich die Grafik direkt anzeigen lassen. In den meisten Fällen wird man aber diese Grafik mit Hilfe eines entsprechenden HTML-Codes in die Seite einfügen:

Man kann die Grafiken aber auch mit einem anderen HTML-Element einbetten, nämlich mit dem embed-Tag:

<embed src="/vbar.php?Autos=30&Busse=25&LkW=45" type="image/svg+xml" style="width: 75%">

Das sieht dann so aus:

Auf den ersten Blick bemerkt man fast keinen Unterschied zwischen diesen beiden Varianten. Wenn man aber bei der zweiten Grafik die einzelnen Säulen mit dem Mauszeiger berührt, dann werden die Zahlenwerte eingeblendet. Die Grafik ist also in gewissem Maße interaktiv. Ich werde daher hier immer diese Methode verwenden. Bei den detaillierten Erklärungen zu den einzelnen Charttools werde ich auf weitere Aspekte dieses interaktiven Verhaltens eingehen.