Passwort vergessen?

Benutzername vergessen?

Alles rund um IT, Web und Entwicklung.
Von Nutzern für Nutzer.

HTML5 Charts mit Morris.js und JavaScript



Morris.js ist eine JavaScript Library für SVG Charts. Im Vergleich zu anderen Frameworks werden Linien-, Balken- und Kreis-(Donat) Diagramme unterstützt.

Dabei passen sich die Charts perfekt in moderne Designs ein.



Einbindung


Zunächst wird Morris.js eingebettet. Als Abhängigkeit werden außerdem noch Raphael und JQuery benötigt.

Die Dateien können per CDN eingebunden werden. Alternativ wird auch ein ZIP-Bundle angeboten.

<html>
   <title>HTML5 Charts mit Morris.js und JavaScript</title>
   <link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css">
   <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
   <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
   <script src="http://cdn.oesmith.co.uk/morris-0.4.3.min.js"></script>
   <body>
 
   </body>
</html>



Diagramm einbinden


Im nächsten Schritt erstellen wir ein Containerelement mit der ID graph für das Diagramm.

<div id="graph" style="height: 250px; width: 750px;"></div>


Jetzt können wir den entsprechenden JavaScript / JQuery Block unterhalb des divs einbauen.

<script type="text/javascript">
$(document).ready(function(){
 
   var graph = null;
 
      graph = Morris.Area({
      element: 'graph',
      data: [
         { key: '2011', value: 50 },
         { key: '2012', value: 100 },
         { key: '2013', value: 170 },
         { key: '2014', value: 120 }
      ],
      xkey: 'key',
      ykeys: ['value'],
      ymax: 200,
      labels: ['Test'],
      hideHover: true,
      fillOpacity: 0.1,
      pointSize: 3,
      lineWidth: 1
   });
 
});
</script>




Anpassungen / Optionen


Morris.js bietet viele verschiedene Möglichkeiten der Anpassung. Hier möchte ich auf die wichtigsten eingehen. Die offizielle Dokumentation gibt hier weitere Auskunft.

Ziele (Goals)


Mit den Zielen lassen sich einzelne horizontale Linien in das Diagramm mit einbetten.
Um Beispielsweise beim Wert 100 eine rote Linie zu ziehen, sind die nachfolgenden Parameter notwendig.

goals: [100],
goalLineColors: ['red'],




Farben


Natürlich lassen sich auch die Farben von Morris.js anpassen. Hierzu sind die nachfolgenden Parameter zuständig:

lineColors: ['#5ae655'],

Die Farbe wird ebenfalls für den ausgefüllten Bereich darunter verwendet.



Transparenz


Weiterhin lässt sich die Transparenz des ausgefüllten Bereichs festlegen (nur Area Charts).
Dabei ist der Wert wie folgt eingeteilt:

  • 0.0 - Komplett durchsichtig

  • 1.0 - Keine Transparenz

fillOpacity: 0.1,


Diagramm per Ajax aktualisieren


Ein sehr interessantes Feature ist auch die Möglichkeit die Diagramme zur Laufzeit per Ajax zu aktualisieren.


$(document).ready(function(){
   var graph = null;
 
   function mychart() {
      $.ajax({
         type: "GET",
         url: "ajax-data.php",
         success: function(data){
            graph = Morris.Area({
            element: 'graph',
            data: result,
            goals: [100],
            goalLineColors: ['red'],
            xkey: 'key',
            ykeys: ['value'],
            ymax: 200,
            labels: ['Test'],
            hideHover: true,
            fillOpacity: 0.1,
            pointSize: 3,
            lineWidth: 1
         });
   };
 
   function mychart_refresh() {
      $.ajax({
         type: "GET",
         url: "ajax-data.php",
         success: function(data){
            var result = $.parseJSON(data);
            graph.setData(result);
         }
      });
   };
 
   mychart();
 
});


Grundlage der Daten ist das PHP Skript ajax-data.php. Dieses liefert uns einen JSON String mit den aktuellen Werten. Dieser könnte z.B. so aussehen:

[{"key":"2011","value":100},{"key":"2012","value":120}]


Durch die Funktion parseJSON verarbeiten wir diesen in ein für JavaScript lesbares Format.

Die Funktion mychart() dient zur ersten Initialisierung. Über die Funktion mychart_refresh(), welche man beispielsweise über einen Button oder Timeout triggern kann, wird das Diagramm geupdated.


Fazit


Morris.js bietet unter den von mir getesteten Frameworks jqPlot und JQuery Knob den bisher besten Funktionsumfang. Das Design fügt sich ohne große Änderungen direkt in neue Projekte ein.

Die offizielle Dokumentation von Morris.js gibt sehr viele weitere Informationen über die Einstellungsmöglichkeiten und Einsatzgebiete.

Michael Kostka

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

Raspberry Pi Starter Kit
DataCloud

Hinterlasse einen Kommentar

Ich habe die Datenschutzerklärung zur Kenntnis genommen und stimme einer elektronischen Speicherung und Verarbeitung meiner eingegebenen Daten zur Beantwortung der Anfrage zu.