That Gauge is COOL!  http://thecodeplayer.com/walkthrough/make-gauge-charts-using-canvas-and-javascript

tons of great examples… canvas is a little tricky css is somewhat hidden but used! set/clear intervals help make things animated interesting combinations of functions hopefully easy to play with and customize the “walkthough” is fun…

html…. <canvas id="canvas" width="300" height="300"> used to create a container in which a script can draw graphics!

css… body { background: #333; } /*Centering the gauge*/ #canvas { display: block; width: 300px; margin: 100px auto; /*Custom font for numbers*/ @font-face { font-family: "bebas"; src: url("http://thecodeplayer.com/uploads/fonts/BebasNeue.otf");

width? what is the difference between the width in HTML and the width in CSS (besides the px?) a style sheet can size the element during rendering, so it can be scaled up or down… try this!

display the display property defines how a certain HTML element should be displayed block The element is displayed as a block element (like paragraphs and headers). A block element has some whitespace above and below it and does not tolerate any HTML elements next to it inline This is default. The element is displayed as an inline element. An inline element has no line break before or after it, and it tolerates HTML elements next to it list-item The element is displayed as a list-item, which means that it has a bullet in front of it

CANVAS?!? There is a canvas tag in html a #canvas in the .css file! given an id=“canvas” a #canvas in the .css file! a var canvas in the .js file! It must be very important! 

skeleton of the code… window.onload = function(){ //canvas initialization var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); //dimensions var W = canvas.width; var H = canvas.height; //Variables ... function init() { } function draw() … animation_loop = setInterval(animate_to, 1000/difference); //function to make the chart move to new degrees function animate_to() …. init(); //Lets add some animation for fun draw(); redraw_loop = setInterval(draw, 2000); //Draw a new chart every 2 seconds

Woah… There are functions in a function? Yup! They share variables… window.onload = function(){ //canvas initialization var canvas = document.getElementById("canvas"); 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 color = "lightgreen"; //green looks better to me var bgcolor = "#222"; var text; var animation_loop, redraw_loop;

draw() function draw() { //Cancel any movement animation if a new chart is requested if(typeof animation_loop != undefined) clearInterval(animation_loop); //random degree from 0 to 360 new_degrees = Math.round(Math.random()*360); 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); }

clearing and setting intervals setInterval() - executes a function, over and over again, at specified time intervals returns a “handle” you can use to clear it! myVar=setInterval("javascript function",milliseconds); clearInterval(myVar);

animate_to() function animate_to() { //clear animation loop if degrees reaches to new_degrees if(degrees == new_degrees) clearInterval(animation_loop); if(degrees < new_degrees) degrees++; else degrees--; init(); }

function init() { //Clear the canvas everytime a chart is drawn ctx 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 = 30; ctx.arc(W/2, H/2, 100, 0, Math.PI*2, false); //you can see the arc now ctx.stroke(); //gauge will be a simple arc //Angle in radians = angle in degrees * PI / 180 var radians = degrees * Math.PI / 180; ctx.strokeStyle = color; //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 //Lets add the text ctx.fillStyle = color; ctx.font = "50px bebas"; text = Math.floor(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 since the height of the text cannot //be measured easily. There are hacks but we will keep it manual for now. ctx.fillText(text, W/2 - text_width/2, H/2 + 15); }