How do you create percentage circles

JavaScript
1

hi

how do you create graphics to show percentages or values.

i saw it on one website but now i dont remember.

some kind of simple circles showing percentage.

like if the value is 65 then 65% border of circle is another color filled and rest of the circle border is of difference color filled.

or any other way to show value through graphics.

i dont want to use big script like google charts for these static values.

vineet

2

Hi Vineet
CSS Tricks has a great tutorial on how to create “percentage pies”. You can scrap the JS for the filling and set it up to a specific percentage to fill. And if you want a static circle-center with text or something in it, place an absolute positioned circle with the background color you want and you’re set.

3

This SVG technique may be of interest, I will try it on a site I am busy doing some SVG Charts.

4

hi john

can these be used on commercial website ??

vineet

5

I have some old demos here that may be useful:

6

Hi PaulOB

I like the second demo with blue border circle.

but the border is slightly distorted between somewhere

is it so or only i am seeing it distorted ?

vineet

7

I think that’s just the standard way that small borders show and it may be smoother if the whole thing was larger. (We did have a thread here about border sharpness which may be of interest.)

You may be better off with an animated svg effect as shown here.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.