Make gauge charts using Canvas and Javascript

View code Play Walkthrough

Description

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.

Add New Comment

18 Comments

(close)
Bhaskar Reddy

Bhaskar Reddy

Very Nice Tutorial.

rafiks

rafiks

wow,all that work for just a spinning wheel!

Noext

Noext

amazing, thx dud

patvillaruz

patvillaruz

hi! can you create a 3 different color canvas?

RastaLoVeLy

RastaLoVeLy

Nice trick ! How could i do it one an horizontal line ?

Manny

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.

Pedro Melendez

Pedro Melendez

awesome tutorial! THANKS!

2eux

2eux

hmm, this chart animation progress can -1% ?, but great tutorial anyway

Sergiu

Sergiu

Ok, you convinced me. I will start learning to work with the canvas.

guillaume

guillaume

Hi ! Like this one !
Is there a way to make it smaller ? When I change canvas h & w to 100 it just hides but is not smaller why ?

Mara

Mara

Nice tutorial! Thanks.
Can we use gradient colour in the var color?
Thanks

Jill

Jill

Fucking math

Mehedi

Mehedi

Its a awesome work…. fully impressed…

Ernesto

Ernesto

How can I make it read live data? For example, a goggle spreadsheet or a MS SQL database?

Addison

Addison

I’ve been checking out your site and there’s some great stuff here and the design isn’t either.

5x 10x 15x 20x

18 Comments

Description