jQuery Knob is the simple jQuery plugin which provides simple, touchable and canvas based jQuery dial which can enhance your admin dashboard.
jQuery Knob supports touch, mouse and mousewheel. It is keyboard events implemented and overloads an input element.
jQuery Knob uses jQuery to run its script. To use jQuery Knob in your web application, first include jQuery CDN before you include jQuery Knob script. Download jQuery Knob from the GitHub. or Alternatively you can also directly load script file from CDNJS.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.13/jquery.knob.min.js"></script>
And then include this tags
<input type="text" value="75" class="dial">
<script type="text/javascript">
$(function() {
$(".dial").knob();
});
</script>
You can pass additional options as attributes data-option like this:
<input type="text" value="75" class="dial" data-min="-50" data-max="50">
Or you can also pass options in knob() functio.
$(".dial").knob({
'min':-50,
'max':50
});
Here is the available options that you can pass.
Behaviour based options:
min : min value, default=0.
max : max value, default=100.
step : step size, default=1.
angleOffset : starting angle in degrees, default=0.
angleArc : arc size in degrees, default=360.
stopper : stop at min & max on keydown/mousewheel, default=true.
readOnly : disable input and events, default=false.
rotation : direction of progression, default=clockwise.
max : max value, default=100.
step : step size, default=1.
angleOffset : starting angle in degrees, default=0.
angleArc : arc size in degrees, default=360.
stopper : stop at min & max on keydown/mousewheel, default=true.
readOnly : disable input and events, default=false.
rotation : direction of progression, default=clockwise.
UI based options:
cursor : display mode "cursor", cursor size could be changed passing a numeric value to the option, default width is used when passing boolean value "true", default=gauge.
thickness : gauge thickness.
lineCap : gauge stroke endings. default=butt, round=rounded line endings
width : dial width.
height : dial height.
displayInput : default=true, false=hide input.
displayPrevious : default=false, true=displays the previous value with transparency.
fgColor : foreground color.
inputColor : input value (number) color.
font : font family.
fontWeight : font weight.
bgColor : background color.
thickness : gauge thickness.
lineCap : gauge stroke endings. default=butt, round=rounded line endings
width : dial width.
height : dial height.
displayInput : default=true, false=hide input.
displayPrevious : default=false, true=displays the previous value with transparency.
fgColor : foreground color.
inputColor : input value (number) color.
font : font family.
fontWeight : font weight.
bgColor : background color.
Here is the complete code to use jQuery Knob.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQuery Knob</title>
<!-- jquery cdn -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- jquery knob cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.13/jquery.knob.min.js"></script>
</head>
<body style="margin: 100px 200px;">
<input type="text" value="75" class="dial">
<script type="text/javascript">
$(function() {
$(".dial").knob();
});
</script>
</body>
</html>
jQuery Knob is not the big tool but still it can enhance user experience and make dashboard beautiful. Here is the official documentation. I hope this will help you. If you have any inquiry, please write in the bellow comment section.
