4

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.

Nikhil N
  • 4,507
  • 1
  • 35
  • 53

1 Answers1

4

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

matthias_h
  • 11,356
  • 9
  • 22
  • 40
  • from this demo i can't change the value of red and green knobs. The blue knob only accessible, is this the intended behavior ? Then what is the use of other two sliders ? – Soundar Jul 24 '15 at 18:27
  • @SoundarR I've adjusted the demo in this Fiddle: http://jsfiddle.net/huj3u6et/ with the values changed for _all_ colors. Note that it's necessary to adjust the values for 'data-angleOffset' and 'data-angleArc' - green has an arc value of 60, so the offset of red - for the starting point - is changed to 60. The red arc is changed to 200, so the offset of blue is 260, and the arc of blue is 100 to get the whole 360 for the circle. – matthias_h Jul 24 '15 at 22:21
  • yes, i can understand. But my doubt is, by using the mouse i can change the blue slider value only. I can't change the remaining sliders value by clicking on that.. so that i am asking is this the intended behavior ? – Soundar Jul 25 '15 at 06:04
  • @SoundarR It was only intended to _display_ a knob with different colors and not considered to keep the functionality. The problem is that each canvas uses the whole space and they're stacked upon each other as visible in Firebug. I've added a log message in this updated fiddle http://jsfiddle.net/huj3u6et/1/ where I also added a class for each color. When you click on red or green it's always the blue knob for which the click counts because it's on top. It's possible to change this by setting a higher z-index, in the fiddle I've commented out setting the z-index for green as example. – matthias_h Jul 25 '15 at 09:53
  • @SoundarR It could be possible to prevent the knob changing on click, previously detect which knob is clicked by getting the mouse position, reading the values of the knob inputs and then set a higher z-index for the knob on which arc was clicked. – matthias_h Jul 25 '15 at 09:53
  • hmm OK, that's fine .. +1 – Soundar Jul 25 '15 at 15:51
  • 1
    Fix links with correct plugin address... http://jsfiddle.net/pLzgdw23/ and http://jsfiddle.net/3bL9gs67/ – Pyetro Dec 26 '19 at 17:21