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();
}
} |