Arc graph with Slider on Canvas

<script>
$(document).ready(function() {
	
var max_data=600;
var pointer_data=500;
// Finding the pointer angle or location 
//by using max_data and pointer_data as inputs //


var my_canvas=$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
var x=my_canvas.width/2;
var y=my_canvas.height-60; // Bottom margin of the chart
var r=200; // Radius of the arc
var arc_width=50;  // Width of the arc with colour band
arc_angle=10; // angle of the arc at opposite end of the pointer. 

my_function=function my_function(){
gctx.clearRect(0, 0, my_canvas.width,my_canvas.height);	
var ang_pointer=(180/max_data)*pointer_data;  
	
////data at right end /////
gctx.font = '15px serif';
gctx.fillText(max_data, x+r+arc_width,y); 
// Write max_data at right side
//////////////////////
gctx.beginPath();
my_gradient=gctx.createLinearGradient((x-r),y,x+r,y);
my_gradient.addColorStop(0,'#f50000');
my_gradient.addColorStop(0.5,'#f5f500');
my_gradient.addColorStop(1,'#00f500');
gctx.strokeStyle= my_gradient;
gctx.lineWidth=arc_width;
gctx.arc(x,y,r,1.0*Math.PI,2.0*Math.PI);
gctx.shadowColor = 'black';
gctx.shadowOffsetX=5;
gctx.shadowOffsetY=5;
gctx.shadowBlur = 5;
gctx.stroke();
/////////////////
///// Draw the pointer ////
gctx.beginPath()
gctx.strokeStyle= '#46d2f5'; // border color of the second needle 
var startAngle=(1/180) * (ang_pointer); // In degree 
var a_start_ang=(1/180) * ((ang_pointer  -arc_angle));
var a_end_ang=(1/180) *((ang_pointer + arc_angle));

var y1=y- r*Math.sin(startAngle*Math.PI);
var x1=x- r*Math.cos(startAngle*Math.PI);

/// writing text at edge of the pointer ///
var y2=y- 1.3*r*Math.sin(startAngle*Math.PI);
var x2=x- 1.3*r*Math.cos(startAngle*Math.PI);
gctx.fillText(pointer_data, x2,y2);

gctx.moveTo(x1,y1); // Coordinate of tip of the needle
gctx.arc(x,y,0.2*r,a_start_ang*Math.PI,a_end_ang*Math.PI);
gctx.lineTo(x1,y1); // Full second needle path
gctx.fillStyle = '#46d2f5'; // fill colour of the second needle
gctx.lineWidth=3;
gctx.fill();
gctx.stroke(); // draw the second needle 

/// small Circle at center of the clock 
gctx.beginPath()
gctx.strokeStyle= '#000000';
gctx.arc(x,y,3,0,2*Math.PI); 
gctx.fillStyle = '#ff00ff';
gctx.fill();
gctx.stroke();
}
my_function();

///////////////////////////
$( "#slider_r" ).slider({
orientation:'horizontal',
min:0,
max:600,
step:1,
animate:'slow',
value:500,
disabled:false,
slide: function(event, ui) { 
pointer_data=ui.value;
my_function();
}

});
////////////////////////

})
</script>