SVG Donut Charts 1

Here we have a donut chart. They are similar to a pie chart, but with a hole in the center. DUH!

Three equal slices are available, and each one is adjustable for color, how big a slice it is, and how fat it is!

This makes this method easily adaptable to a dynamic situation, where values are changing over time. If the values are placed in a database that can be accessed, you have a tool that automagically updates a web page.

The donut is created using the same JavaScript functions as the previous page, which creates a specific 'path' statement. This is then used to set the 'd' attribute of a dummy path.

This path (arc) is centered on the circumference of a circle, so the diameter of the 'hole' changes as the stroke-width is changed. The beginning of the slices (0°) is at the top: 12:00 and moves clockwise.

We also used JavaScript to put some of the code into a loop to reduce typing.

See this in action ...