Hallo und willkommen zu einem neuen Blogposting!
Jeder von uns kommt früher oder später mal an den Punkt, an dem wir ein Diagramm darstellen möchten – Sei es für die einfache Darstellung von Daten oder komplexer Algorithmen, das warum soll nicht mein Thema sein.
Ich möchte mich stattdessen um das wie kümmern! Wir Entwickler stehen nun wieder vor der Qual der Wahl… Plugin? Selbst machen? Statisch oder generisch?

Die Qual der Wahl

Hier eine kleine Liste an Möglichkeiten wie wir ein Diagramm erstellen und darstellen könnten:

• Mit einem Grafikprogramm ein statisches Bild erstellen
• Mit PHP ein Bild zur Laufzeit generieren
• Mit HTML und CSS ein einfaches Balken-Diagramm darstellen
• Per Javascript ein Bild generieren
• Per Javascript und dem Canvas Element eine interaktive Grafik generieren
• Per Javascript und SVG eine interaktive Grafik generieren
• usw…

Ihr seht, es gibt genug Möglichkeiten… Doch wir können nicht einfach blind drauf los entwickeln. Immerhin bieten uns nicht alle Browser alle Features die wir benötigen (Thema HTML5 und interaktive Darstellung).

Sofern euch die statischen Versionen (Bild oder Balken-Diagramm mit Hilfe von HTML und CSS) nicht genügen möchte ich euch die Nutzung von Canvas nahelegen – Diese Technologie funktioniert zwar in den alten Internet Explorer (unter Version 9) nicht von Haus aus, doch da kann uns explorercanvas (oder auch „excanvas“) helfen. Excanvas überschreibt die benötigten Methoden mit intelligenten Fallbacks die in den alten IE Versionen funktionieren.

Je nach Komplexität der angestrebten Diagramm-Darstellung würde ich vom „selbst entwickeln“ abraten und lieber ein Plugin für das Framework eurer Wahl suchen. Das gleiche habe ich erst letzte Woche gemacht als ich einen kleinen Job für einen Bekannten umgesetzt habe.

Hier kommt also jqPlot ins Spiel.
Dieses jQuery Plugin ist extrem vielseitig, konfigurierbar und bietet uns eigentlich alle gängigen Diagramm-Typen – viel entscheidender jedoch: Das Plugin wurde im IE7, IE8, Firefox, Safari und Opera getestet. IE9 und Chrome werden zwar auf der Entwickler-Homepage nicht aufgeführt, haben mir persönlich allerdings keine Probleme bereitet.

Wie lässt sich mit jqPlot arbeiten?

Eigentlich ist die Nutzung relativ einfach und selbsterklärend. Etwas komplexer wird es jedoch wenn man den Graphen individualisieren möchte – Hier werden uns aber viele Beispiele für den typischen Gebrauch an die Hand gegeben: Habt ihr jqPlot runtergeladen warten im ZIP Archiv etwas über 90 Beispiele für verschiedene Diagramm-Typen, Funktionen und Features!
Die offizielle Dokumentation ist recht ordentlich und geht auf die meisten Funktionen und Konfigurationen ein, hat mir aber manchmal nicht alle meine Fragen beantwortet oder neue Fragen aufgeworfen – Diese kann man sich in der Regel allerdings schnell mit Hilfe der mitgelieferten Beispiele selbst beantworten.

Hier ein kleines Code-Beispiel.

// Ein ganz einfacher Graph der im Element mit der ID "graph" dargestellt wird.
$(document).ready(function(){
    $.jqplot(
        'graph', // Hier definieren wir das Ziel-Element.
        [ // Anschließend ein Array mit den Daten für die Graphen.
            [1,5,8,7,6,2,3,4], // Die Werte im Array definieren die Y-Punkte des 1.Graphen.
            [9,5,7,8,5,6,6,2] // Die Werte im Array definieren die Y-Punkte des 2.Graphen.
        ],
        { // Und zuletzt die (optionale) Konfiguration zum individualisieren.
            series:[{
                color:'#aa1234', // Farbe der ersten Linie
                lineWidth:2, // Dicke der Linie in Pixel
                label:'Linie 1' // Name der Linie (für die Legende)
            },{
                color:'#1234ff',
                lineWidth:2,
                label:'Linie 2'
            }]
        });
});

Mini Fazit

Ich bin mit dem Plugin sehr zufrieden, weil es sehr zuverlässig arbeitet und (für den Fall der Fälle) noch mit vielen weiteren Features und Plugins aufwartet um auch sehr komplexe Graphen abzubilden:

• Bis zu 9 Y-Achsen
• Formatierbare Datums-Labels
• Labels lassen sich beliebig drehen (0°-360°)
• Tooltips und Datenpunkt-highlighting mit der Maus
• Graphen lassen sich auf Wunsch animieren
• Automatisches skalieren der Achsen (auf Wunsch aber auch mit „min“ und „max“ Werten beschränkbar)

Ich denke ich werde auch in Zukunft auf dieses Plugin zurückgreifen wenn ich erneut Diagramme darstellen muss 🙂

Wie sieht es bei euch aus? Kennt ihr andere Plugins die ggf. noch einfacher zu nutzen sind oder andere gute Features besitzen?
Lasst es mich wissen!

Für Heute möchte ich hier Schluss machen und euch noch einen schönen Abend wünschen.