Make gauge charts using Canvas and Javascript
You can make gauge charts using simple arcs in HTML5 canvas. This tutorial walks you through the process of making one.
The gauge chart refreshes every 2 seconds and the numbers increase/decrease in an animation to move towards the new number. During practical use the refreshes could be replaced with AJAX requests on a realtime dashboard.
11 Comments
(close)Aamir Afridi
This is good learning :)
Bhaskar Reddy
Very Nice Tutorial.
rafiks
wow,all that work for just a spinning wheel!
Noext
amazing, thx dud
patvillaruz
hi! can you create a 3 different color canvas?
RastaLoVeLy
Nice trick ! How could i do it one an horizontal line ?
Manny
Nice tutorial. Gave me a starting point to using canvas in animation, though logically in your code, draw should have been init and init draw.
TT
thanks for the great tutorial. do check out a great list of gauges at http://www.fusioncharts.com/demos/gallery/#gauges
Pedro Melendez
awesome tutorial! THANKS!
2eux
hmm, this chart animation progress can -1% ?, but great tutorial anyway
Sergiu
Ok, you convinced me. I will start learning to work with the canvas.