2

I'm using jQuery plugin called Jquery Knob to create circular progress chart. I've achieved to show value and percentage but I also want to show a label inside the knob itself.This is what I've achieved: without label and this is what I want to achieve: with label

I've used the following code but don't know how to add a text on next line to percentage value(inside knob)

link: function(scope, element, attrs) {

        $(element).knob({
            'format': function(value) {
                return value + '%';
            }
        });
}

I tried adding a newline like 

return value + "%\nlabel"

but it doesn't work and comes on the same line.

VIshal Jain
  • 622
  • 1
  • 7
  • 19

2 Answers2

1

i think i've figured the answer. if u read the documentation, jQuery knob has draw method. jQuery knob use canvas to made the circle, so u just add canvas text to the canvas context. This is should be the answer that match to your need:

$(element).knob({
   'format': function(value) {
      return value + '%';
   },
   'draw': function() {
      this.g.fillText('label', x, y)
   }
});

adjust the x and y variable to the point u will put the label eg. if u want it below the knob value, u should put y >= 1/2 height of your knob.

Rozin Susilo
  • 46
  • 6
0

I have achieved your requirement by using jQuery roundSlider. Check the below demo:

DEMO

Community
  • 1
  • 1
Soundar
  • 2,569
  • 1
  • 16
  • 24
  • Yes there are many other plugins through which it can be done easily but I want to get this done using jquery Knob. – VIshal Jain Jun 14 '17 at 03:13
  • Do you have a jsFiddle for your sample, so that i can try to achieve the requirement through knob in that demo. Or do you have any specific reason for why you need to use knob alone ? – Soundar Jun 14 '17 at 05:36