Arc graph with Slider on Canvas



We used one JQuery UI Slider to change the input data to the graph. Use the slider to change the input data and see how the pointer is moving. Full Code is here
<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>
Visitors Rating
Your Rating




Google+

Post Comment This is for short comments only. Use the forum for more discussions.




HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2018 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer