The arc graph shows 0 value at left edge ( 0 degree ) and it shows maximum value at right edge ( 180 degree ). This is like our speed dial of vehicle.
We will pass two data to this graph , one is maximum value of the data which will match with 180 degree or right corner of the graph the second one is present value based on which our pointer will take position.
var max_data=600;
var pointer_data=500;
Using above two data we can find out the angle of the pointer.
ang_pointer=(180/max_data)*pointer_data;
From the height and width of the canvas we can set the values for other variables.
var my_canvas=$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
var x=my_canvas.width/2; // x coordinate of center of the arc
var y=my_canvas.height-60; // y coordinate of center of the arc, here some margin is left from bottom.
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.
We will enter data at right end of the arc graph
gctx.font = '15px serif';
gctx.fillText(max_data, x+r+arc_width,y); // Write max_data at right side
Draw the arc
We will draw the arc and use strokeStyle to add colour gradient to it.
Colour gradient starts from left edge ( x-r ) to write edge ( x+r ). Here x is the centre point of the graph and r is the radius of the graph.
You can learn more on drawing of pointer from our analog clock drawing tutorial. Here is the code. We also added one small circle at center.
Note that we already calculated the starting angle ( ang_pointer ) by using the input data.
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();
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 ang_pointer=(180/max_data)*pointer_data;
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.
//////////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();
})
</script>
This article is written by plus2net.com team.
plus2net.com
✖
We use cookies to improve your browsing experience. . Learn more
