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>

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com




    Post your comments , suggestion , error , requirements etc here .




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer