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