Forgot your password?

Forgot your username?

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

HTML5 Charts mit JQuery Knob



Nachdem ich bereits vor einiger Zeit das JQuery Plugin jqPlot vorgestellt habe hat sich in der Zwischenzeit einiges getan.

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





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.

Michael Kostka

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

Raspberry Pi Starter Kit
DataCloud

Leave a comment

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