Mit dem Design von jqPlot war ich nie richtig zufrieden. Es wirkte etwas altmodisch und war für viele Zwecke etwas überdimensioniert.
JQuery Knob
JQuery Knob ist eigentlich eine HTML 5 / Canvas Implementierung für input Elemente. Es handelt sich dabei um Regler, welche beispielsweise für die Heimautomation zur Einstellung der Temperatur gedacht sind.
Dabei kommt das Plugin auch mit Toucheingaben von Mobilgeräten zurecht und eignet sich damit sehr gut für das Responsive Webdesign.
Diese lassen sich aber auch hervorragend als einfache Pie Charts verwenden.
Einbindung
Zur Einbindung ist zunächst das Framework JQuery nötig. Das Knob Plugin kann aus dem GitHub Repository heruntergeladen werden.
Die ZIP-Datei zunächst entpacken. Im neuen Ordner js befindet sich dann die eigentliche Library (jquery.knob.js). Diese sollte man am besten in das gleiche Verzeichnis wie JQuery kopieren.
HTML Template
Nun können wir die Plugins einbetten.
<!DOCTYPE html> <html> <head> <title>JQuery Knob</title> <script src="jquery-1.10.2.min.js"></script> <script src="jquery.knob.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#chart").knob({ 'min': 0, 'max': 100, 'readOnly': true }); }); </script> </head> <body> <input id="chart" value="10" /> </body> </html>
Damit wird innerhalb des divs mit der ID chart das Diagramm bzw. der Regler angezeigt. Die Option readOnly bewirkt, dass der Wert nicht durch den Nutzer verändert werden kann. Somit dient das Element dann als normales Diagramm.
Werte verändern
Jetzt möchte man natürlich auch die Werte mit JavaScript / JQuery verändert. Hierzu wird einfach das Attribut value verändert:
$("#chart").val(50); $("#chart").trigger("change");
Über den Trigger change wird schließlich der neue Wert übernommen und entsprechend dargestellt.
Dynamisch aktualisieren
In einem aktuellen Projekt haben wir zur Darstellung der aktuellen CPU Auslastung und Temperatur ein sich dynamisch aktualisierendes Diagramm benötigt. Die Wahl fiel hier auf JQuery Knob.
Dabei werden die Werte in einem bestimmten Intervall per Ajax abgefragt und an das Diagramm übergeben.
Das Skript, welches uns die CPU Auslastung als JSON String liefert heißt in diesem Fall ajax-cpu.php und liefert folgendes Ergebnis:
{"load":5,"temp":49}
Um das Diagramm nun dynamisch per Ajax zu aktualisieren, wird folgender Code eingesetzt.
function cpu_refresh(){ $.ajax({ type: "GET", url: "ajax-cpu.php", success: function(data){ var result = $.parseJSON(data); $("#chart").val(result.load); $("#chart").trigger("change"); } }); } setInterval(function(){ cpu_refresh(); }, 10000);
Die Aktualisierung erfolgt alle 10.000 ms (=10s). Sehr praktisch ist hier die Übergabe als JSON, was sich in der Praxis als perfekte Schnittstelle ohne viel Overhead zwischen PHP und JavaScript / JQuery erwiesen hat.
Farbe und Dimensionen anpassen
Knob bietet diverse Einstellungsmöglichkeiten. Diese können entweder als JavaScript Optionen getroffen werden oder über data- Attribute direkt im Element gesetzt werden. Wobei letztere Option empfohlen ist.
Farbe ändern
Die Farbe lässt sich ganz leicht über einen RGB Code anpassen.
HTML
<input id="chart" value="10" data-fgColor="#79c82b" />JavaScript
$("#chart").knob({ 'min': 0, 'max': 100, 'readOnly': true, 'fgColor': "#79c82b" }); $("#chart").css('color', "#79c82b");
Dicke anpassen
HTML
<input id="chart" value="10" data-thickness=".1" />JavaScript
$("#chart").knob({ 'min': 0, 'max': 100, 'readOnly': true, 'thickness': ".1" });
Ecken abrunden
HTML
<input id="chart" value="10" data-linecap="round" />JavaScript
$("#chart").knob({ 'min': 0, 'max': 100, 'readOnly': true, 'linecap': "round" });
Gesamtgröße verändern
HTML
<input id="chart" value="10" data-width="100" />JavaScript
$("#chart").knob({ 'min': 0, 'max': 100, 'readOnly': true, 'width': "100" });
Fazit
JQuery Knob bietet ein zeitgemäßes Design und viele Einstellungsmöglichkeiten. Auch wenn das Plugin eigentlich nicht für Diagramme gedacht ist, erfüllt es diesen Zweck aber mehr als perfekt.
Ähnliche Artikel
Suchen
Hinterlasse einen Kommentar