Multiple bgcolors in single knob

[Rohithastak]

Hello,
i wanted to have multiple background colors in single jquery knob, is it possible?
Please help

[JordonZhu]

I realize this function by draw()

<title>jQuery Knob demo</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.knob.js"></script> <script> $(function($) { $(".knob").knob({ draw : function () { // "tron" case if(this.$.data('skin') == 'tron') { this.o.min = 10.0; this.o.max = 30.0; this.o.step = 0.5; this.cursorExt = 0.3;

                        var a = this.arc(this.cv)  // Arc
                            , pa                   // Previous arc
                            , r = 1;

                        this.g.lineWidth = this.lineWidth;
					
						if(this.v != null && this.v != ""){
							this.v = 15
						}
						
                       	this.g.font = "bold 30px Arial";
				        this.g.fillStyle = '#333';
				        this.g.textAlign = 'center';
				        this.g.textBaseline = 'middle';
				        this.g.moveTo(this.xy,this.xy);
				        this.g.fillText(this.v, this.xy,this.xy);
						
						var ast = (5/3) * Math.PI*((this.v-this.o.min)/(this.o.max-this.o.min))+(2/3) * Math.PI;
						var fxx = this.radius*Math.cos(a.e)+this.xy;
						var fxy = this.radius*Math.sin(a.e)+this.xy;
						var fxsx = this.radius*Math.cos(ast)+this.xy;
						var fxsy = this.radius*Math.sin(ast)+this.xy;
						
						this.g.beginPath();
                    	if(this.cv > this.v){
							var grd=this.g.createLinearGradient(fxsx,fxsy,fxx,fxy);
							grd.addColorStop(0,"#ecdb07");
							grd.addColorStop(1,"#FF0000");
                            this.g.strokeStyle = grd;
                            this.g.arc(this.xy, this.xy, this.radius , ast, a.e, a.d);
                    	}else{
						   	var grd=this.g.createLinearGradient(fxsx,fxsy,fxx,fxy);
						   	grd.addColorStop(0,"#11f3b4");
							grd.addColorStop(1,"#0000FF");
                    		this.g.strokeStyle = grd;
                            this.g.arc(this.xy, this.xy, this.radius, ast, a.e, true);
                    	}
                    	this.g.stroke();
						
                        this.g.lineWidth = 2;
                        this.g.beginPath();
                        this.g.strokeStyle = "#333";
                        this.g.arc( this.xy, this.xy, this.radius-this.lineWidth/2, (2/3) * Math.PI, (7/3) * Math.PI);
                        this.g.stroke();
                        
                        var ty= this.radius*Math.cos((1/3)*Math.PI/2);
                        var fx = this.xy;
						var fy = this.xy+ty;
						
						this.g.beginPath();
						this.g.moveTo(fxx,fxy);
                        this.g.strokeStyle = "#ddd";
                        this.g.arc(fxx, fxy, this.lineWidth*(4/3), 0, Math.PI*2);
                        this.g.fill();
                        
                       	this.g.font = "10px Arial";
				        this.g.fillStyle = '#fff';
				        this.g.textAlign = 'center';
				        this.g.textBaseline = 'middle';
				        this.g.moveTo(fxx,fxy);
				        this.g.fillText(this.cv, fxx,fxy);
						
				        this.g.font = "bold 20px Arial";
				        this.g.fillStyle = '#0000FF';
				        this.g.textAlign = 'center';
				        this.g.textBaseline = 'middle';
				        this.g.moveTo(fx,fy);
				        this.g.fillText("XXXX", fx, fy);
							
						
                        return false;
                    }
                }
            });
        });
    </script>
    <style>
        body{
          padding: 0;
          margin: 0px 50px;
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          font-weight: 300;
          text-rendering: optimizelegibility;
        }
        section.contain{
        	width: 600px;
        	margin: 20px auto;
        }
        .title{
    	    width: 100%;
		    font-size: 50px;
		    letter-spacing: 0px;
		    line-height: 40px;
		    text-align: center;
        }
        div.demo{
        	text-align: center;
        }
    </style>
</head>
<body>
	<section class="contain">
		<div class="title">
            <h1>jQuery Knob</h1>
        </div>
        <div class="demo" style="color:#FFF;">
            <input class="knob" data-width="300" data-height="300" data-angleOffset="-150" data-angleArc="300" data-displayInput="false" data-fgColor="#333" data-skin="tron" data-lineCap="round" data-thickness=".1" value="22.0">
        </div>
	</section>
    
</body>