Page History

function renderSPEEDOMETER_ext#EXT_ID#(canvasID, chartJSON, color)
	{
		//canvas initialization
		var canvas = document.getElementById(canvasID);
		var ctx = canvas.getContext("2d");
		//dimensions
		var W = canvas.width;
		var H = canvas.height;
		//Variables
		var degrees = 0;
		var new_degrees = 0;
		var difference = 0;
		var bgcolor = "#d6d7d9";	//color of the space that is not filled
		var text;
		var animation_loop;
      	var value = chartJSON.data.elements[0].values[0].value;
	    var chartData = Math.round(value*3.6);
	    draw();             
		function init()
		{
			//Clear the canvas everytime a chart is drawn
			ctx.clearRect(0, 0, W, H);
			
			//Background 360 degree arc
			ctx.beginPath();
			ctx.strokeStyle = bgcolor;	
			ctx.lineWidth = 25;
			ctx.arc(W/2, H/2, 100, 0, Math.PI*2, false);
			ctx.stroke();
			
			//gauge will be a simple arc
			//Angle in radians = angle in degrees * PI / 180
			var radians = degrees * Math.PI / 180;
			ctx.beginPath();
			ctx.strokeStyle = "#ffdc74";	//color of the filled space
			ctx.lineWidth = 25;
			//The arc starts from the rightmost end. If we deduct 90 degrees from the angles
			//the arc will start from the topmost end
			ctx.arc(W/2, H/2, 100, 0 - 90*Math.PI/180, radians - 90*Math.PI/180, false); 
			//you can see the arc now
			ctx.stroke();
			
			//Lets add the text
			ctx.fillStyle = "#7c7c7c";	//color of the text
			ctx.font = "50px Open Sans";
			text = Math.round(degrees/360*100) + "%";
			//Lets center the text
			//deducting half of text width from position x
			text_width = ctx.measureText(text).width;
			//adding manual value to position y 
			ctx.fillText(text, W/2 - text_width/2, H/2 + 15);
		}
		
		function draw()
		{
			//Cancel any movement animation if a new chart is requested
			if(typeof animation_loop != undefined) clearInterval(animation_loop);
			
			//get degrees that could be filled
			new_degrees = chartData;
			difference = new_degrees - degrees;
			//This will animate the gauge to new positions
			//The animation will take 1 second
			//time for each frame is 1sec / difference in degrees
			animation_loop = setInterval(animate_to, 1000/difference);
		}
		
		//function to make the chart move to new degrees
		function animate_to()
		{
			//clear animation loop if degrees reaches to new_degrees
			if(degrees == new_degrees || new_degrees === undefined) 
				clearInterval(animation_loop);
					
			if(degrees < new_degrees)
				degrees++;
		
			init();
		}
}