Forgot your password?

Forgot your username?

All about IT, Web and Development.
By users for users.

Charts mit JQuery / HTML5 Canvas



Lange Zeit musste man Graphen bzw. Charts oder Diagramme mit Hilfe von Flash darstellen. Dies erforderte viel Rechenleistung und funktionierte zudem nicht auf Mobilgeräten mit Apples iOS.



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.

Michael Kostka

Fachinformatiker / Systemintegration
Ich schreibe hier regelmäßig zu den Themen Android, Web, Linux und Hardware.

Raspberry Pi Starter Kit

Leave a comment

I have read the privacy policy and agree to electronically store and process my input data to answer the request.