Search code examples
jquerycssjquery-knob

How to draw multiple arc in single dial using jquery knob?

I would like to have multiple arc in single dial using jquery knob. Is it possible? See below image.

Multi arc

The code I have tried so far.

$(".dial").knob({
                'readOnly': true,
                'displayPrevious': true,
                change : function (value) {
                    //console.log("change : " + value);
                },
                release : function (value) {
                    console.log("release : " + value);

                    //need to out some logic here
                },
                cancel : function () {
                    console.log("cancel : " + this.value);
                },
                draw : function () {
                    $(this.i).val(this.cv + '%');
                }
            });

            $('.dial').val(10).trigger('change');

I am open to use other jquery library or solutions also.

Solution

  • It's possible to display multiple arcs in a single dial using a single knob for each color and set the position of the div to absolute. Example with 3 colors:

    <input class="knob" type='text'  value='100' data-angleOffset="0" 
data-angleArc="120" data-fgColor="green" data-displayInput=false />

<input class="knob" type='text' value='100' data-angleOffset="120" 
data-angleArc="120" data-fgColor="red" data-displayInput=false />

<input class="knob" type='text'  value='100' data-angleOffset="240"
data-angleArc="120" data-fgColor="blue" data-displayInput=false />

    The value of data-angleOffset sets the start of the arc, the value of data-angleArc the width. Initialize the knobs and set the position of the div containing the canvas to absolute:

    $(function () {
   $('.knob').knob({});
   $(".knob").parent("div").css("position", "absolute");     
});

    Working example: jQuery Knob multiple arc