Auf der Basis des HTML5-Canvas-Elementes erstellt die JavaScript-Bibliothek RGraph eindrucksvolle und interaktive Diagramme. RGraph eröffnet eine große Auswahl unterschiedlicher Diagrammtypen, sowie zahlreiche Möglichkeiten, diese zu gestalten und mit Effekten zu versehen. So lassen sich Diagramme mit wenig Aufwand erstellen und individuell anpassen.

RGraph

RGraph ist modular aufgebaut. Neben dem Kern gibt es für jeden Diagrammtyp und jedes zusätzliche Feature der Bibliothek eine eigene JavaScript-Datei, die eingebunden werden muss. So bleibt der zu ladende Quelltext so gering wie nötig.

Diagramme mit RGraph zeichnen

Die Grundlage eines jeden RGraph-Diagramms ist ein Canvas-Element, in das anhand seiner ID anschließend das Diagramm gezeichnet wird. Die Größe des Diagramms orientiert sich an der Größe des Canvas-Elementes:

<canvas width="400" height="200" id="diagramm"></canvas>

Im nächsten Schritt werden die benötigten JavaScript-Dateien eingebunden. Mindestens die Core-Datei sowie eine Diagrammdatei müssen integriert werden. RGraph stellt für jeden Diagrammtyp (zum Beispiel Balken-, Kreis- oder Liniendiagramm) eine separate Datei zur Verfügung:

<script src="libraries/RGraph.common.core.js"></script>
<script src="libraries/RGraph.pie.js"></script>

Im Beispiel wird die JavaScript-Datei für ein Tortendiagramm eingebunden. Als nächstes werden in einem weiteren Script-Bereich die Werte für das zu zeichnende Diagramm definiert:

<script>
  kreisdiagramm = new RGraph.Pie("diagramm", [15, 8, 12]);
  kreisdiagramm.Set("chart.labels", ["Bananen", "Pflaumen", "Kirschen"]);
  kreisdiagramm.Draw();
</script>

Über die Variable „kreisdiagramm“ wird ein Tortendiagramm inititiert. Übergeben werden die ID des Canvas-Elementes, sowie die Zahlenwerte des Diagramms. Über „.Set()“ können weitere inhaltliche und gestalterische Einstellungen vorgenommen werden. Dazu werden jeweils Eigenschaft und Werte per „.Set()“ übergeben. Im Beispiel werden den Tortenstücken per „chart.labels“ in einem Array Bezeichnungen zugewiesen.

Einfaches Tortendiagramm

Weitere Angaben sind zunächst nicht nötig, um ein Diagramm zu erstellen. Es gibt jedoch eine ganze Reihe von zusätzlichen Eigenschaften, mit denen es individualisiert werden kann:

kreisdiagramm = new RGraph.Pie("diagramm", [15, 8, 12]);
kreisdiagramm.Set("chart.labels", ["Bananen", "Pflaumen", "Kirschen"]);
kreisdiagramm.Set("chart.colors", ["yellow", "blue", "red"]);
kreisdiagramm.Set("chart.colors.sequential", true);
kreisdiagramm.Draw();

So gibt es die Möglichkeit, über „chart.colors“ und „chart.colors.sequential“ für jedes Diagrammsegement eine eigene Farbe anzugeben. Je nach Diagrammart stehen weitere Eigenschaften zur Verfügung, mit denen sich Abstände, Farben, Schriften und Schatten individuell einstellen lassen.

Ereignisse für Diagramme festlegen

Mit den Eigenschaften „chart.events.click“ und „chart.events.mousemove“ lassen sich einer Grafik Ereignisse zuweisen, die eine beliebige Funktion aufrufen. Dieser Funktion werden in einem Array Informationen über das Diagramm übergeben – beispielsweise das ausgewählte Segment:

kreisdiagramm.Set("chart.events.click", beispielfunktion);

Über die Funktion kann dann beispielsweise je nach ausgewähltem Segment ein Link aufgerufen werden:

function beispielfunktion(e, infos) {
  if (infos[5] == "0") {
    location.href = "http://de.wikipedia.org/wiki/Banane";
  } else if (infos[5] == "1") {
   location.href = "http://de.wikipedia.org/wiki/Pflaume";
  }
}

Im Beispiel wird der fünfte Arraywert von „infos“ abgefragt. Darin enthalten ist die ID des ausgewählten Segments.

Effekte für Diagramme

Je nach Diagrammtyp stehen zahlreiche Effekte zur Verfügung. Es gibt diverse Möglichkeiten, ein Diagramm einzublenden:

RGraph.Effects.Fade.In(diagramm);

Für einen einfachen Einblendeffekt reicht die im Beispiel aufgeführte Zeile. Übergeben wird jeweils die Variable, in der das Diagramm initiiert wurde. Der Aufruf kann auch innerhalb einer Funktion oder eines Event-Handlers gestartet werden. Neben allgemeinen Effekten gibt es auch Effekte, die sich nur auf einen bestimmten Diagrammtyp anwenden lassen:

RGraph.Effects.Pie.RoundRobin(diagramm);

Mit „.Pie.RoundRobin()“ baut sich ein Tortendiagramm vom Mittelpunkt her auf. Um Effekte und Ereignisse nutzen zu können, müssen weitere JavaScript-Dateien der Bibliothek eingebunden werden. RGraph gibt bei fehlenden Dateien einen Hinweis aus, welche zusätzliche Datei integriert werden muss.

Nutzung von RGraph

Die private Nutzung der Bibliothek ist kostenfrei. Es muss lediglich ein Link zur Website von RGraph gesetzt werden. Die kommerzielle Nutzung kostet pro Domain 99 britische Pfund.

Fazit: Der Einstieg in RGraph ist sehr einfach. Denn die ersten Diagramme sind schnell erstellt. Allerdings ist RGraph sehr umfangreich, weshalb schon ein wenig Zeit in die Bibliothek investiert werden sollte, um sich einen Überblick über alle Funktionen verschaffen zu können. Die in diesem Artikel vorgestellten Möglichkeiten geben lediglich einen kleinen Einblick in das, was RGraph kann.

(dpe)

Denis Potschien

Seit 2005 ist er freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

• Web
|
• Facebook
|
• Google+
|
• More Posts (156)