Drawing arc graph on Canvas

Adding Data to graph

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.
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);
We will add shadow to this graph
gctx.shadowColor = 'black';
gctx.shadowOffsetX=5;
gctx.shadowOffsetY=5;
gctx.shadowBlur = 5;
gctx.stroke();

Drawing of pinter

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

Subscribe to our mailing list

* indicates required
Subscribe to plus2net
Visitors Rating
Your Rating


Google+

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




Subscribe to our mailing list

* indicates required
Subscribe to plus2net
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2017 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer