How to create circular progress(pie chart) like indicator

Question

I have to show progress graphs exactly in following way where percentage would be in center of circular graph

How can i do this using javascript/jQuery? Can it be done using Google Chart?

Answer 1

There's a plugin for this at: http://anthonyterrien.com/knob/

Demo

jQuery Knob

• canvas based ; no png or jpg sprites.
• touch, mouse and mousewheel, keyboard events implemented.
• downward compatible ; overloads an input element...

Answer 2

I searched and know there are at least 5 ways to create Circular progress indicator:
They include:

1. jquery.polartimer.js
2. jQuery Knob
3. CSS3 pie graph timer with jquery
4. circular progressBar by jQuery andCSS3
5. ProgressBar.js

Answer 3

I would recommend Highcharts JS for all of your JavaScript graphing needs

Browse through more of the demos; I think you're looking for the Donut Chart :)

Answer 4

You can use CSS sprites (google) for this purpose, if you want to show multiples of 10 (0%, 10%, 20% etc). I guess you need to be a graphics guru to create the sprite..

The sprite is one image containing more than one image. For your purpose, you can create an image, say 16x160px. Imagine that this image is divided into ten 16x16px "slices" and draw the corresponding percentage on that slice. You can then use CSS and JavaScript to show one "frame" from this sprite.