SammysHP

Bibliotheken zum Erstellen von (Balken-)Diagrammen gibt es viele. Für fast alle gilt aber, dass sie eine Grafik erzeugen oder JavaScript erfordern.

Aber gerade so etwas simples wie ein Balkendiagramm kann man gut mit HTML und CSS darstellen. Dies kommt unter anderem der Barrierefreiheit entgegen. Da ich keine vernünftige Bibliothek in php finden konnte, habe ich mir selbst eine geschrieben.

SimpleBars

Entstanden ist SimpleBars. Das Ganze besteht aus einer php-Klasse sowie ein bisschen CSS. Erst sollte die Ausgabe auf SVG basieren, aber ich war mir nicht sicher was die Browserkompatibilität betrifft. Erweitern kann man es später immer noch.

Hier sieht man das Standard-Design. Wenn man es seinen Wünschen anpassen möchte, startet man am besten mit dem Einbinden der mitgelieferten CSS-Datei und überschreibt die jeweiligen Eigenschaften.

Diagramm erzeugen

Das Erzeugen eines Diagramms ist ganz leicht. Der folgende Codeschnipsel zeigt alles vom Include der Bibliothek bis zur fertigen Ausgabe:

require_once("SimpleBars.php");

$graph = new SimpleBars();
$graph
    ->setTitle("Example")
    ->setData(array(14, 6, 26));
echo $graph->render();

Der Parameter für setData() ist ein assoziatives Array. So kann man seine Einträge z.B. wie oben beginnend mit 0 nummerieren oder aber frei benennen:

array(
    "foo" => 0.93,
    "bar" => 0.27826,
    "baz" => 0.61
);

Natürlich kann man die Methoden auch miteinander kombinieren. In dem Beispiel sieht man, dass auch Fließkommazahlen möglich sind (die Ausgabe kann auf Wunsch begrenzt werden).

Dokumentation und Download

Der Code ist umfangreich kommentiert, sodass ich mir eine weitere Dokumentation gespart habe. Ihr könnt euch die Dateien hier auf github herunterladen, forken, mir Issues melden oder Pull Requests senden.