I want to draw circular gauge using canvas. I written code by referring net. but its not in proper direction after giving points to the scale. I posted my code below:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Knob demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script src="http://anthonyterrien.com/js/jquery.knob.js"></script>
<script>
$(document).ready(function() {
var knob_val = $('.knob').val();
$(".knob").knob({
draw: function() {
//this.$c is canvas
//this.c is canvas context
callDraw(knob_val);
},
change: function(v) {
knob_val = Math.round(v);
callDraw(knob_val);
}
});
function callDraw(knob_val) {
var c = document.getElementById("measure_gauge");
var ctx = c.getContext("2d");
var centerX = c.width/2; // Center x of the meter
var centerY = c.height/2; // Center y of the meter
var largeHashCount = 10; // The spacing of large hashes, 16 per 360 degrees
var smallHashCount = 50; // The spacing of small hashes, 80 per 360 degrees
var outterRadius = 170; // How far from the center both large and small hashes will start
var largeHashRadius = 188; // How far from the center large hashes will end
var smallHashRadius = 180; // How far from the center small hashes will end
// Get the outter points of our large hash lines
var largeHashesOut = getNPointsOnCircle( centerX, centerY, outterRadius, largeHashCount );
// Get the inner pints ouf our large hash li
var largeHashesIn = getNPointsOnCircle( centerX, centerY, largeHashRadius, largeHashCount );
// The hashes start on the right side of the circle
// and we need to strip off the bottom 3, so remove 3,4,5
largeHashesOut.splice(3, 0);
largeHashesIn.splice(3, 0);
// Get the outter points of our small hashes
var smallHashesOut = getNPointsOnCircle( centerX, centerY, outterRadius, smallHashCount );
// Get the inner points out of our small hashes
var smallHashesIn = getNPointsOnCircle( centerX, centerY, smallHashRadius, smallHashCount);
// The hashes start on the right side of the circle
// and we need to strip off the bottom 20, so remove 10,11,12,13....
smallHashesOut.splice(10, 5);
smallHashesIn.splice(10, 5);
run(c, ctx, largeHashesOut, largeHashesIn, smallHashesOut, smallHashesIn, knob_val);
}
function drawMeter(c, ctx, largeHashesOut, largeHashesIn, smallHashesOut, smallHashesIn, knob_val) {
// Small Hashes
var small_deg = 61;
ctx.strokeStyle = "#696969";
ctx.lineWidth = 1;
for( var i = 0; i < smallHashesOut.length; i++ ) {
ctx.beginPath();
ctx.moveTo( smallHashesOut[i].x, smallHashesOut[i].y );
ctx.lineTo( smallHashesIn[i].x, smallHashesIn[i].y );
if(small_deg%5 != 0) {
if(knob_val == small_deg)
ctx.fillStyle = "blue";
else
ctx.fillStyle = "#FFFFFF";
ctx.fillText(small_deg,smallHashesIn[i].x ,smallHashesIn[i].y-10);
}
small_deg = parseInt(small_deg) + 1;
ctx.closePath();
ctx.stroke();
}
// Large Hashes
ctx.strokeStyle = "#000000";
ctx.lineWidth = 2;
var deg = 60;
for( var i = 0; i < largeHashesOut.length; i++ ) {
ctx.beginPath();
ctx.moveTo( largeHashesOut[i].x, largeHashesOut[i].y );
ctx.lineTo( largeHashesIn[i].x, largeHashesIn[i].y );
if(knob_val == deg)
ctx.fillStyle = "blue";
else
ctx.fillStyle = "#000000";
ctx.fillText(deg+'\xB0',largeHashesIn[i].x + 2,largeHashesIn[i].y+20);
deg = deg + 5;
ctx.closePath();
ctx.stroke();
}
}
function getNPointsOnCircle( x, y, radius, n) {
// Found out the spacing of each point based on n points in 360 degrees
var hashSpacing = Math.PI * 2.5 / n;
var points = [];
// For each point of n, find it's position based on the given radius and starting x, y
for( var i = 0; i < n; i++ ){
var a = hashSpacing * i;
points.push( { x: x + Math.cos( a ) * radius , y: y + Math.sin( a ) * radius } );
}
return points;
}
function run(c, ctx, largeHashesOut, largeHashesIn, smallHashesOut, smallHashesIn, knob_val){
ctx.clearRect( 0, 0, c.width, c.height );
drawMeter(c, ctx, largeHashesOut, largeHashesIn, smallHashesOut, smallHashesIn, knob_val);
window.setTimeout( run, 1000 / 60 );
}
// to find x,y position
var c = document.getElementById("measure_gauge");
var ctx = c.getContext("2d");
c.addEventListener('mousemove', function(e) {
var pos = getMousePos(c, e), /// provide this canvas and event
x = pos.x,
y = pos.y;
//console.log(x+"<====>"+y);
/// check x and y against the grid
}, false);
function getMousePos(canvas, e) {
var rect = canvas.getBoundingClientRect();
return {x: e.clientX - rect.left, y: e.clientY - rect.top};
}
});
</script>
<style>
.dialDiv {
margin-top: -27%;
text-align: center;
}
.gaugeDiv {
text-align: center;
}
</style>
</head>
<body>
<div class="gaugeDiv">
<canvas id="measure_gauge" width="400" height="400"></canvas>
</div>
<div class="dialDiv">
<input class="knob" data-angleOffset=-150 data-angleArc=300 data-width=300 data-height=300 data-thickness=".15" data-fgColor="#66EE66" data-rotation="anticlockwise" data-linecap="round" value="85" data-min="60" data-max="90">
</div>
</body>
</html>
My circular gauge points starts from 60 to 90 (60,65,70,75,80,85,90) in clockwise direction.
Kindly help me on this to solve this issue.