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.
Hierzu passen wir den Hauptteil etwas an. Die Daten werden über eine Variable bzw. JSON an Morris.js übergeben.
$(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.
Similar articles
Search
Leave a comment