Mit JQuery, dem Plugin jqPlot und HTML5 Canvas ist hiermit Schluss.
In diesem Artikel wird beschrieben, wie man Charts mit dem JQuery Plugin jqPlot und HTML5 Canvas erstellt.
Vorbereitung
JQuery herunterladen
Zunächst muss die JQuery Library herunterladen werden.
Danach muss die Datei nur noch auf dem Webserver gespeichert werden.
jqPlot herunterladen
Als nächstes muss das JQuery Plugin jqPlot heruntergeladen werden.
Anschließend muss dieses nur noch entpackt werden. Dabei entsteht ein neuer Ordner namens dist, welcher ebenfalls auf den Webserver verschoben werden muss.
Komponenten einbinden
Im nächsten Schritt wird zunächst JQuery in die Webseite eingebunden:
<!DOCTYPE html> <html> <head> <title>Charts mit JQuery / HTML5 Canvas</title> <link rel="stylesheet" type="text/css" href="dist/jquery.jqplot.css"></link> <script src="jquery.min.js" type="text/javascript"></script> <script src="dist/jquery.jqplot.min.js" type="text/javascript"></script> <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="dist/excanvas.js"></script><![endif]--> </head> </html>
Zunächst muss das Stylesheet für die Diagramme eingebunden werden. Im nächsten Schritt wird die JQuery Library und das Plugin jqPlot geladen. Die letzte Zeile dient für die Kompatibilität mit dem Internet Explorer vor Version 9.
Diagramm / Chart erzeugen
Nun kann ein Chart erzeugt werden. Dazu ist folgender Code nötig:
<script type="text/javascript"> $(document).ready(function() { $.jqplot('chart', [ [ [1,2], [2,4], [3,9] ] ]); }); </script>
Dadurch wird das Diagramm in einem <div> mit der id "chart" abgebildet. Die danach folgende äußere, eckige Klammer beinhaltet die Daten aller Diagrammteile.
Die mittleren Klammern definieren jeweils einen Diagrammstrahl. Im inneren befinden sich die hierzu gehörenden Zahlenpaare, welche durch ein Komma abgetrennt sind.
Achtung: Kommazahlen werden nicht mit Komma, sondern mit einem Punkt geschrieben.
Jetzt muss nur noch der <div> für das Diagramm erstellt werden:
<body> <div> <div id="chart" style="height: 400px; width: 400px"></div> </div> </body>
Für eine komplette Übersicht über die Möglichkeiten mit jqPlot empfiehlt sich ein Blick auf die Projektseite.
Fazit
Dank JQuery und dem jqPlot Plugin ist es sehr einfach Diagramme/Charts zu erstellen. Hierbei muss man auch nicht mehr auf Flash oder ähnliche Techniken zur Darstellung zurückgreifen. Dabei setzt jqPlot auf die neue HTML5 Canvas Technik und unterstützt damit neue Standards.
Wer mit dem Design von jqPlot nicht zufrieden ist, dem sind die Plugins jQuery Knob (Donut Charts) und Morris.js (Linien- und Balkendiagramme) zu empfehlen. Diese setzen auf ein aktuelleres Design und sind ebenfalls leicht zu konfigurieren.
Ähnliche Artikel
Suchen
Hinterlasse einen Kommentar